v1.2 navigates posts and files, highlights with generic color
This commit is contained in:
Joakim Almgren
parent
946f0eb893
commit
6677b6c086
@ -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 k = -1;
|
||||
function scrollDown() {
|
||||
if (k < files.length) {
|
||||
k++;
|
||||
scrollTo(files[k]);
|
||||
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 scrollUp() {
|
||||
if (k > 0) {
|
||||
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 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();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user