switch js navigation to use wasd

app/assets/javascripts/paginator.js

@@ -18,8 +18,8 @@
 
 $(function() {
   if ($(".paginator").length && (Danbooru.meta("enable-js-navigation") === "true")) {
-    $(document).bind("keydown.right", Danbooru.Paginator.next_page);
-    $(document).bind("keydown.left", Danbooru.Paginator.prev_page);
+    $(document).bind("keydown.d", Danbooru.Paginator.next_page);
+    $(document).bind("keydown.a", Danbooru.Paginator.prev_page);
   }
 });
 

app/assets/javascripts/posts.js

@@ -50,7 +50,7 @@
     });
   }
   
-  Danbooru.Post.nav_pool_prev = function() {
+  Danbooru.Post.nav_prev = function() {
     if ($("#search-seq-nav").length) {
       var href = $("#search-seq-nav a[rel=prev]").attr("href");
       if (href) {
@@ -64,7 +64,7 @@
     }
   }
   
-  Danbooru.Post.nav_pool_next = function() {
+  Danbooru.Post.nav_next = function() {
     if ($("#search-seq-nav").length) {
       var href = $("#search-seq-nav a[rel=next]").attr("href");
       location.href = href;
@@ -76,17 +76,21 @@
     }
   }
   
-  Danbooru.Post.nav_pool_scroll = function() {
-    var scroll_top = $(window).scrollTop() + $(window).height();
-    
-    if (scroll_top > $("#image").height() + $("#image").offset().top + ($("#image").height() / 2)) {
-      Danbooru.Post.nav_pool_next();
-      return;
+  Danbooru.Post.nav_scroll_down = function() {
+    var scroll_top = $(window).scrollTop() + ($(window).height() * 0.85);
+    Danbooru.scroll_to(scroll_top);
+  }
+
+  Danbooru.Post.nav_scroll_up = function() {
+    var scroll_top = $(window).scrollTop() - ($(window).height() * 0.85);
+    if (scroll_top < 0) {
+      scroll_top = 0;
     }
+    Danbooru.scroll_to(scroll_top);
   }
 
   Danbooru.Post.initialize_shortcuts = function() {
-    $(document).bind("keydown./", function(e) {
+    $(document).bind("keydown.q", function(e) {
       $("#tags").trigger("focus");
       e.preventDefault();
     });
@@ -98,18 +102,22 @@
         e.preventDefault();
       });
 
-      $(document).bind("keydown.left", function(e) {
-        Danbooru.Post.nav_pool_prev();
+      $(document).bind("keydown.a", function(e) {
+        Danbooru.Post.nav_prev();
         e.preventDefault();
       });
 
-      $(document).bind("keydown.right", function(e) {
-        Danbooru.Post.nav_pool_next();
+      $(document).bind("keydown.d", function(e) {
+        Danbooru.Post.nav_next();
         e.preventDefault();
       });
       
-      $(document).bind("keydown.space", function(e) {
-        Danbooru.Post.nav_pool_scroll();
+      $(document).bind("keydown.s", function(e) {
+        Danbooru.Post.nav_scroll_down();
+      })
+
+      $(document).bind("keydown.w", function(e) {
+        Danbooru.Post.nav_scroll_up();
       })
     }
   }

app/assets/javascripts/utility.js

@@ -4,9 +4,15 @@
   }
   
   Danbooru.scroll_to = function(element) {
+    var top = null;
+    if (typeof(element) === "number") {
+      top = element;
+    } else {
+      top = element.offset().top - 10;
+    }
     $('html, body').animate({
-        scrollTop: element.offset().top - 10
-    }, 250);
+        scrollTop: top
+    }, 0);
   }
 
   Danbooru.notice = function(msg) {

app/views/static/keyboard_shortcuts.html.erb

@@ -5,9 +5,9 @@
     <section>
       <h1>Listing</h1>
       <ul>
-        <li><span class="key">&larr;</span> Previous page</li>
-        <li><span class="key">&rarr;</span> Next page</li>
-        <li><span class="key">/</span> Search</li>
+        <li><span class="key">a</span> Previous page</li>
+        <li><span class="key">d</span> Next page</li>
+        <li><span class="key">q</span> Search</li>
       </ul>
     </section>
     
@@ -16,10 +16,11 @@
       <ul>
         <li><span class="key">n</span> New note</li>
         <li><span class="key">e</span> Edit tags</li>
-        <li><span class="key">/</span> Search</li>
-        <li><span class="key">space</span> Scroll down/next post</li>
-        <li><span class="key">&larr;</span> Previous post</li>
-        <li><span class="key">&rarr;</span> Next post</li>
+        <li><span class="key">q</span> Search</li>
+        <li><span class="key">w</span> Scroll up</li>
+        <li><span class="key">s</span> Scroll down</li>
+        <li><span class="key">a</span> Previous post</li>
+        <li><span class="key">d</span> Next post</li>
       </ul>
     </section>
   </div>