gallery/script/single.js

'use strict';

function defined(x) {
  return x !== null && typeof x !== 'undefined';
}

function getById(id) { return document.getElementById(id); }

function setImage(src, href, cw) {
  let mainfig = getById('mainfig');
  let mainimg = getById('mainimg');
  let mainlink = getById('mainlink');
  let caption = getById('cw');

  if (defined(caption) && defined(cw)) {
    caption.innerHTML = `<span id=cw-text>cw: <b>${cw}</b></span>`;
  } else if (defined(caption)) {
    mainfig.removeChild(caption);
  } else if (defined(cw)) {
    let newCaption = document.createElement('figcaption');
    newCaption.id = 'cw';
    newCaption.innerHTML = `<span id=cw-text>cw: <b>${cw}</b></span>`;
    newCaption.onclick = openCW;
    mainfig.insertBefore(newCaption, mainlink);
  }

  mainimg.src = src;
  mainlink.href= href;
}

function activateButton(button) {
  setImage(button.value, button.dataset.link, button.dataset.warning);
}

function openCW() {
  let mainfig = getById('mainfig');
  let caption = getById('cw');
  if (defined(caption)) {
    mainfig.removeChild(caption);
  }
}

function setup() {
  for (let button of document.querySelectorAll('#altlist input')) {
    button.onchange = function(e) {
      if (button.checked) activateButton(button);
    };
  }

  let caption = getById('cw');
  if (defined(caption)) {
    caption.onclick = openCW;
  }
}

window.onload = setup;