summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/keyboard-shortcuts.js113
1 files 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",
"<fieldset><legend> Keyboard Navigation </legend>" +
- "<label class='keyboardnav' id='keyboardnav' style='padding:0px;'><input type='checkbox' /> Enable Keyboard Navigation</label>" +
- "<table><tr><td>Action</td><td>Key</td></tr>" +
+ ("<label class='keyboardnav' id='keyboardnav' style='padding:0px;'><input type='checkbox' /> Enable Keyboard Navigation</label>") +
+ "<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 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();
}
+
+});
generated by cgit v1.3 (git 2.53.0) at 2026-10-25 20:21:11 +0000