options script

let selected = {};

let ready = (callback) => {
  // in case the document is already rendered
  if (document.readyState != 'loading') callback();
  // modern browsers
  else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
  // IE <= 8
  else document.attachEvent('onreadystatechange', function () {
      if (document.readyState == 'complete') callback();
  });
}

let go = ()=>{

    // loop through all gallery elements and bind events
    var galleryElements = document.querySelectorAll('.ov-select' );

    let onSelectClick = (evt)=>{
      // let which = evt.srcElement.dataSet
      // given a selection box that has been clicked, what is the new selection information?
      let place = evt.srcElement.value;
      let index = evt.srcElement.options.selectedIndex;
      let uid = evt.srcElement.dataset.pswpUid;

      // and what is the value that was previously set
      let currentValue = evt.srcElement.dataset.oldindex;

      // a change from the previous has been detected... therefore we need to lift the restriction on what was previously set
      if (currentValue && currentValue !== index){
        for(var i = 0, l = galleryElements.length; i < l; i++){
          let selectElement = galleryElements[i]
          let opt = selectElement.options[currentValue];
            opt.disabled = false;
        }
      }

      // if the selection isn't back to the 'unplaced setting'
      if (place !=='-'){
        // for all the elements disable this value
        for(var i = 0, l = galleryElements.length; i < l; i++) {
          let selectElement = galleryElements[i]

          // only disable for the other select controls
          // but store the selected value as a data attibute to help spot updates
          if (selectElement.dataset.pswpUid !== uid){
            let opt = selectElement.options[index];
            opt.disabled = true;
          } else {
            selectElement.setAttribute('data-oldindex',index)
          }
        }
      }


      // need to set the summary information
      document.getElementById(`ov-1`).innerHTML='';
      document.getElementById(`ov-2`).innerHTML='';
      document.getElementById(`ov-3`).innerHTML='';
      document.getElementById(`ov-4`).innerHTML='';
      document.getElementById(`ov-5`).innerHTML='';

      // set the strings correctly
      for(var i = 0, l = galleryElements.length; i < l; i++) {

        let selectElement = galleryElements[i]
        if (selectElement.value!=='-'){
          console.log(selectElement.value);
          console.log(selectElement.dataset.title);
          let e = document.getElementById(`ov-${selectElement.options.selectedIndex}`)
          e.innerHTML=selectElement.dataset.title;
        }
      }

    }



    for(var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i+1);
        galleryElements[i].setAttribute('data-oldindex', 0);
        galleryElements[i].setAttribute('data-title', `Hello world from ${i}`);
        galleryElements[i].onchange = onSelectClick;
    }


  }


  ready(go);