@nitro-ui/component-collapse
Version:
Collapse & Accordian styling for Nitro UI.
49 lines (48 loc) • 9.88 kB
JavaScript
'use strict';function _interopDefault(a){return a&&"object"==typeof a&&"default"in a?a["default"]:a}var $=_interopDefault(require("jquery"));/**
* --------------------------------------------------------------------------
* Bootstrap (v4.3.1): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/ /**
* ------------------------------------------------------------------------
* Private TransitionEnd Helpers
* ------------------------------------------------------------------------
*/const TRANSITION_END="transitionend",MAX_UID=1e6,MILLISECONDS_MULTIPLIER=1e3;// Shoutout AngusCroll (https://goo.gl/pxwQGp)
function toType(a){return{}.toString.call(a).match(/\s([a-z]+)/i)[1].toLowerCase()}function getSpecialTransitionEndEvent(){return{bindType:TRANSITION_END,delegateType:TRANSITION_END,handle(a){return $(a.target).is(this)?a.handleObj.handler.apply(this,arguments):void 0;// eslint-disable-line no-undefined
}}}function transitionEndEmulator(a){let b=!1;return $(this).one(Util.TRANSITION_END,()=>{b=!0}),setTimeout(()=>{b||Util.triggerTransitionEnd(this)},a),this}function setTransitionEndSupport(){$.fn.emulateTransitionEnd=transitionEndEmulator,$.event.special[Util.TRANSITION_END]=getSpecialTransitionEndEvent()}/**
* --------------------------------------------------------------------------
* Public Util Api
* --------------------------------------------------------------------------
*/const Util={TRANSITION_END:"bsTransitionEnd",getUID(a){do// eslint-disable-next-line no-bitwise
a+=~~(Math.random()*MAX_UID);while(document.getElementById(a));return a},getSelectorFromElement(a){let b=a.getAttribute("data-target");if(!b||"#"===b){const c=a.getAttribute("href");b=c&&"#"!==c?c.trim():""}try{return document.querySelector(b)?b:null}catch(a){return null}},getTransitionDurationFromElement(a){if(!a)return 0;// Get transition-duration of the element
let b=$(a).css("transition-duration"),c=$(a).css("transition-delay");const d=parseFloat(b),e=parseFloat(c);// Return 0 if element or transition duration is not found
return d||e?(b=b.split(",")[0],c=c.split(",")[0],(parseFloat(b)+parseFloat(c))*MILLISECONDS_MULTIPLIER):0;// If multiple durations are defined, take the first
},reflow(a){return a.offsetHeight},triggerTransitionEnd(a){$(a).trigger(TRANSITION_END)},// TODO: Remove in v5
supportsTransitionEnd(){return!0},isElement(a){return(a[0]||a).nodeType},typeCheckConfig(a,b,c){for(const d in c)if(Object.prototype.hasOwnProperty.call(c,d)){const e=c[d],f=b[d],g=f&&Util.isElement(f)?"element":toType(f);if(!new RegExp(e).test(g))throw new Error(`${a.toUpperCase()}: `+`Option "${d}" provided type "${g}" `+`but expected type "${e}".`)}},findShadowRoot(a){if(!document.documentElement.attachShadow)return null;// Can find the shadow root otherwise it'll return the document
if("function"==typeof a.getRootNode){const b=a.getRootNode();return b instanceof ShadowRoot?b:null}return a instanceof ShadowRoot?a:a.parentNode?Util.findShadowRoot(a.parentNode):null;// when we don't find a shadow root
}};setTransitionEndSupport();/**
* --------------------------------------------------------------------------
* Bootstrap (v4.3.1): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/ /**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/const NAME="collapse",VERSION="4.3.1",DATA_KEY="bs.collapse",EVENT_KEY=`.${DATA_KEY}`,DATA_API_KEY=".data-api",JQUERY_NO_CONFLICT=$.fn.collapse,Default={toggle:!0,parent:""},DefaultType={toggle:"boolean",parent:"(string|element)"},Event={SHOW:`show${EVENT_KEY}`,SHOWN:`shown${EVENT_KEY}`,HIDE:`hide${EVENT_KEY}`,HIDDEN:`hidden${EVENT_KEY}`,CLICK_DATA_API:`click${EVENT_KEY}${DATA_API_KEY}`},ClassName={SHOW:"show",COLLAPSE:"collapse",COLLAPSING:"collapsing",COLLAPSED:"collapsed"},Dimension={WIDTH:"width",HEIGHT:"height"},Selector={ACTIVES:".show, .collapsing",DATA_TOGGLE:"[data-toggle=\"collapse\"]"};/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/class Collapse{constructor(a,b){this._isTransitioning=!1,this._element=a,this._config=this._getConfig(b),this._triggerArray=[].slice.call(document.querySelectorAll(`[data-toggle="collapse"][href="#${a.id}"],`+`[data-toggle="collapse"][data-target="#${a.id}"]`));const c=[].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE));for(let d=0,e=c.length;d<e;d++){const b=c[d],e=Util.getSelectorFromElement(b),f=[].slice.call(document.querySelectorAll(e)).filter(b=>b===a);null!==e&&0<f.length&&(this._selector=e,this._triggerArray.push(b))}this._parent=this._config.parent?this._getParent():null,this._config.parent||this._addAriaAndCollapsedClass(this._element,this._triggerArray),this._config.toggle&&this.toggle()}// Getters
static get VERSION(){return VERSION}static get Default(){return Default}// Public
toggle(){$(this._element).hasClass(ClassName.SHOW)?this.hide():this.show()}show(){if(this._isTransitioning||$(this._element).hasClass(ClassName.SHOW))return;let a,b;if(this._parent&&(a=[].slice.call(this._parent.querySelectorAll(Selector.ACTIVES)).filter(a=>"string"==typeof this._config.parent?a.getAttribute("data-parent")===this._config.parent:a.classList.contains(ClassName.COLLAPSE)),0===a.length&&(a=null)),a&&(b=$(a).not(this._selector).data(DATA_KEY),b&&b._isTransitioning))return;const c=$.Event(Event.SHOW);if($(this._element).trigger(c),c.isDefaultPrevented())return;a&&(Collapse._jQueryInterface.call($(a).not(this._selector),"hide"),!b&&$(a).data(DATA_KEY,null));const d=this._getDimension();$(this._element).removeClass(ClassName.COLLAPSE).addClass(ClassName.COLLAPSING),this._element.style[d]=0,this._triggerArray.length&&$(this._triggerArray).removeClass(ClassName.COLLAPSED).attr("aria-expanded",!0),this.setTransitioning(!0);const e=d[0].toUpperCase()+d.slice(1),f=Util.getTransitionDurationFromElement(this._element);$(this._element).one(Util.TRANSITION_END,()=>{$(this._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).addClass(ClassName.SHOW),this._element.style[d]="",this.setTransitioning(!1),$(this._element).trigger(Event.SHOWN)}).emulateTransitionEnd(f),this._element.style[d]=`${this._element[`scroll${e}`]}px`}hide(){if(!this._isTransitioning&&$(this._element).hasClass(ClassName.SHOW)){const a=$.Event(Event.HIDE);if($(this._element).trigger(a),!a.isDefaultPrevented()){const a=this._getDimension();this._element.style[a]=`${this._element.getBoundingClientRect()[a]}px`,Util.reflow(this._element),$(this._element).addClass(ClassName.COLLAPSING).removeClass(ClassName.COLLAPSE).removeClass(ClassName.SHOW);const b=this._triggerArray.length;if(0<b)for(let a=0;a<b;a++){const b=this._triggerArray[a],c=Util.getSelectorFromElement(b);if(null!==c){const a=$([].slice.call(document.querySelectorAll(c)));a.hasClass(ClassName.SHOW)||$(b).addClass(ClassName.COLLAPSED).attr("aria-expanded",!1)}}this.setTransitioning(!0);this._element.style[a]="";const c=Util.getTransitionDurationFromElement(this._element);$(this._element).one(Util.TRANSITION_END,()=>{this.setTransitioning(!1),$(this._element).removeClass(ClassName.COLLAPSING).addClass(ClassName.COLLAPSE).trigger(Event.HIDDEN)}).emulateTransitionEnd(c)}}}setTransitioning(a){this._isTransitioning=a}dispose(){$.removeData(this._element,DATA_KEY),this._config=null,this._parent=null,this._element=null,this._triggerArray=null,this._isTransitioning=null}// Private
_getConfig(a){return a={...Default,...a},a.toggle=!!a.toggle,Util.typeCheckConfig(NAME,a,DefaultType),a}_getDimension(){const a=$(this._element).hasClass(Dimension.WIDTH);return a?Dimension.WIDTH:Dimension.HEIGHT}_getParent(){let a;Util.isElement(this._config.parent)?(a=this._config.parent,"undefined"!=typeof this._config.parent.jquery&&(a=this._config.parent[0])):a=document.querySelector(this._config.parent);const b=`[data-toggle="collapse"][data-parent="${this._config.parent}"]`,c=[].slice.call(a.querySelectorAll(b));return $(c).each((a,b)=>{this._addAriaAndCollapsedClass(Collapse._getTargetFromElement(b),[b])}),a}_addAriaAndCollapsedClass(a,b){const c=$(a).hasClass(ClassName.SHOW);b.length&&$(b).toggleClass(ClassName.COLLAPSED,!c).attr("aria-expanded",c)}// Static
static _getTargetFromElement(a){const b=Util.getSelectorFromElement(a);return b?document.querySelector(b):null}static _jQueryInterface(a){return this.each(function(){const b=$(this);let c=b.data(DATA_KEY);const d={...Default,...b.data(),...("object"==typeof a&&a?a:{})};if(!c&&d.toggle&&/show|hide/.test(a)&&(d.toggle=!1),c||(c=new Collapse(this,d),b.data(DATA_KEY,c)),"string"==typeof a){if("undefined"==typeof c[a])throw new TypeError(`No method named "${a}"`);c[a]()}})}}/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/ /**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/$(document).on(Event.CLICK_DATA_API,Selector.DATA_TOGGLE,function(a){"A"===a.currentTarget.tagName&&a.preventDefault();const b=$(this),c=Util.getSelectorFromElement(this),d=[].slice.call(document.querySelectorAll(c));$(d).each(function(){const a=$(this),c=a.data(DATA_KEY),d=c?"toggle":b.data();Collapse._jQueryInterface.call(a,d)})}),$.fn.collapse=Collapse._jQueryInterface,$.fn.collapse.Constructor=Collapse,$.fn.collapse.noConflict=()=>($.fn[NAME]=JQUERY_NO_CONFLICT,Collapse._jQueryInterface);