diff --git a/js/keyboard-shortcuts.js b/js/keyboard-shortcuts.js new file mode 100644 index 00000000..64b7ee15 --- /dev/null +++ b/js/keyboard-shortcuts.js @@ -0,0 +1,202 @@ +// author: joakimoa +// keyboard navigation option +// 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 (a-z)
Next Reply
Previous Reply
Expand File
"); +} + +$('.keyboardnav').on('change', function(){ + var setting = $(this).attr('id'); + localStorage[setting] = $(this).children('input').is(':checked'); +}); + +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; // 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; +} +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) { + nextReplyInput.value = ""; + if (e.keyCode >= 65 && e.keyCode <= 90) { + nextReplyInput.value = String.fromCharCode(e.keyCode); + localStorage["next.reply.key"] = e.keyCode; + } +} + +function changePreviousReplyKey(e) { + previousReplyInput.value = ""; + if (e.keyCode >= 65 && e.keyCode <= 90) { + previousReplyInput.value = String.fromCharCode(e.keyCode); + localStorage["previous.reply.key"] = e.keyCode; + } +} + +function changeExpandoKey(e) { + 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() { + var replies = document.getElementsByClassName("post reply"); + var current_file = null; + var highlight_color = "#555"; + var default_color = "black"; + 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]); + } + } + } + + 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 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]); + } + } + } + + function scrollTo(e) { + if (current_file !== null) { + current_file.style.backgroundColor = default_color; + } + current_file = e; + e.scrollIntoView(); + e.style.backgroundColor = highlight_color; + } + + function expandFile() { + var imgg = replies[reply_indexx].getElementsByClassName("post-image"); + if (imgg.length > 0 && image_indexx > -1) { + imgg[image_indexx].click(); + } + } + + // input + window.addEventListener("keydown", checkKeyPressed, false); + + function checkKeyPressed(e) { + if (e.keyCode == nextReplyKeycode) { + focusNextImage(); + } else if (e.keyCode == previousReplyKeycode) { + focusPreviousImage(); + } else if (e.keyCode == expandoKeycode) { + expandFile(); + } + } +} + +// 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(); +} + +}); 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);