flexi-js/src/Modal.js

A responsive and flexible css scheme.

import "./poly/element.closest";
import "./poly/CustomEvent";

var ModalAttr = {
  show: 'data-modal-show',
  hide: 'data-modal-hide',
  toggle: 'data-modal-toggle',
};

export default class Modal {

  constructor(params) {
    params = params || {};

    // load some default properties
    this.modalQueryString = params.modalQueryString || '.modal';

    // attach our listeners
    this.attachEvents();
  }

  attachEvents() {
    if (window.addEventListener) {
      window.addEventListener('click', this.click.bind(this));
      window.addEventListener('touch', this.click.bind(this));
    }
  }

  hide(qry) {
    return this._hide(false, qry);
  }
  show(qry) {
    return this._show(false, qry);
  }
  toggle(qry) {
    return this._toggle(false, qry);
  }

  _hide(evt, qry) {
    return this._adjust(evt, qry, 'none');
  }

  _show(evt, qry) {
    return this._adjust(evt, qry, 'block');
  }

  _toggle(evt, qry) {
    return this._adjust(evt, qry);
  }

  _overlay(instance, display) {
    let overlay = instance.overlay;
    if (!overlay && display == 'block') {
      overlay = instance.overlay = document.createElement('div');
      overlay.setAttribute('class', 'modal-overlay');
      overlay.setAttribute('style', 'display:' + display);
      overlay.addEventListener('click', this._hide.bind(this));
      instance.insertBefore(overlay, instance.firstChild);
    } else {
      overlay.style.display = display;
    }
  }

  _adjust(evt, qry, display) {

    let instance = this.findInstance(evt, qry),
        cur,
        next,
        bubEvtName,
        bubEvt;

    if (instance) {

      if (evt && evt.preventDefault) {
        evt.preventDefault();
      }
      cur = instance.style.display;
      next = display || (cur == 'block' ? 'none' : 'block');
      this._overlay(instance, next);

      // prep our bubbling event
      bubEvtName = next == 'block' ? 'modal-show' : 'modal-hide';
      bubEvt = new CustomEvent(bubEvtName, {
        bubbles: true
      });
      instance.dispatchEvent(bubEvt);
      instance.style.display = next;
    }
  }

  findInstance(evt, qry) {
    return qry ? document.querySelector(qry) : evt && evt.target ? evt.target.closest(this.modalQueryString) : false;
  }

  click(evt) {
    let n = evt.target;
    for (let func in ModalAttr) {
      let prop = ModalAttr[func];
      let funcName = '_' + func;
      if (n.hasAttribute(prop) && this[funcName]) {
        return this[funcName](evt, n.getAttribute(prop));
      }
    }
    return false;
  }

}