UNPKG

collapsible-block

Version:

Lightweight Collapse/Expand component library.

3 lines (2 loc) 9.86 kB
!function(e,t){"function"==typeof define&&define.amd?define([],t()):"object"==typeof exports?module.exports=t():e.CollapsibleBlock=t()}("undefined"!=typeof global?global:this.window||this.global,function(e){function a(){var e={},t=!1,n=0;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);n<arguments.length;n++){i=void 0;var i,l=arguments[n];for(i in l)l.hasOwnProperty(i)&&(t&&"[object Object]"===Object.prototype.toString.call(l[i])?e[i]=a(e[i],l[i]):e[i]=l[i])}return e}function r(){var e,t=document.createElement("fakeelement"),n={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(e in n)if(void 0!==t.style[e])return n[e];return"transitionend"}function o(e){(e=e||document.body).offsetHeight}function c(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}function d(e){if(e.target.closest(S.handlerSelector)&&e.target.closest(S.handlerMultiTargetSelector)){e.preventDefault();var t=s=e.target.closest(S.handlerMultiTargetSelector);if(t)for(var n=t.getAttribute(S.multiTargetAttribute).split(","),i=0;i<n.length;i++){var l=n[i],l=document.querySelector("#"+l.trim());l&&(l=l.closest(S.elementSelector))&&v.toggleState(l)}}else{var s;e.target.closest(S.handlerSelector)&&(e.preventDefault(),s=e.target.closest(S.handlerSelector),t=s)&&(t=(document.querySelector("#"+t.getAttribute(S.targetAttribute))||t).closest(S.elementSelector))&&v.toggleState(t)}}function m(e){e.defaultPrevented||e.key!=t&&e.key!=n||!e.target.closest(S.handlerSelector)||d(e)}function u(e){var t=e.style.position,n=e.style.display,i=e.style.visibility,l=e.style.transition,s=e.style.height,a=(e.style.position="absolute",e.style.display="block",e.style.visibility="hidden",e.style.transition="none",e.style.height="",e.scrollHeight);return e.style.position=t,e.style.display=n,e.style.visibility=i,e.style.transition=l,e.style.height=s,a}function g(e){return e.getBoundingClientRect().height}function b(e,t,n){var i;(n=!1!==n)||(i=e.style.transition,e.style.transition="none"),e.style.height=t+"px",n||(o(e),e.style.transition=i)}function p(e){v.expand(e.element),requestAnimationFrame(function(){u(e.contentElement)>e.settings.maxHeight&&v.collapse(e.element)})}function f(e,t){if(e||"boolean"==typeof t)for(var n=document.querySelectorAll("["+S.targetAttribute+"="+e.id+"]"),i=0;i<n.length;i++)n[i].setAttribute("aria-expanded",t)}function h(e){if(e&&!(e.style&&""===e.style.height||"propertyName"in e&&"height"!==e.propertyName)){"target"in e&&e.target&&(e=e.target);var t=v.getInstance(e);if(e.style.height="",e.style.overflow="",e.classList.remove(t.settings.isTransitioningClass),f(e,!0),x&&t&&!0===t.isActivated&&t.withFocus){var n=null,i=e.querySelectorAll(S.autoFocusSelector);if(!n&&i)for(var l=0;l<i.length;l++){var s=i[l];s.closest(S.contentElementSelector)===e&&c(s)&&(n=s)}if(!n&&e.matches(S.autoFocusSelector))for(var a=Array.from((e||document).querySelectorAll(S.focusableElementsSelector)),l=0;l<a.length;l++){var o=a[l];if(c(o)){n=o;break}}n&&(n.focus(),S.selectContentsOnFocus)&&"select"in n&&n.select()}t.withFocus=!0,e.removeEventListener(r(),h)}}function E(e){var t;!e||"propertyName"in e&&"height"!==e.propertyName||("target"in e&&e.target&&(e=e.target),t=v.getInstance(e),e.style.display="none",e.classList.remove(t.settings.isTransitioningClass),f(e,!1),e.removeEventListener(r(),E))}var y=!1,v={managers:[],states:{COLLAPSED:"collapsed",FIRST_EXPANDED:"first-expanded",EXPANDED:"expanded"}},S={},A={bodyClass:"has-collapsible-block",elementSelector:"[data-collapsible]",contentElementSelector:"[data-collapsible-content]",contentInnerSelector:".collapsible-content__inner",handlerSelector:"[data-collapsible-handler]",handlerMultiTargetSelector:"[data-collapsible-targets]",autoFocusSelector:"[data-autofocus]",focusableElementsSelector:'a[href], a[role="button"]:not([disabled]), button:not([disabled]), input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled]), details, summary, iframe, object, embed, [contenteditable] [tabindex]:not([tabindex="-1"])',selectContentsOnFocus:!0,isCollapsedClass:"is-collapsed",isExpandedClass:"is-expanded",isActivatedClass:"is-activated",isTransitioningClass:"is-transitioning",cssTransition:"height .15s linear",targetAttribute:"aria-controls",multiTargetAttribute:"data-collapsible-targets",maxHeightAttribute:"data-collapsible-max-height",createHandlerAttribute:"data-collapsible-create-handler",changeStateOnResizeAttribute:"data-collapsible-change-state-resize",initialState:v.states.FIRST_EXPANDED,initialStateAttribute:"data-collapsible-initial-state",idPrefix:"collapsible",createHandler:!1,maxHeight:0,handlerTemplate:'<a href="#collapsible" role="button" data-collapsible-handler>Read more</a>',contentInnerTemplate:'<div class="collapsible-content__inner"></div>'},t="Enter",n=" ",x=!1;return v.getInstance=function(e){for(var t,n=0;n<v.managers.length;n++){var i=v.managers[n];if(i.element==e){t=i;break}}return t},v.collapse=function(e,t){var n=v.getInstance(e);n&&(t=!1!==t,n.element.classList.add(S.isTransitioningClass),n.element.classList.remove(n.settings.isExpandedClass),n.element.classList.add(n.settings.isCollapsedClass),n.contentElement.removeEventListener(r(),h),n.contentElement.style.overflow="hidden",b(n.contentElement,g(n.contentElement),!1),t&&n.contentElement.addEventListener(r(),E),o(e),b(n.contentElement,n.settings.maxHeight,t),t||E(n.contentElement))},v.expand=function(t,n,e){var i,l,s,a=v.getInstance(t);a&&(n=!1!==n,a.withFocus=e=!1!==e,a.contentElement.style.display="",a.contentElement.removeEventListener(r(),E),b(a.contentElement,g(a.contentElement),!1),n&&a.contentElement.addEventListener(r(),h),i=(e=a.contentElement)&&(l=window.getComputedStyle(e).transitionProperty,e=window.getComputedStyle(e).transitionDuration,l)&&e?(l=l.split(", "),s=(l=e.split(", ")[e=l.indexOf("height")])&&-1<l.indexOf("ms"),e=l&&-1<e?parseFloat(l):0,s?e:1e3*e):0,a.element.classList.add(a.settings.isTransitioningClass),requestAnimationFrame(function(){var e=u(a.contentElement);o(t),b(a.contentElement,e,n),a.element.classList.remove(a.settings.isCollapsedClass),a.element.classList.add(a.settings.isExpandedClass),n||h(a.contentElement),setTimeout(function(){h(a.contentElement)},i+50)}))},v.enableFocusOnExpand=function(){x=!0},v.disableFocusOnExpand=function(){x=!1},v.toggleState=function(e,t){var n=v.getInstance(e);n&&(e.classList.contains(n.settings.isCollapsedClass)?v.expand(e,t):v.collapse(e,t))},v.getState=function(e){var t,n=v.getInstance(e);return!!n&&(t=v.states.EXPANDED,e.classList.contains(n.settings.isCollapsedClass)?v.states.COLLAPSED:t)},v.initializeHandler=function(e){e.removeAttribute("disabled"),e.removeAttribute("aria-hidden"),e.setAttribute("tabindex","0"),"BUTTON"!=e.tagName.toUpperCase()&&e.setAttribute("role","button");var t=e.getAttribute(S.targetAttribute),n=e.getAttribute(S.multiTargetAttribute);t&&""!=t||n&&""!=n||((n=e.closest(S.elementSelector))&&n.matches(S.contentElementSelector)?t=n.id:n&&n.querySelector(S.contentElementSelector)&&(t=n.querySelector(S.contentElementSelector).id),t&&""!=t&&e.setAttribute(S.targetAttribute,t)),e.removeAttribute("href")},v.initializeElement=function(e){var t,n,i={},e=(v.managers.push(i),i.element=e,i.settings=a(S),i.withFocus=!0,i.contentElement=i.element.matches(S.contentElementSelector)?i.element:i.element.querySelector(i.settings.contentElementSelector),i.contentElement||(i.contentElement=i.element),""==i.element.id&&(i.element.id=i.settings.idPrefix+"_"+v.managers.length),""==i.contentElement.id&&(i.contentElement.id=i.element.id+"__content"),i.contentElement.getAttribute(i.settings.maxHeightAttribute)),e=(i.settings.maxHeight=e&&""!=e?parseInt(e):i.settings.maxHeight,i.element.getAttribute(i.settings.createHandlerAttribute)),l=(i.settings.createHandler="true"==e||"false"==e?Boolean(e):i.settings.createHandler,i.settings.createHandler&&(t=(e=i).element,l=e.contentElement,(n=document.createElement("div")).innerHTML=e.settings.handlerTemplate.trim(),e.handlerElement=n.childNodes[0],e.handlerElement.setAttribute(e.settings.targetAttribute,l.id),t.insertBefore(n.childNodes[0],l.nextSibling)),(e=i).contentElement.querySelector(e.settings.contentInnerSelector)||(t=e.contentElement,(n=document.createElement("div")).innerHTML=e.settings.contentInnerTemplate.trim(),n.childNodes[0].innerHTML=t.innerHTML,t.innerHTML=n.innerHTML),i.contentElement.getAttribute(i.settings.initialStateAttribute)),e=l||i.settings.initialState,s=Array.prototype.indexOf.call(i.element.parentNode.children,i.element),e=(e==v.states.EXPANDED||e==v.states.FIRST_EXPANDED&&0==s?v.expand(i.element,!1,!1):v.collapse(i.element,!1),i.element.getAttribute(i.settings.changeStateOnResizeAttribute)),s=(i.settings.changeStateOnResize=!(!e||""==e)&&Boolean(e),i.settings.changeStateOnResize&&(p(i),window.addEventListener("resize",function(){p(i)})),window.getComputedStyle(i.contentElement).transition),e=""!=s?s+", "+i.settings.cssTransition:i.settings.cssTransition;i.contentElement.style.transition=e,requestAnimationFrame(function(){i.isActivated=!0,i.element.classList.add(i.settings.isActivatedClass)})},v.init=function(e){if(!y){S=a(A,e);for(var t=document.querySelectorAll(S.elementSelector),n=0;n<t.length;n++)v.initializeElement(t[n]);for(var i=document.querySelectorAll(S.handlerSelector),n=0;n<i.length;n++)v.initializeHandler(i[n]);o();for(n=0;n<t.length;n++){var l=t[n],s=l.matches(S.contentElementSelector)?l:l.querySelector(S.contentElementSelector);f(s,v.getState(l)==v.states.EXPANDED)}document.addEventListener("click",d),document.addEventListener("keydown",m,!0),document.body.classList.add(S.bodyClass),v.enableFocusOnExpand(),requestAnimationFrame(function(){y=!0})}},v}); //# sourceMappingURL=maps/collapsible-block.min.js.map