UNPKG

@nitro-ui/component-collapse

Version:

Collapse & Accordian styling for Nitro UI.

49 lines (48 loc) 9.76 kB
import $ from"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);