Commit | Line | Data |
---|---|---|
6ac5dde2 MW |
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.key === " " || ev.key === "ArrowRight") dir = "next"; | |
31 | else if (ev.key === " " || ev.key === "ArrowRight") dir = "next"; | |
32 | else if (ev.key === "Backspace" || ev.key === "ArrowLeft") dir = "prev"; | |
33 | else if (ev.key === "^") dir = "up"; | |
34 | else if (ev.key === "<") dir = "first"; | |
35 | else if (ev.key === ">") dir = "last"; | |
36 | else return; | |
37 | var elt = document.querySelector("link[rel=" + dir + "]"); | |
38 | if (!elt) return; | |
39 | location = elt.getAttribute("href"); | |
40 | ev.stopPropagation(); | |
41 | }, true); | |
42 | ||
43 | /* Scroll the thumbnail strip so that the current image is in the middle. */ | |
44 | (function () { | |
1408b7a2 MW |
45 | var obs = null; |
46 | ||
47 | var scroll = function(strip) { | |
48 | var focus = strip.querySelector("figure.focusthumb"); | |
49 | if (focus) { | |
50 | var stripbox = strip.getBoundingClientRect(); | |
51 | var focusbox = focus.getBoundingClientRect(); | |
52 | strip.scrollLeft += | |
53 | (focusbox.x - stripbox.x) - | |
54 | (stripbox.width - focusbox.width)/2; | |
55 | } | |
56 | }; | |
57 | ||
58 | var strips = document.querySelectorAll("div.thumbstrip"); | |
59 | if (window.IntersectionObserver) { | |
60 | obs = new IntersectionObserver(function (ee) { | |
61 | ee.forEach(function (e) { | |
62 | if (e.isIntersecting) { | |
63 | obs.unobserve(e.target); | |
64 | scroll(e.target); | |
65 | } | |
66 | }); | |
67 | }, { | |
68 | root: document.querySelector("html") | |
69 | }); | |
70 | strips.forEach(function (strip) { obs.observe(strip); }); | |
71 | } else { | |
72 | strips.forEach(scroll); | |
6ac5dde2 MW |
73 | } |
74 | })(); | |
75 | ||
76 | /*----- That's all, folks -------------------------------------------------*/ |