you WOULD type a script

script/single.ts

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