Introduce multiple thumbnail strips, and select one in a sensible way.

[tgal] / static / tgal.js

diff --git a/static/tgal.js b/static/tgal.js
index de05593..e77973b 100644 (file)
--- a/static/tgal.js
+++ b/static/tgal.js
@@ -42,14 +42,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);
   }
 })();