(function() { 'use strict'; let mainfig; let mainimg; let mainlink; let opened = new Set; function openCW(id, caption, focusLink) { 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, href, cw) { let caption = document.getElementById('cw'); let cwText = `cw: ${cw}`; if (!opened.has(id) && cw && caption) { caption.innerHTML = cwText; } else if (caption) { openCW(id, caption); } else if (!opened.has(id) && cw) { let template = document.createElement('template'); template.innerHTML = `
${cwText}
`; let content = template.content; addCWListeners(id, content.getElementById('cw')); mainfig.insertBefore(content, mainlink); mainlink.tabIndex = -1; } mainimg.src = src; mainlink.href = href; } function activateButton(button) { setImage(button.id, button.value, button.dataset.link, button.dataset.warning); } function setup() { mainfig = document.getElementById('mainfig'); mainimg = document.getElementById('mainimg'); mainlink = document.getElementById('mainlink'); for (let button of document.querySelectorAll('#alts input')) { button.onchange = e => { if (button.checked) activateButton(button); }; } addCWListeners(document.getElementById('cw')); } window.addEventListener('DOMContentLoaded', setup); })();