gallery/script/single.js

98 lines
2.4 KiB
JavaScript

(function() {
'use strict';
let mainfig;
let mainimg;
let mainlink;
let altButtons;
let opened = new Set;
function openCW(id, caption, focusLink) {
if (id) opened.add(id);
mainfig.removeChild(caption);
mainlink.tabIndex = 0;
if (focusLink) mainlink.focus();
}
function addCWListeners(id, caption) {
if (caption) {
caption.addEventListener('click', e => openCW(id, caption));
caption.addEventListener('keyup',
e => { if (e.key == 'Enter') openCW(id, caption, true) });
}
}
function setImage(id, src, width, height, href, cw, firstLoad) {
let caption = document.getElementById('cw');
let newCaption;
if (!opened.has(id) && cw) {
newCaption = document.getElementById('cw-template')
.content.firstElementChild.cloneNode(true);
newCaption.querySelector('#cw-text').innerHTML = cw;
addCWListeners(id, newCaption.querySelector('#cw'));
}
if (caption) {
openCW(null, caption);
}
if (newCaption) {
mainfig.insertBefore(newCaption, mainlink);
mainlink.tabIndex = -1;
}
mainimg.src = src;
mainfig.dataset.width = width;
mainfig.dataset.height = height;
mainlink.href = href;
}
function activateButton(button, doPush = true, firstLoad = false) {
setImage(button.id, button.value,
button.dataset.width, button.dataset.height,
button.dataset.link, button.dataset.warning,
firstLoad);
if (doPush) history.pushState(null, '', '#' + button.id);
}
function useFragment(firstLoad = false) {
let button = altButtons[0];
let frag = location.hash.replace(/^#/, '');
if (frag) {
let selected = document.getElementById(frag);
if (selected) button = selected;
}
let id;
if (button) {
id = button.id;
button.checked = true;
activateButton(button, false, firstLoad);
}
if (firstLoad) addCWListeners(id, document.getElementById('cw'));
}
function setup() {
mainfig = document.getElementById('mainfig');
mainimg = document.getElementById('mainimg');
mainlink = document.getElementById('mainlink');
let alts = document.getElementById('alts');
altButtons = alts ? Array.from(alts.getElementsByTagName('input')) : [];
for (let button of altButtons) {
button.onchange = e => { if (button.checked) activateButton(button); };
}
window.addEventListener('popstate', useFragment);
useFragment(true);
}
window.addEventListener('DOMContentLoaded', setup);
})();