switch js navigation to use wasd

This commit is contained in:
albert
2013-03-09 01:35:34 -05:00
parent 5560d79d5c
commit 3bf617cb57
4 changed files with 41 additions and 26 deletions

View File

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

View File

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

View File

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

View File

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