gallery/script/single.ts

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 {};