v1.2 navigates posts and files, highlights with generic color

js/keyboard-shortcuts.js

@@ -1,20 +1,15 @@
 // author: joakimoa
 // keyboard navigation option
-// v1.1
+// v1.2
-
-// 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)
 
+$(document).on("ready", function() {
 
 // adding checkbox for turning on/off
 if (window.Options && Options.get_tab('general')) {
 	Options.extend_tab("general",
 	"<fieldset><legend> Keyboard Navigation </legend>" +
-	 "<label class='keyboardnav' id='keyboardnav' style='padding:0px;'><input type='checkbox' /> Enable Keyboard Navigation</label>" +
+	 ("<label class='keyboardnav' id='keyboardnav' style='padding:0px;'><input type='checkbox' /> Enable Keyboard Navigation</label>") +
-	 "<table><tr><td>Action</td><td>Key</td></tr>" +
+	 "<table><tr><td>Action</td><td>Key (a-z)</td></tr>" +
      "<tr><td>Next Reply</td><td><input class='field' name='next-reply' spellcheck='false'></td></tr>" +
      "<tr><td>Previous Reply</td><td><input class='field' name='previous-reply' spellcheck='false'></td></tr>" +
      "<tr><td>Expand File</td><td><input class='field' name='expando' spellcheck='false'></td></tr>" +
@@ -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 nextReplyKeycode = 74;     // j
-var previousReplyKeycode = 75;
+var previousReplyKeycode = 75; // k
-var expandoKeycode = 69;
+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 replies = document.getElementsByClassName("post reply");
-    var files = document.getElementsByClassName("file multifile");
     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 k = -1;
+    var reply_indexx = 0;
-    function scrollDown() {
+    var image_indexx = -1;
-        if (k < files.length) {
+    function focusNextReply() {
-            k++;
+        if (reply_indexx < replies.length-1) {
-            scrollTo(files[k]);
+            reply_indexx++;
+            image_indexx = -1;
+            var images = replies[reply_indexx].getElementsByClassName("file");
+            if (images.length !== 0) {
+                focusNextImage();
+            } else {
+                scrollTo(replies[reply_indexx]);
+            }
         }
     }
 
-    function scrollUp() {
+    function focusNextImage() {
-        if (k > 0) {
+        var images = replies[reply_indexx].getElementsByClassName("file");
-            k--;
+        if (images.length === 0) {
-            scrollTo(files[k]);
+            focusNextReply();
+        } else {
+            image_indexx++;
+            if (image_indexx > images.length-1) {
+                image_indexx = 0;
+                focusNextReply();
+            } else {
+                scrollTo(images[image_indexx]);
+            }
+        }
+    }
+
+    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();
+            focusPreviousImage();
-        } else if (e.keyCode == expandoKeycode && k > -1) {
+        } else if (e.keyCode == expandoKeycode) {
             expandFile();
         }
     }
 }
 
-// loads main function if checkbox toggled and in a thread
+// loads main function if checkbox toggled and in a thread with replies
-if (getSetting('keyboardnav') && document.getElementsByClassName("thread").length === 1) {
+if (getSetting('keyboardnav') && document.getElementsByClassName("thread").length === 1 && document.getElementsByClassName("post reply").length > 0) {
     loadKeyboardNav();
 }
+
+});