chiark - git - mdw - tgal/blob - static/tgal.js

   1 /* -*-javascript-*-
   2  *
   3  * Interactive features for Trivial Gallery.
   4  *
   5  * (c) 2021 Mark Wooding
   6  */
   7
   8 /*----- Licensing notice --------------------------------------------------*
   9  *
  10  * This file is part of Trivial Gallery.
  11  *
  12  * Trivial Gallery is free software: you can redistribute it and/or modify
  13  * it under the terms of the GNU Affero General Public License as
  14  * published by the Free Software Foundation; either version 3 of the
  15  * License, or (at your option) any later version.
  16  *
  17  * Trivial Gallery is distributed in the hope that it will be useful, but
  18  * WITHOUT ANY WARRANTY; without even the implied warranty of
  19  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  20  * Affero General Public License for more details.
  21  *
  22  * You should have received a copy of the GNU Affero General Public
  23  * License along with Trivial Gallery.  If not, see
  24  * <https://www.gnu.org/licenses/>.
  25  */
  26
  27 /* Handle keyboard interaction. */
  28 addEventListener("keydown", function (ev) {
  29   var dir;
  30   if (ev.altKey || ev.ctrlKey || ev.metaKey) return;
  31   else if (ev.key === "<") dir = "first";
  32   else if (ev.key === ">") dir = "last";
  33   else if (ev.key === "^") dir = "up";
  34   else if (ev.shiftKey) return;
  35   else if (ev.key === " " || ev.key === "ArrowRight") dir = "next";
  36   else if (ev.key === "Backspace" || ev.key === "ArrowLeft") dir = "prev";
  37   else return;
  38   var elt = document.querySelector("link[rel=" + dir + "]");
  39   if (!elt) return;
  40   location = elt.getAttribute("href");
  41   ev.stopPropagation();
  42 }, true);
  43
  44 /* Scroll the thumbnail strip so that the current image is in the middle. */
  45 (function () {
  46   var obs = null;
  47
  48   var scroll = function(strip) {
  49     var focus = strip.querySelector("figure.focusthumb");
  50     if (focus) {
  51       var stripbox = strip.getBoundingClientRect();
  52       var focusbox = focus.getBoundingClientRect();
  53       strip.scrollLeft +=
  54         (focusbox.x - stripbox.x) -
  55         (stripbox.width - focusbox.width)/2;
  56     }
  57   };
  58
  59   var strips = document.querySelectorAll("div.thumbstrip");
  60   if (window.IntersectionObserver) {
  61     obs = new IntersectionObserver(function (ee) {
  62       ee.forEach(function (e) {
  63         if (e.isIntersecting) {
  64           obs.unobserve(e.target);
  65           scroll(e.target);
  66         }
  67       });
  68     }, {
  69       root: document.querySelector("html")
  70     });
  71     strips.forEach(function (strip) { obs.observe(strip); });
  72   } else {
  73     strips.forEach(scroll);
  74   }
  75 })();
  76
  77 /*----- That's all, folks -------------------------------------------------*/