overlay-modal

const OVERLAYModal = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theWrap: '.overlay-modal',
    theTrigger: '.overlay-modal__trigger,.action[data-modal], .action--modal',
    theCloser: '.overlay-modal__trigger--close',
  };

  const classes = {
    isVisible: 'is-visible',
    overlayModalIsVisible: 'overlay-modal-is-visible',
  };

  const els = {};

  const init = () => {
    els.theWraps = d.querySelectorAll(selectors.theWrap);
    els.theTriggers = d.querySelectorAll(selectors.theTrigger);
    els.theClosers = d.querySelectorAll(selectors.theCloser);

    // [...els.theWraps].forEach((theWrap) => {
    //   const theClose = theWrap.querySelector(selectors.theClose);

    // });

    [...els.theClosers].forEach((theClose) => {
      theClose && theClose.addEventListener('click', (e) => {
        e.preventDefault();
        d.body.classList.remove(classes.overlayModalIsVisible);
        d.removeEventListener('keyup', keyTabbed);
      });
    });

    [...els.theTriggers].forEach((theTrigger) => {
      theTrigger && theTrigger.addEventListener('click', (e) => {
        e.preventDefault();

        const trigger = e.currentTarget;

        // if (trigger.getAttribute('href') && trigger.dataset.modal) {
        //  e.preventDefault();
        // }

        d.body.classList.add(classes.overlayModalIsVisible);
        d.addEventListener('keyup', keyTabbed);

        const modal = trigger.dataset['modal'];

        if (modal) {
          const wrongWrappers = document.querySelectorAll(`${selectors.theWrap}:not([data-modal="${trigger.dataset['modal']}"])`);
          [...wrongWrappers].forEach(wrapper => wrapper.classList.add('hidden'));

          const wrapper = document.querySelector(`${selectors.theWrap}[data-modal="${trigger.dataset['modal']}"]`);
          if (wrapper) {
            wrapper.classList.remove('hidden');
          }
        } else {
          const wrongWrappers = document.querySelectorAll(`${selectors.theWrap}[data-modal]`);
          [...wrongWrappers].forEach(wrapper => wrapper.classList.add('hidden'));

          const wrapper = document.querySelector(`${selectors.theWrap}:not([data-modal])`);
          if (wrapper) {
            wrapper.classList.remove('hidden');
          }
        }

        MAIN.resize(true);
        return false;
      });
    });
  };

  const keyTabbed = (event) => {
    if(!event || event.key !== 'Escape') { return; }

    [...els.theWraps].forEach((theWrap) => {
      theWrap.classList.contains(classes.isVisible) && theWrap.classList.remove(classes.isVisible);
      d.body.classList.contains(classes.overlayModalIsVisible) && d.body.classList.remove(classes.overlayModalIsVisible);
    });
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);