Javascript: Quickly go through comics using the "n" key

2 files changed, 18 insertions, 6 deletions

diff --git a/htdocs/page.js b/htdocs/page.js
index 2d566f5..9e5287a 100644
--- a/htdocs/page.js
+++ b/htdocs/page.js
@@ -110,4 +110,15 @@
       }
     }
   }
+  document.addEventListener("keydown", function(e) {
+    if(e.char == "n" || e.keyCode == 78) {
+      var comics = document.getElementsByClassName("strip");
+      for(var i=0; i<comics.length; i++) {
+        if(comics[i].offsetTop > window.scrollY) {
+          window.scrollTo(0, comics[i].offsetTop);
+          return;
+        }
+      }
+    }
+  }, true);
 })();
diff --git a/htdocs/page.min.js b/htdocs/page.min.js
index 726a647..ccfd75f 100644
--- a/htdocs/page.min.js
+++ b/htdocs/page.min.js
@@ -1,6 +1,7 @@
-(function(){function h(){d="undefined"!=typeof localStorage.blocked&&0<localStorage.blocked.length?localStorage.blocked.split(","):[];var a=document.getElementById("blockDiv");"undefined"!=typeof a&&null!=a&&a.parentNode.removeChild(a);if(0<d.length){a=document.createElement("div");a.id="blockDiv";a.innerHTML="Ausgeblendete Inhalte: ";a.style.fontSize="10px";a.style.marginTop="50px";for(var b=0;b<d.length;b++)(function(b){var c=document.createElement("a");c.innerHTML=d[b];c.href="#";0<b&&a.appendChild(document.createTextNode(", "));
-c.onclick=function(a){d=d.slice(0,b).concat(d.slice(b+1));localStorage.blocked=d.join(",");document.location.reload();a.preventDefault();return!1};a.appendChild(c)})(b);document.getElementById("content").appendChild(a)}}for(var d="undefined"!=typeof localStorage.blocked&&0<localStorage.blocked.length?localStorage.blocked.split(","):[],a=0;a<d.length;a++){var b=document.querySelector("div[data-strip-name='"+d[a]+"']");null!=b&&b.parentNode.removeChild(b)}window.addEventListener("load",h,!1);var c=
-document.getElementsByClassName("strip"),f=document.createElement("div");f.style.background="#888";f.style.fontSize="5px";f.innerHTML="&nbsp;";for(a=0;a<c.length;a++){c[c[a].dataset.stripName]=c[a];c[a].setAttribute("draggable","true");c[a].ondragstart=function(a){a.dataTransfer.setData("Text",this.dataset.stripName)};c[a].ondragover=function(a){this.parentNode.insertBefore(f,this.nextSibling);a.preventDefault();return!1};c[a].ondragleave=function(a){try{f.parentNode.removeChild(f)}catch(b){}return!1};
-c[a].ondrop=function(a){try{f.parentNode.removeChild(f)}catch(b){}var d=a.dataTransfer.getData("Text");if(d==this.dataset.stripName)a.preventDefault();else if("undefined"!=typeof c[d]){this.parentNode.insertBefore(c[d],this.nextSibling);for(var d=document.getElementsByClassName("strip"),e="",g=0;g<d.length;g++)e+=(0<e.length?",":"")+d[g].dataset.stripName;localStorage.stripsOrder=e;a.preventDefault()}};b=document.createElement("sup");b.innerHTML="[x]";b.style.fontWeight="normal";b.style.color="#900";
-b.style.fontSize="10px";b.style.position="absolute";b.style.display="none";b.style.cursor="pointer";var e=c[a].getElementsByTagName("h2")[0];e.appendChild(b);e.deleter=b;e.onmouseover=function(){this.deleter.style.display="inline"};e.onmouseout=function(){this.deleter.style.display="none"};b.onclick=function(){d.push(this.parentNode.parentNode.dataset.stripName);localStorage.blocked=d.join(",");h();this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)}}a=document.getElementsByTagName("h1")[1];
-a.ondrop=c[0].ondrop;a.ondragover=c[0].ondragover;if("undefined"!=typeof localStorage.stripsOrder)for(b=localStorage.stripsOrder.split(/,/),a=b.length-1;0<=a;a--)document.getElementsByClassName("strip")[0].dataset.stripName!=b[a]&&"undefined"!=typeof c[b[a]]&&document.getElementsByClassName("strip")[0].parentNode.insertBefore(c[b[a]],document.getElementsByClassName("strip")[0])})();
+(function(){function k(){c="undefined"!=typeof localStorage.blocked&&0<localStorage.blocked.length?localStorage.blocked.split(","):[];var e=document.getElementById("blockDiv");"undefined"!=typeof e&&null!=e&&e.parentNode.removeChild(e);if(0<c.length){e=document.createElement("div");e.id="blockDiv";e.innerHTML="Ausgeblendete Inhalte: ";e.style.fontSize="10px";e.style.marginTop="50px";for(var a=0;a<c.length;a++)(function(a){var b=document.createElement("a");b.innerHTML=c[a];b.href="#";0<a&&e.appendChild(document.createTextNode(", "));
+b.onclick=function(e){c=c.slice(0,a).concat(c.slice(a+1));localStorage.blocked=c.join(",");document.location.reload();e.preventDefault();return!1};e.appendChild(b)})(a);document.getElementById("content").appendChild(e)}}for(var c="undefined"!=typeof localStorage.blocked&&0<localStorage.blocked.length?localStorage.blocked.split(","):[],a=0;a<c.length;a++){var b=document.querySelector("div[data-strip-name='"+c[a]+"']");null!=b&&b.parentNode.removeChild(b)}window.addEventListener("load",k,!1);var d=
+document.getElementsByClassName("strip"),g=document.createElement("div");g.style.background="#888";g.style.fontSize="5px";g.innerHTML="&nbsp;";for(a=0;a<d.length;a++){d[d[a].dataset.stripName]=d[a];d[a].setAttribute("draggable","true");d[a].ondragstart=function(a){a.dataTransfer.setData("Text",this.dataset.stripName)};d[a].ondragover=function(a){this.parentNode.insertBefore(g,this.nextSibling);a.preventDefault();return!1};d[a].ondragleave=function(a){try{g.parentNode.removeChild(g)}catch(b){}return!1};
+d[a].ondrop=function(a){try{g.parentNode.removeChild(g)}catch(b){}var c=a.dataTransfer.getData("Text");if(c==this.dataset.stripName)a.preventDefault();else if("undefined"!=typeof d[c]){this.parentNode.insertBefore(d[c],this.nextSibling);for(var c=document.getElementsByClassName("strip"),f="",h=0;h<c.length;h++)f+=(0<f.length?",":"")+c[h].dataset.stripName;localStorage.stripsOrder=f;a.preventDefault()}};b=document.createElement("sup");b.innerHTML="[x]";b.style.fontWeight="normal";b.style.color="#900";
+b.style.fontSize="10px";b.style.position="absolute";b.style.display="none";b.style.cursor="pointer";var f=d[a].getElementsByTagName("h2")[0];f.appendChild(b);f.deleter=b;f.onmouseover=function(){this.deleter.style.display="inline"};f.onmouseout=function(){this.deleter.style.display="none"};b.onclick=function(){c.push(this.parentNode.parentNode.dataset.stripName);localStorage.blocked=c.join(",");k();this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)}}a=document.getElementsByTagName("h1")[1];
+a.ondrop=d[0].ondrop;a.ondragover=d[0].ondragover;if("undefined"!=typeof localStorage.stripsOrder)for(b=localStorage.stripsOrder.split(/,/),a=b.length-1;0<=a;a--)document.getElementsByClassName("strip")[0].dataset.stripName!=b[a]&&"undefined"!=typeof d[b[a]]&&document.getElementsByClassName("strip")[0].parentNode.insertBefore(d[b[a]],document.getElementsByClassName("strip")[0]);document.addEventListener("keydown",function(a){if("n"==a["char"]||78==a.keyCode){a=document.getElementsByClassName("strip");
+for(var b=0;b<a.length;b++)if(a[b].offsetTop>window.scrollY){window.scrollTo(0,a[b].offsetTop);break}}},!0)})();