flexi-js/example/flexi.js

A responsive and flexible css scheme.

'use strict';

/** polyfil */
if (window.Element && !Element.prototype.closest) {
    Element.prototype.closest = function (s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i,
            el = this;
        do {
            i = matches.length;
            while (--i >= 0 && matches.item(i) !== el) {}
        } while (i < 0 && (el = el.parentElement));
        return el;
    };
}

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var DropDown = function () {
  function DropDown() {
    classCallCheck(this, DropDown);

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

  createClass(DropDown, [{
    key: '_onClick',
    value: function _onClick(evt) {
      var elem = evt.target,
          container = elem.closest('.flexi'),
          node = elem.closest('.flexi > *'),
          activeContainer = this._activeContainer,
          activeNode = this._activeNode;

      if (container != activeContainer) {
        if (activeContainer) {
          activeContainer.classList.remove('active');
        }
        if (container) {
          container.classList.add('active');
        }
        this._activeContainer = container;
      }

      if (node != activeNode) {
        if (activeNode) {
          activeNode.classList.remove('active');
        }
        if (node) {
          node.classList.add('active');
        }
        this._activeNode = node;
      }
    }
  }]);
  return DropDown;
}();

try {
  var evt = new CustomEvent('foo');
  evt.preventDefault();
  if (evt.defaultPrevented !== true) {
    throw new Error('failure');
  }
} catch (err) {
  var _CustomEvent = function _CustomEvent(evt, opt) {
    var e = void 0,
        prev = void 0;
    opt = opt || {
      bubbles: false,
      cancelable: false,
      detail: undefined
    };
    e = document.createEvent('CustomEvent');
    e.initCustomEvent(evt, params.bubbles, params.cancelable, params.detail);
    prev = e.preventDefault;
    e.preventDefault = function () {
      prev.call(this);
      try {
        Object.defineProperty(this, 'defaultPrevented', {
          get: function get() {
            return true;
          }
        });
      } catch (err) {
        this.defaultPrevented = true;
      }
    };
    return e;
  };
}

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

var Modal = function () {
  function Modal(params) {
    classCallCheck(this, Modal);

    params = params || {};

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

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

  createClass(Modal, [{
    key: "attachEvents",
    value: function attachEvents() {
      if (window.addEventListener) {
        window.addEventListener('click', this.click.bind(this));
        window.addEventListener('touch', this.click.bind(this));
      }
    }
  }, {
    key: "hide",
    value: function hide(qry) {
      return this._hide(false, qry);
    }
  }, {
    key: "show",
    value: function show(qry) {
      return this._show(false, qry);
    }
  }, {
    key: "toggle",
    value: function toggle(qry) {
      return this._toggle(false, qry);
    }
  }, {
    key: "_hide",
    value: function _hide(evt, qry) {
      return this._adjust(evt, qry, 'none');
    }
  }, {
    key: "_show",
    value: function _show(evt, qry) {
      return this._adjust(evt, qry, 'block');
    }
  }, {
    key: "_toggle",
    value: function _toggle(evt, qry) {
      return this._adjust(evt, qry);
    }
  }, {
    key: "_overlay",
    value: function _overlay(instance, display) {
      var 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;
      }
    }
  }, {
    key: "_adjust",
    value: function _adjust(evt, qry, display) {

      var instance = this.findInstance(evt, qry),
          cur = void 0,
          next = void 0,
          bubEvtName = void 0,
          bubEvt = void 0;

      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;
      }
    }
  }, {
    key: "findInstance",
    value: function findInstance(evt, qry) {
      return qry ? document.querySelector(qry) : evt && evt.target ? evt.target.closest(this.modalQueryString) : false;
    }
  }, {
    key: "click",
    value: function click(evt) {
      var n = evt.target;
      for (var func in ModalAttr) {
        var prop = ModalAttr[func];
        var funcName = '_' + func;
        if (n.hasAttribute(prop) && this[funcName]) {
          return this[funcName](evt, n.getAttribute(prop));
        }
      }
      return false;
    }
  }]);
  return Modal;
}();

// loads up everything available
// and instance everything
var dropDown = new DropDown();
var modal = new Modal();