flexi-js
Version:
A responsive and flexible css scheme.
2 lines (1 loc) • 3.44 kB
JavaScript
"use strict";window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(t){var e,n=(this.document||this.ownerDocument).querySelectorAll(t),i=this;do for(e=n.length;--e>=0&&n.item(e)!==i;);while(e<0&&(i=i.parentElement));return i});var classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),DropDown=function(){function t(){classCallCheck(this,t),window.addEventListener&&(window.addEventListener("click",this._onClick.bind(this)),window.addEventListener("touch",this._onClick.bind(this)))}return createClass(t,[{key:"_onClick",value:function(t){var e=t.target,n=e.closest(".flexi"),i=e.closest(".flexi > *"),a=this._activeContainer,o=this._activeNode;n!=a&&(a&&a.classList.remove("active"),n&&n.classList.add("active"),this._activeContainer=n),i!=o&&(o&&o.classList.remove("active"),i&&i.classList.add("active"),this._activeNode=i)}}]),t}();try{var evt=new CustomEvent("foo");if(evt.preventDefault(),evt.defaultPrevented!==!0)throw new Error("failure")}catch(t){var _CustomEvent=function(t,e){var n=void 0,i=void 0;return e=e||{bubbles:!1,cancelable:!1,detail:void 0},n=document.createEvent("CustomEvent"),n.initCustomEvent(t,params.bubbles,params.cancelable,params.detail),i=n.preventDefault,n.preventDefault=function(){i.call(this);try{Object.defineProperty(this,"defaultPrevented",{get:function(){return!0}})}catch(t){this.defaultPrevented=!0}},n}}var ModalAttr={show:"data-modal-show",hide:"data-modal-hide",toggle:"data-modal-toggle"},Modal=function(){function t(e){classCallCheck(this,t),e=e||{},this.modalQueryString=e.modalQueryString||".modal",this.attachEvents()}return createClass(t,[{key:"attachEvents",value:function(){window.addEventListener&&(window.addEventListener("click",this.click.bind(this)),window.addEventListener("touch",this.click.bind(this)))}},{key:"hide",value:function(t){return this._hide(!1,t)}},{key:"show",value:function(t){return this._show(!1,t)}},{key:"toggle",value:function(t){return this._toggle(!1,t)}},{key:"_hide",value:function(t,e){return this._adjust(t,e,"none")}},{key:"_show",value:function(t,e){return this._adjust(t,e,"block")}},{key:"_toggle",value:function(t,e){return this._adjust(t,e)}},{key:"_overlay",value:function(t,e){var n=t.overlay;n||"block"!=e?n.style.display=e:(n=t.overlay=document.createElement("div"),n.setAttribute("class","modal-overlay"),n.setAttribute("style","display:"+e),n.addEventListener("click",this._hide.bind(this)),t.insertBefore(n,t.firstChild))}},{key:"_adjust",value:function(t,e,n){var i=this.findInstance(t,e),a=void 0,o=void 0,r=void 0,l=void 0;i&&(t&&t.preventDefault&&t.preventDefault(),a=i.style.display,o=n||("block"==a?"none":"block"),this._overlay(i,o),r="block"==o?"modal-show":"modal-hide",l=new CustomEvent(r,{bubbles:!0}),i.dispatchEvent(l),i.style.display=o)}},{key:"findInstance",value:function(t,e){return e?document.querySelector(e):!(!t||!t.target)&&t.target.closest(this.modalQueryString)}},{key:"click",value:function(t){var e=t.target;for(var n in ModalAttr){var i=ModalAttr[n],a="_"+n;if(e.hasAttribute(i)&&this[a])return this[a](t,e.getAttribute(i))}return!1}}]),t}(),dropDown=new DropDown,modal=new Modal;