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 newCaption;

  if (!opened.has(id) && cw) {
    newCaption = document.getElementById('cw-template')
                    .content.firstElementChild.cloneNode(true);
    newCaption.querySelector('#cw-text').innerHTML = cw;
    addCWListeners(id, newCaption);
  }

  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);

})();