discard other keypresses

README.md

@@ -1,26 +1,28 @@
-# Mirva
-
-A tool to create a web gallery from a single folder of images.
-Also .mp4 files are included in the gallery
-
-## Installation
-
-Usage requires ImageMagick binaries! Make sure you have `convert` in PATH.
-
-Use pip or similar to install from source. 
-
-ex.
-
-`pip3 install --user --upgrade https://bitbucket.org/MoonQ/mirva/get/master.zip`
-
-or `pipx install https://bitbucket.org/MoonQ/mirva/get/master.zip`
-
-## Usage
-
-Use the command line tool `mirva` to render web sites. 
-
-
-## Acknowledgements
-
-Thank you Mirva for being a lustrous source of inspiration - May you stay
-full of joy and love!
+# Mirva
+
+A tool to create a web gallery from a single folder of images.
+Also .mp4 files are included in the gallery
+
+## Installation
+
+Usage requires ImageMagick binaries! Make sure you have `convert` in PATH.
+
+Use pip or similar to install from source. 
+
+ex.
+
+`pip3 install --user --upgrade https://bitbucket.org/MoonQ/mirva/get/master.zip`
+
+or `pipx install https://bitbucket.org/MoonQ/mirva/get/master.zip`
+
+## Usage
+
+Use the command line tool `mirva` to render web sites. 
+
+note: Arrow keys left/right on web page move between images.
+
+
+## Acknowledgements
+
+Thank you Mirva for being a lustrous source of inspiration - May you stay
+full of joy and love!

mirva/resources/mirva.js

@@ -1,8 +1,9 @@
-let current=0;
+let current=-1;
 function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
 r(function(){
     create_nav();
     document.onkeydown = keyboard_entry;
+    document.onwheel = scroll_event;
 
 });
 function create_nav() {
@@ -35,25 +36,45 @@ function create_button(direction, to, next) {
   container.appendChild(button);
   return container
 }
+function is_visible(el) {
+    let rect = el.getBoundingClientRect();
+    return rect.top < window.innerHeight && rect.bottom >= 0;
+}
+function scroll_event(ev) {
+  let navis = document.getElementsByClassName("navigation");
+  for (let i = 0; i<navis.length; i++) {
+    if (is_visible(navis[i])) {
+        current = i -1;
+        return
+    }
+  }
+}
 function keyboard_entry(ev) {
-  var kC = ev.keyCode;
-  var k = String.fromCharCode(ev.keyCode);
-  var ctrlDown = ev.ctrlKey || ev.metaKey;
+  let kC = ev.keyCode;
+  let ctrlDown = ev.ctrlKey || ev.metaKey;
   if (ctrlDown) {
     return;
   }
+  if ([32,33,34,35,36,37,38,39,40].indexOf(kC) == -1) {
+      return
+  }
   let navis = document.getElementsByClassName("navigation");
-  if (kC == '39') { // right
+  if (kC == '36') { // home
+      current = -1;
+      return
+  }
+  else if (kC == '35') { // end
+      current = navis.length;
+      return
+  }
+  else if (kC == '39') { // right
       current += 1;
   }
-  if (kC == '37') { // left
+  else if (kC == '37') { // left
       current -= 1;
-  }
-  if (kC == '36') { // home
-      current = 0;
-  }
-  if (kC == '35') { // end
-      current = navis.length-1;
+  } else {
+      setTimeout(scroll_event, 100);
+      return
   }
   current = Math.max(0, current);
   current = Math.min(navis.length-1, current);