static/tgal.js (keyevent): Discard key events with spurious modifiers.

[tgal] / static / tgal.js

diff --git a/static/tgal.js b/static/tgal.js
index de055938b4c6b4d790944acf64d1074eee3eb919..6e96dc2555058768326ff4b8d8f054e1ee5e4cf8 100644 (file)
--- a/static/tgal.js
+++ b/static/tgal.js
@@ -27,12 +27,13 @@
 /* Handle keyboard interaction. */
 addEventListener("keydown", function (ev) {
   var dir;
-  if (ev.key === " " || ev.key === "ArrowRight") dir = "next";
-  else if (ev.key === " " || ev.key === "ArrowRight") dir = "next";
-  else if (ev.key === "Backspace" || ev.key === "ArrowLeft") dir = "prev";
-  else if (ev.key === "^") dir = "up";
+  if (ev.altKey || ev.ctrlKey || ev.metaKey) return;
   else if (ev.key === "<") dir = "first";
   else if (ev.key === ">") dir = "last";
+  else if (ev.key === "^") dir = "up";
+  else if (ev.shiftKey) return;
+  else if (ev.key === " " || ev.key === "ArrowRight") dir = "next";
+  else if (ev.key === "Backspace" || ev.key === "ArrowLeft") dir = "prev";
   else return;
   var elt = document.querySelector("link[rel=" + dir + "]");
   if (!elt) return;
@@ -42,14 +43,34 @@ addEventListener("keydown", function (ev) {
 
 /* Scroll the thumbnail strip so that the current image is in the middle. */
 (function () {
-  var strip = document.querySelector("div.thumbstrip");
-  var focus = document.querySelector("#focusthumb");
-  if (strip && focus) {
-    var stripbox = strip.getBoundingClientRect();
-    var focusbox = focus.getBoundingClientRect();
-    strip.scrollLeft +=
-      (focusbox.x - stripbox.x) -
-      (stripbox.width - focusbox.width)/2;
+  var obs = null;
+
+  var scroll = function(strip) {
+    var focus = strip.querySelector("figure.focusthumb");
+    if (focus) {
+      var stripbox = strip.getBoundingClientRect();
+      var focusbox = focus.getBoundingClientRect();
+      strip.scrollLeft +=
+       (focusbox.x - stripbox.x) -
+       (stripbox.width - focusbox.width)/2;
+    }
+  };
+
+  var strips = document.querySelectorAll("div.thumbstrip");
+  if (window.IntersectionObserver) {
+    obs = new IntersectionObserver(function (ee) {
+      ee.forEach(function (e) {
+       if (e.isIntersecting) {
+         obs.unobserve(e.target);
+         scroll(e.target);
+       }
+      });
+    }, {
+      root: document.querySelector("html")
+    });
+    strips.forEach(function (strip) { obs.observe(strip); });
+  } else {
+    strips.forEach(scroll);
   }
 })();