From 6677b6c08605d902ce5277bd0ca670d04fe18801 Mon Sep 17 00:00:00 2001 From: Joakim Almgren Date: Tue, 6 Jun 2017 23:42:25 +0200 Subject: [PATCH] v1.2 navigates posts and files, highlights with generic color --- js/keyboard-shortcuts.js | 113 ++++++++++++++++++++++++++------------- 1 file changed, 76 insertions(+), 37 deletions(-) diff --git a/js/keyboard-shortcuts.js b/js/keyboard-shortcuts.js index dd818d42..64b7ee15 100644 --- a/js/keyboard-shortcuts.js +++ b/js/keyboard-shortcuts.js @@ -1,20 +1,15 @@ // author: joakimoa // keyboard navigation option -// v1.1 - -// todo change document.getElementsByClassName("file multifile"); to "post-image" -// todo change to navigation replies > post-image e.g. -// for reply in replies: -// for post-image in reply: -// scrollTo(post-image) +// v1.2 +$(document).on("ready", function() { // adding checkbox for turning on/off if (window.Options && Options.get_tab('general')) { Options.extend_tab("general", "
Keyboard Navigation " + - "" + - "" + + ("") + + "
ActionKey
" + "" + "" + "" + @@ -23,8 +18,6 @@ if (window.Options && Options.get_tab('general')) { $('.keyboardnav').on('change', function(){ var setting = $(this).attr('id'); - console.log("changed keyboardnav"); - localStorage[setting] = $(this).children('input').is(':checked'); }); @@ -54,15 +47,15 @@ var nextReplyInput = document.getElementsByName("next-reply")[0]; var previousReplyInput = document.getElementsByName("previous-reply")[0]; var expandoInput = document.getElementsByName("expando")[0]; -var nextReplyKeycode = 74; -var previousReplyKeycode = 75; -var expandoKeycode = 69; +var nextReplyKeycode = 74; // j +var previousReplyKeycode = 75; // k +var expandoKeycode = 69; // e if (getSetting('keyboardnav')) $('#keyboardnav>input').prop('checked', 'checked'); if (isKeySet('next.reply.key')) { nextReplyKeycode = localStorage["next.reply.key"]; nextReplyInput.value = nextReplyKeycode; -} // need to add so it loads the settings if there are any, to both the vars and to the text fields +} if (isKeySet('previous.reply.key')) { previousReplyKeycode = localStorage["previous.reply.key"]; previousReplyInput.value = previousReplyKeycode; @@ -81,7 +74,6 @@ previousReplyInput.addEventListener("keyup", changePreviousReplyKey, false); expandoInput.addEventListener("keyup", changeExpandoKey, false); function changeNextReplyKey(e) { - //console.log(String.fromCharCode(e.keyCode)); nextReplyInput.value = ""; if (e.keyCode >= 65 && e.keyCode <= 90) { nextReplyInput.value = String.fromCharCode(e.keyCode); @@ -90,7 +82,6 @@ function changeNextReplyKey(e) { } function changePreviousReplyKey(e) { - //console.log(String.fromCharCode(e.keyCode)); previousReplyInput.value = ""; if (e.keyCode >= 65 && e.keyCode <= 90) { previousReplyInput.value = String.fromCharCode(e.keyCode); @@ -99,7 +90,6 @@ function changePreviousReplyKey(e) { } function changeExpandoKey(e) { - //console.log(String.fromCharCode(e.keyCode)); expandoInput.value = ""; if (e.keyCode >= 65 && e.keyCode <= 90) { expandoInput.value = String.fromCharCode(e.keyCode); @@ -109,24 +99,68 @@ function changeExpandoKey(e) { // loads the main function function loadKeyboardNav() { - // get arr and nav - var files = document.getElementsByClassName("file multifile"); + var replies = document.getElementsByClassName("post reply"); var current_file = null; + var highlight_color = "#555"; var default_color = "black"; - default_color = window.getComputedStyle(files[0], null).getPropertyValue("background-color"); + if (replies.length > 0) default_color = window.getComputedStyle(replies[0], null).getPropertyValue("background-color"); + + var reply_indexx = 0; + var image_indexx = -1; + function focusNextReply() { + if (reply_indexx < replies.length-1) { + reply_indexx++; + image_indexx = -1; + var images = replies[reply_indexx].getElementsByClassName("file"); + if (images.length !== 0) { + focusNextImage(); + } else { + scrollTo(replies[reply_indexx]); + } + } + } - var k = -1; - function scrollDown() { - if (k < files.length) { - k++; - scrollTo(files[k]); + function focusNextImage() { + var images = replies[reply_indexx].getElementsByClassName("file"); + if (images.length === 0) { + focusNextReply(); + } else { + image_indexx++; + if (image_indexx > images.length-1) { + image_indexx = 0; + focusNextReply(); + } else { + scrollTo(images[image_indexx]); + } } } - function scrollUp() { - if (k > 0) { - k--; - scrollTo(files[k]); + function focusPreviousReply() { + if (reply_indexx > 0) { + reply_indexx--; + var images = replies[reply_indexx].getElementsByClassName("file"); + image_indexx = images.length; + if (images.length !== 0) { + focusPreviousImage(); + } else { + image_indexx = -1; + scrollTo(replies[reply_indexx]); + } + } + } + + function focusPreviousImage() { + var images = replies[reply_indexx].getElementsByClassName("file"); + if (images.length === 0) { + focusPreviousReply(); + } else { + image_indexx--; + if (image_indexx < 0) { + image_indexx = 0; + focusPreviousReply(); + } else { + scrollTo(images[image_indexx]); + } } } @@ -136,11 +170,14 @@ function loadKeyboardNav() { } current_file = e; e.scrollIntoView(); - e.style.backgroundColor = "#1D1D21"; + e.style.backgroundColor = highlight_color; } function expandFile() { - files[k].getElementsByClassName("post-image")[0].click(); + var imgg = replies[reply_indexx].getElementsByClassName("post-image"); + if (imgg.length > 0 && image_indexx > -1) { + imgg[image_indexx].click(); + } } // input @@ -148,16 +185,18 @@ function loadKeyboardNav() { function checkKeyPressed(e) { if (e.keyCode == nextReplyKeycode) { - scrollDown(); + focusNextImage(); } else if (e.keyCode == previousReplyKeycode) { - scrollUp(); - } else if (e.keyCode == expandoKeycode && k > -1) { + focusPreviousImage(); + } else if (e.keyCode == expandoKeycode) { expandFile(); } } } -// loads main function if checkbox toggled and in a thread -if (getSetting('keyboardnav') && document.getElementsByClassName("thread").length === 1) { +// loads main function if checkbox toggled and in a thread with replies +if (getSetting('keyboardnav') && document.getElementsByClassName("thread").length === 1 && document.getElementsByClassName("post reply").length > 0) { loadKeyboardNav(); } + +});
ActionKey (a-z)
Next Reply
Previous Reply
Expand File