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

[tgal] / static / tgal.js

/* -*-javascript-*-
 *
 * Interactive features for Trivial Gallery.
 *
 * (c) 2021 Mark Wooding
 */

/*----- Licensing notice --------------------------------------------------*
 *
 * This file is part of Trivial Gallery.
 *
 * Trivial Gallery is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or (at your option) any later version.
 *
 * Trivial Gallery is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with Trivial Gallery.  If not, see
 * <https://www.gnu.org/licenses/>.
 */

/* Handle keyboard interaction. */
addEventListener("keydown", function (ev) {
  var dir;
  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;
  location = elt.getAttribute("href");
  ev.stopPropagation();
}, true);

/* Scroll the thumbnail strip so that the current image is in the middle. */
(function () {
  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);
  }
})();

/*----- That's all, folks -------------------------------------------------*/