3 * Interactive features for Trivial Gallery.
5 * (c) 2021 Mark Wooding
8 /*----- Licensing notice --------------------------------------------------*
10 * This file is part of Trivial Gallery.
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.
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.
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/>.
27 /* Handle keyboard interaction. */
28 addEventListener("keydown", function (ev
) {
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";
37 var elt
= document
.querySelector("link[rel=" + dir
+ "]");
39 location
= elt
.getAttribute("href");
43 /* Scroll the thumbnail strip so that the current image is in the middle. */
47 var scroll
= function(strip
) {
48 var focus
= strip
.querySelector("figure.focusthumb");
50 var stripbox
= strip
.getBoundingClientRect();
51 var focusbox
= focus
.getBoundingClientRect();
53 (focusbox
.x
- stripbox
.x
) -
54 (stripbox
.width
- focusbox
.width
)/2;
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
);
68 root
: document
.querySelector("html")
70 strips
.forEach(function (strip
) { obs
.observe(strip
); });
72 strips
.forEach(scroll
);
76 /*----- That's all, folks -------------------------------------------------*/