| 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 -------------------------------------------------*/ |