From f20f2d89f09896e35e3e56afa6f25dca9850f99c Mon Sep 17 00:00:00 2001 From: Joakim Almgren Date: Mon, 5 Jun 2017 21:37:52 +0200 Subject: [PATCH 1/5] keyboard navigation, jk, e --- js/keyboard-shortcuts.js | 85 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 js/keyboard-shortcuts.js diff --git a/js/keyboard-shortcuts.js b/js/keyboard-shortcuts.js new file mode 100644 index 00000000..1f8d56bf --- /dev/null +++ b/js/keyboard-shortcuts.js @@ -0,0 +1,85 @@ +// author: joakimoa +// keyboard navigation option +// v1.0 + +// adding checkbox for turning on/off +if (window.Options && Options.get_tab('general')) { + Options.extend_tab("general", + "
Keyboard Navigation " + + ("") + + "
"); +} + +$('.keyboardnav').on('change', function(){ + var setting = $(this).attr('id'); + console.log("changed keyboardnav"); + + localStorage[setting] = $(this).children('input').is(':checked'); +}); + +if (!localStorage.keyboardnav) { + localStorage.keyboardnav = 'false'; +} + +// getting locally stored setting +function getSetting(key) { + return (localStorage[key] == 'true'); +} + +if (getSetting('keyboardnav')) $('#keyboardnav>input').prop('checked', 'checked'); + +// loads the main function +function loadKeyboardNav() { + // get arr and nav + var files = document.getElementsByClassName("file multifile"); + var current_file = null; + var default_color = "black"; + default_color = window.getComputedStyle(files[0], null).getPropertyValue("background-color"); + + var k = -1; + function scrollDown() { + if (k < files.length) { + k++; + scrollTo(files[k]); + } + } + + function scrollUp() { + if (k > 0) { + k--; + scrollTo(files[k]); + } + } + + function scrollTo(e) { + if (current_file !== null) { + current_file.style.backgroundColor = default_color; + } + current_file = e; + e.scrollIntoView(); + e.style.backgroundColor = "#1D1D21"; + } + + function expandFile() { + files[k].getElementsByClassName("post-image")[0].click(); + } + + // input + window.addEventListener("keydown", checkKeyPressed, false); + + function checkKeyPressed(e) { + if (e.keyCode == "74") { + scrollDown(); + } else if (e.keyCode == "75") { + scrollUp(); + } else if (e.keyCode == "69") { + expandFile(); + } + } +} + +// loads main function if checkbox toggled and in a thread +if (getSetting('keyboardnav') && document.getElementsByClassName("thread").length === 1) { + console.log("test"); + loadKeyboardNav(); +} From d2068ee0234e00ed285606331021ccbaa3598f60 Mon Sep 17 00:00:00 2001 From: Joakim Almgren Date: Tue, 6 Jun 2017 00:59:15 +0200 Subject: [PATCH 2/5] v1.1 added customizeable keybinds --- js/keyboard-shortcuts.js | 85 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 78 insertions(+), 7 deletions(-) diff --git a/js/keyboard-shortcuts.js b/js/keyboard-shortcuts.js index 1f8d56bf..b0f8c2eb 100644 --- a/js/keyboard-shortcuts.js +++ b/js/keyboard-shortcuts.js @@ -1,13 +1,17 @@ // author: joakimoa // keyboard navigation option -// v1.0 +// v1.1 // adding checkbox for turning on/off if (window.Options && Options.get_tab('general')) { Options.extend_tab("general", "
Keyboard Navigation " + - ("") + - "
"); + ("") + + "" + + "" + + "" + + "" + + "
ActionKey
Next Reply
Previous Reply
Expand File
"); } $('.keyboardnav').on('change', function(){ @@ -20,13 +24,81 @@ $('.keyboardnav').on('change', function(){ if (!localStorage.keyboardnav) { localStorage.keyboardnav = 'false'; } +if (!localStorage["next.reply.key"]) { + localStorage["next.reply.key"] = 74; +} +if (!localStorage["previous.reply.key"]) { + localStorage["previous.reply.key"] = 75; +} +if (!localStorage["expando.key"]) { + localStorage["expando.key"] = 69; +} // getting locally stored setting function getSetting(key) { return (localStorage[key] == 'true'); } +function isKeySet(key) { + return (localStorage[key] !== false); +} + +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; + 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; +} +if (isKeySet('expando.key')) { + expandoKeycode = localStorage["expando.key"]; + expandoInput.value = expandoKeycode; +} + +document.getElementsByName("next-reply")[0].value = String.fromCharCode(nextReplyKeycode); +document.getElementsByName("previous-reply")[0].value = String.fromCharCode(previousReplyKeycode); +document.getElementsByName("expando")[0].value = String.fromCharCode(expandoKeycode); + +nextReplyInput.addEventListener("keyup", changeNextReplyKey, false); +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); + localStorage["next.reply.key"] = e.keyCode; + } +} + +function changePreviousReplyKey(e) { + //console.log(String.fromCharCode(e.keyCode)); + previousReplyInput.value = ""; + if (e.keyCode >= 65 && e.keyCode <= 90) { + previousReplyInput.value = String.fromCharCode(e.keyCode); + localStorage["previous.reply.key"] = e.keyCode; + } +} + +function changeExpandoKey(e) { + //console.log(String.fromCharCode(e.keyCode)); + expandoInput.value = ""; + if (e.keyCode >= 65 && e.keyCode <= 90) { + expandoInput.value = String.fromCharCode(e.keyCode); + localStorage["expando.key"] = e.keyCode; + } +} // loads the main function function loadKeyboardNav() { @@ -68,11 +140,11 @@ function loadKeyboardNav() { window.addEventListener("keydown", checkKeyPressed, false); function checkKeyPressed(e) { - if (e.keyCode == "74") { + if (e.keyCode == nextReplyKeycode) { scrollDown(); - } else if (e.keyCode == "75") { + } else if (e.keyCode == previousReplyKeycode) { scrollUp(); - } else if (e.keyCode == "69") { + } else if (e.keyCode == expandoKeycode && k > -1) { expandFile(); } } @@ -80,6 +152,5 @@ function loadKeyboardNav() { // loads main function if checkbox toggled and in a thread if (getSetting('keyboardnav') && document.getElementsByClassName("thread").length === 1) { - console.log("test"); loadKeyboardNav(); } From 29d7cd54964fb24b04bf8df45a9b767f4ea662c8 Mon Sep 17 00:00:00 2001 From: Joakim Almgren Date: Tue, 6 Jun 2017 16:27:20 +0200 Subject: [PATCH 3/5] minor cleanup --- js/keyboard-shortcuts.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/keyboard-shortcuts.js b/js/keyboard-shortcuts.js index b0f8c2eb..dd818d42 100644 --- a/js/keyboard-shortcuts.js +++ b/js/keyboard-shortcuts.js @@ -2,11 +2,18 @@ // 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) + + // adding checkbox for turning on/off if (window.Options && Options.get_tab('general')) { Options.extend_tab("general", "
Keyboard Navigation " + - ("") + + "" + "" + "" + "" + From 946f0eb893fa85f6df9b4155c92eef4dc03536f1 Mon Sep 17 00:00:00 2001 From: Joakim Almgren Date: Tue, 6 Jun 2017 16:28:07 +0200 Subject: [PATCH 4/5] commented out example function --- js/options/user-js.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/options/user-js.js b/js/options/user-js.js index 0ba9b1d0..7304ee50 100644 --- a/js/options/user-js.js +++ b/js/options/user-js.js @@ -54,7 +54,7 @@ var update_textarea = function() { textarea.text("/* "+_("Enter here your own Javascript code...")+" */\n" + "/* "+_("Have a backup of your storage somewhere, as messing here\nmay render you this website unusable.")+" */\n" + "/* "+_("You can include JS files from remote servers, for example:")+" */\n" + - 'load_js("http://example.com/script.js");'); + "/* "+'load_js("http://example.com/script.js");*/'); } else { textarea.text(localStorage.user_js); From 6677b6c08605d902ce5277bd0ca670d04fe18801 Mon Sep 17 00:00:00 2001 From: Joakim Almgren Date: Tue, 6 Jun 2017 23:42:25 +0200 Subject: [PATCH 5/5] 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
Next Reply
Previous Reply
" + + ("") + + "
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