gallery/script/single.ts

114 lines
3.2 KiB
TypeScript
Raw Normal View History

2023-09-06 19:17:21 -04:00
let mainfig: HTMLElement;
let mainimg: HTMLImageElement;
let mainlink: HTMLAnchorElement;
let altButtons: HTMLInputElement[];
let skipAll: HTMLInputElement;
2024-07-07 14:44:05 -04:00
const opened: Set<string> = new Set;
2023-09-06 19:17:21 -04:00
2024-07-07 15:42:17 -04:00
function openCW(id: string | null, caption: HTMLElement, focusLink = false): void {
2023-09-06 19:17:21 -04:00
if (id !== null) opened.add(id);
2024-07-07 15:42:17 -04:00
if (caption.parentElement) {
mainfig.removeChild(caption);
}
2023-09-06 19:17:21 -04:00
mainlink.tabIndex = 0;
if (focusLink) mainlink.focus();
}
2024-07-07 15:42:17 -04:00
function addCWListeners(id: string | null, caption: HTMLElement): void {
caption.addEventListener('click', _e => openCW(id, caption));
caption.addEventListener('keyup',
e => { if (e.key == 'Enter') openCW(id, caption, true) });
2023-09-06 19:17:21 -04:00
}
2024-07-07 15:42:17 -04:00
function setImage(id: string, src: string, href: string, cw: string): void {
const curCw = document.getElementById('cw');
const coverNew = cw != '' && !opened.has(id) && !skipAll.checked;
if (curCw && !coverNew) {
// keep old cover until load
function removeCover() { setTimeout(() => openCW(null, curCw!), 100); }
mainimg.addEventListener('load', removeCover, {once: true});
} else if (coverNew) {
// place new cover
const newCw =
(document.getElementById('cw-template') as HTMLTemplateElement)
.content.firstElementChild!.cloneNode(true) as HTMLElement;
newCw.querySelector('#cw-text')!.innerHTML = cw;
if (curCw) openCW(null, curCw);
mainfig.insertBefore(newCw, mainlink);
2023-09-06 19:17:21 -04:00
mainlink.tabIndex = -1;
2024-07-07 15:42:17 -04:00
addCWListeners(id, newCw);
2023-09-06 19:17:21 -04:00
}
// else no cover before or after
2023-09-06 19:17:21 -04:00
mainimg.src = src;
2023-09-06 19:17:21 -04:00
mainlink.href = href;
}
2024-07-07 14:19:24 -04:00
function activateButton(button: HTMLInputElement, doPush = true): void {
2023-09-06 19:17:21 -04:00
setImage(button.id, button.value,
button.dataset.link!,
2024-07-11 09:04:55 -04:00
button.dataset.warning ?? '');
2023-09-06 19:17:21 -04:00
if (doPush) history.pushState(null, '', '#' + button.id);
}
2024-07-07 14:19:24 -04:00
function useFragment(firstLoad = false): void {
2023-09-06 19:17:21 -04:00
let button = altButtons[0];
2024-07-07 14:44:05 -04:00
const frag = decodeURIComponent(location.hash).replace(/^#/, '');
2023-09-06 19:17:21 -04:00
if (frag) {
2024-07-07 14:44:05 -04:00
const selected = document.getElementById(frag) as HTMLInputElement;
2023-09-06 19:17:21 -04:00
if (selected) button = selected;
}
let id: string | null = null;
if (button) {
id = button.id;
button.checked = true;
activateButton(button, false);
}
2024-07-07 15:42:17 -04:00
if (firstLoad) {
const cw = document.getElementById('cw');
if (cw) addCWListeners(id, cw);
}
2023-09-06 19:17:21 -04:00
}
function setup() {
mainfig = document.getElementById('mainfig')!;
mainimg = document.getElementById('mainimg') as HTMLImageElement;
mainlink = document.getElementById('mainlink') as HTMLAnchorElement;
skipAll = document.getElementById('skipAll') as HTMLInputElement;
2024-07-07 14:44:05 -04:00
const alts = document.getElementById('alts');
2023-09-06 19:17:21 -04:00
if (alts) {
2024-07-07 14:44:05 -04:00
const inputs = Array.from(alts.getElementsByTagName('input'));
2023-09-06 19:17:21 -04:00
altButtons = inputs.filter(e => e.name == 'variant');
} else {
altButtons = [];
}
2024-07-07 14:44:05 -04:00
for (const button of altButtons) {
2023-09-06 19:17:21 -04:00
button.onchange = _e => { if (button.checked) activateButton(button); };
}
if (skipAll) {
skipAll.onchange = _e => { if (skipAll.checked) {
2024-07-07 14:44:05 -04:00
const caption = document.getElementById('cw');
2023-09-06 19:17:21 -04:00
if (caption) { openCW(null, caption, false); }
} };
}
window.addEventListener('popstate', _e => useFragment());
useFragment(true);
}
window.addEventListener('DOMContentLoaded', setup);
export {};