gallery/script/single.js

(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 cwText  = `<span id=cw-text>cw: <b>${cw}</b></span>`;

  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 = `
      <figcaption id=cw aria-role=button tabindex=0>
        ${cwText}
      </figcaption>`;
    let content = template.content;
    addCWListeners(id, content.getElementById('cw'));
    mainfig.insertBefore(content, 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);

})();