diff --git a/docs/js/demo.bundle.js b/docs/js/demo.bundle.js index 505d510..b287d2d 100644 --- a/docs/js/demo.bundle.js +++ b/docs/js/demo.bundle.js @@ -618,7 +618,6 @@ _this.options = Object.assign({}, Handorgel.defaultOptions, options); _this._listeners = {}; _this._bindEvents(); - _this._initAria(); _this.update(); return _this; } @@ -684,7 +683,6 @@ fold.destroy(); }); this._unbindEvents(); - this._cleanAria(); // clean reference to handorgel instance this.element.handorgel = null; @@ -702,21 +700,6 @@ } }); } - }, { - key: "_initAria", - value: function _initAria() { - if (!this.options.ariaEnabled) { - return; - } - if (this.options.multiSelectable) { - this.element.setAttribute('aria-multiselectable', 'true'); - } - } - }, { - key: "_cleanAria", - value: function _cleanAria() { - this.element.removeAttribute('aria-multiselectable'); - } }, { key: "_bindEvents", value: function _bindEvents() { diff --git a/lib/js/esm/handorgel.js b/lib/js/esm/handorgel.js index 051c8e0..01b57dd 100644 --- a/lib/js/esm/handorgel.js +++ b/lib/js/esm/handorgel.js @@ -616,7 +616,6 @@ var Handorgel = /*#__PURE__*/function (_EventEmitter) { _this.options = Object.assign({}, Handorgel.defaultOptions, options); _this._listeners = {}; _this._bindEvents(); - _this._initAria(); _this.update(); return _this; } @@ -682,7 +681,6 @@ var Handorgel = /*#__PURE__*/function (_EventEmitter) { fold.destroy(); }); this._unbindEvents(); - this._cleanAria(); // clean reference to handorgel instance this.element.handorgel = null; @@ -700,21 +698,6 @@ var Handorgel = /*#__PURE__*/function (_EventEmitter) { } }); } - }, { - key: "_initAria", - value: function _initAria() { - if (!this.options.ariaEnabled) { - return; - } - if (this.options.multiSelectable) { - this.element.setAttribute('aria-multiselectable', 'true'); - } - } - }, { - key: "_cleanAria", - value: function _cleanAria() { - this.element.removeAttribute('aria-multiselectable'); - } }, { key: "_bindEvents", value: function _bindEvents() { diff --git a/lib/js/esm/handorgel.min.js b/lib/js/esm/handorgel.min.js index 341dc82..06c66cf 100644 --- a/lib/js/esm/handorgel.min.js +++ b/lib/js/esm/handorgel.min.js @@ -1,2 +1,2 @@ /** handorgel v1.0.0, @license MIT */ -function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var n=0;n0&&void 0!==arguments[0])||arguments[0];if(!this.expanded)if(this.handorgel.emitEvent("fold:open",[this]),this.expanded=!0,this.handorgel.options.collapsible||this.disable(),this._updateAria("button","aria-expanded"),this.header.classList.add(this.handorgel.options.headerOpenClass),this.content.classList.add(this.handorgel.options.contentOpenClass),t){var e=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(e,"px")}else this._opened()}},{key:"close",value:function(){var t=this,e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];if(this.expanded)if(this.handorgel.emitEvent("fold:close",[this]),this.expanded=!1,this.handorgel.options.collapsible||this.enable(),this._updateAria("button","aria-expanded"),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),e){var n=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(n,"px"),window.requestAnimationFrame(function(){window.requestAnimationFrame(function(){t.content.style.height="0px"})})}else this._closed()}},{key:"disable",value:function(){this.disabled=!0,this._updateAria("button","aria-disabled"),this.header.classList.add(this.handorgel.options.headerDisabledClass),this.content.classList.add(this.handorgel.options.contentDisabledClass)}},{key:"enable",value:function(){this.disabled=!1,this._updateAria("button","aria-disabled"),this.header.classList.remove(this.handorgel.options.headerDisabledClass),this.content.classList.remove(this.handorgel.options.contentDisabledClass)}},{key:"focus",value:function(){this.button.focus()}},{key:"blur",value:function(){this.button.blur()}},{key:"toggle",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.expanded?this.close(t):this.open(t)}},{key:"destroy",value:function(){this._unbindEvents(),this._cleanAria(),this.header.classList.remove(this.handorgel.options.headerOpenClass),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.content.style.height="0px",this.header.handorgelFold=null,this.content.handorgelFold=null,this.header.removeAttribute("id"),this.content.removeAttribute("id"),this.handorgel=null}},{key:"_opened",value:function(){this.content.style.height="auto",this.header.classList.add(this.handorgel.options.headerOpenedClass),this.content.classList.add(this.handorgel.options.contentOpenedClass),this.handorgel.emitEvent("fold:opened",[this])}},{key:"_closed",value:function(){this.header.classList.remove(this.handorgel.options.headerOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.handorgel.emitEvent("fold:closed",[this])}},{key:"_initialOpen",value:function(){var t=this;null===this.header.getAttribute(this.handorgel.options.initialOpenAttribute)&&null===this.content.getAttribute(this.handorgel.options.initialOpenAttribute)||(this.handorgel.options.initialOpenTransition?window.setTimeout(function(){t.open()},this.handorgel.options.initialOpenTransitionDelay):this.open(!1))}},{key:"_initialFocus",value:function(){null!==this.button.getAttribute("autofocus")&&this._handleFocus()}},{key:"_initAria",value:function(){this._updateAria("button"),this._updateAria("content")}},{key:"_cleanAria",value:function(){this._updateAria("button",null,!0),this._updateAria("content",null,!0)}},{key:"_updateAria",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.handorgel.options.ariaEnabled)if(e){var i=u[t][e].call(this);this[t].setAttribute(e,i)}else for(var s in u[t])if(u[t].hasOwnProperty(s))if(n)this[t].removeAttribute(s);else{var o=u[t][s].call(this);this[t].setAttribute(s,o)}}},{key:"_handleContentTransitionEnd",value:function(t){t.target===t.currentTarget&&"height"===t.propertyName&&(this.expanded?this._opened():this._closed())}},{key:"_handleFocus",value:function(){this.focused=!0,this.header.classList.add(this.handorgel.options.headerFocusClass),this.content.classList.add(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:focus",[this])}},{key:"_handleBlur",value:function(){this.focused=!1,this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:blur",[this])}},{key:"_handleButtonClick",value:function(t){this.focus(),this.disabled||this.toggle()}},{key:"_handleButtonKeydown",value:function(t){if(this.handorgel.options.keyboardInteraction){var e=null;switch(t.which){case f:e="next";break;case p:e="prev";break;case y:e="first";break;case g:e="last";break;case b:t.ctrlKey&&(e="next");break;case v:t.ctrlKey&&(e="prev")}e&&(t.preventDefault(),this.handorgel.focus(e))}}},{key:"_handleContentKeydown",value:function(t){if(this.handorgel.options.keyboardInteraction&&t.ctrlKey){var e=null;switch(t.which){case b:e="next";break;case v:e="prev"}e&&(t.preventDefault(),this.handorgel.focus(e))}}},{key:"_bindEvents",value:function(){for(var t in this._listeners={bFocus:["focus",this.button,this._handleFocus.bind(this)],bBlur:["blur",this.button,this._handleBlur.bind(this)],bClick:["click",this.button,this._handleButtonClick.bind(this)],bKeydown:["keydown",this.button,this._handleButtonKeydown.bind(this)],cKeydown:["keydown",this.content,this._handleContentKeydown.bind(this)],cTransition:["transitionend",this.content,this._handleContentTransitionEnd.bind(this)]},this._listeners)if(this._listeners.hasOwnProperty(t)){var e=this._listeners[t];e[1].addEventListener(e[0],e[2])}}},{key:"_unbindEvents",value:function(){for(var t in this._listeners)if(this._listeners.hasOwnProperty(t)){var e=this._listeners[t];e[1].removeEventListener(e[0],e[2])}}}]),e}(),m=0,O=function(e){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&s(t,e)}(l,d);var i=r(l);function l(e){var n,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t(this,l),n=i.call(this),e.handorgel?a(n):(n.element=e,n.element.handorgel=o(n),n.id="handorgel".concat(++m),n.element.setAttribute("id",n.id),n.folds=[],n.options=Object.assign({},l.defaultOptions,s),n._listeners={},n._bindEvents(),n._initAria(),n.update(),n)}return n(l,[{key:"update",value:function(){this.folds=[];for(var t="string"==typeof this.options.headerElements?this.element.querySelectorAll(this.options.headerElements):this.options.headerElements,e="string"==typeof this.options.contentElements?this.element.querySelectorAll(this.options.contentElements):this.options.contentElements,n=0;n0&&void 0!==arguments[0])||arguments[0];if(!this.expanded)if(this.handorgel.emitEvent("fold:open",[this]),this.expanded=!0,this.handorgel.options.collapsible||this.disable(),this._updateAria("button","aria-expanded"),this.header.classList.add(this.handorgel.options.headerOpenClass),this.content.classList.add(this.handorgel.options.contentOpenClass),t){var e=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(e,"px")}else this._opened()}},{key:"close",value:function(){var t=this,e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];if(this.expanded)if(this.handorgel.emitEvent("fold:close",[this]),this.expanded=!1,this.handorgel.options.collapsible||this.enable(),this._updateAria("button","aria-expanded"),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),e){var n=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(n,"px"),window.requestAnimationFrame(function(){window.requestAnimationFrame(function(){t.content.style.height="0px"})})}else this._closed()}},{key:"disable",value:function(){this.disabled=!0,this._updateAria("button","aria-disabled"),this.header.classList.add(this.handorgel.options.headerDisabledClass),this.content.classList.add(this.handorgel.options.contentDisabledClass)}},{key:"enable",value:function(){this.disabled=!1,this._updateAria("button","aria-disabled"),this.header.classList.remove(this.handorgel.options.headerDisabledClass),this.content.classList.remove(this.handorgel.options.contentDisabledClass)}},{key:"focus",value:function(){this.button.focus()}},{key:"blur",value:function(){this.button.blur()}},{key:"toggle",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.expanded?this.close(t):this.open(t)}},{key:"destroy",value:function(){this._unbindEvents(),this._cleanAria(),this.header.classList.remove(this.handorgel.options.headerOpenClass),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.content.style.height="0px",this.header.handorgelFold=null,this.content.handorgelFold=null,this.header.removeAttribute("id"),this.content.removeAttribute("id"),this.handorgel=null}},{key:"_opened",value:function(){this.content.style.height="auto",this.header.classList.add(this.handorgel.options.headerOpenedClass),this.content.classList.add(this.handorgel.options.contentOpenedClass),this.handorgel.emitEvent("fold:opened",[this])}},{key:"_closed",value:function(){this.header.classList.remove(this.handorgel.options.headerOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.handorgel.emitEvent("fold:closed",[this])}},{key:"_initialOpen",value:function(){var t=this;null===this.header.getAttribute(this.handorgel.options.initialOpenAttribute)&&null===this.content.getAttribute(this.handorgel.options.initialOpenAttribute)||(this.handorgel.options.initialOpenTransition?window.setTimeout(function(){t.open()},this.handorgel.options.initialOpenTransitionDelay):this.open(!1))}},{key:"_initialFocus",value:function(){null!==this.button.getAttribute("autofocus")&&this._handleFocus()}},{key:"_initAria",value:function(){this._updateAria("button"),this._updateAria("content")}},{key:"_cleanAria",value:function(){this._updateAria("button",null,!0),this._updateAria("content",null,!0)}},{key:"_updateAria",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.handorgel.options.ariaEnabled)if(e){var i=u[t][e].call(this);this[t].setAttribute(e,i)}else for(var s in u[t])if(u[t].hasOwnProperty(s))if(n)this[t].removeAttribute(s);else{var o=u[t][s].call(this);this[t].setAttribute(s,o)}}},{key:"_handleContentTransitionEnd",value:function(t){t.target===t.currentTarget&&"height"===t.propertyName&&(this.expanded?this._opened():this._closed())}},{key:"_handleFocus",value:function(){this.focused=!0,this.header.classList.add(this.handorgel.options.headerFocusClass),this.content.classList.add(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:focus",[this])}},{key:"_handleBlur",value:function(){this.focused=!1,this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:blur",[this])}},{key:"_handleButtonClick",value:function(t){this.focus(),this.disabled||this.toggle()}},{key:"_handleButtonKeydown",value:function(t){if(this.handorgel.options.keyboardInteraction){var e=null;switch(t.which){case f:e="next";break;case p:e="prev";break;case y:e="first";break;case g:e="last";break;case b:t.ctrlKey&&(e="next");break;case v:t.ctrlKey&&(e="prev")}e&&(t.preventDefault(),this.handorgel.focus(e))}}},{key:"_handleContentKeydown",value:function(t){if(this.handorgel.options.keyboardInteraction&&t.ctrlKey){var e=null;switch(t.which){case b:e="next";break;case v:e="prev"}e&&(t.preventDefault(),this.handorgel.focus(e))}}},{key:"_bindEvents",value:function(){for(var t in this._listeners={bFocus:["focus",this.button,this._handleFocus.bind(this)],bBlur:["blur",this.button,this._handleBlur.bind(this)],bClick:["click",this.button,this._handleButtonClick.bind(this)],bKeydown:["keydown",this.button,this._handleButtonKeydown.bind(this)],cKeydown:["keydown",this.content,this._handleContentKeydown.bind(this)],cTransition:["transitionend",this.content,this._handleContentTransitionEnd.bind(this)]},this._listeners)if(this._listeners.hasOwnProperty(t)){var e=this._listeners[t];e[1].addEventListener(e[0],e[2])}}},{key:"_unbindEvents",value:function(){for(var t in this._listeners)if(this._listeners.hasOwnProperty(t)){var e=this._listeners[t];e[1].removeEventListener(e[0],e[2])}}}]),e}(),m=0,O=function(e){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&s(t,e)}(l,d);var i=r(l);function l(e){var n,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t(this,l),n=i.call(this),e.handorgel?a(n):(n.element=e,n.element.handorgel=o(n),n.id="handorgel".concat(++m),n.element.setAttribute("id",n.id),n.folds=[],n.options=Object.assign({},l.defaultOptions,s),n._listeners={},n._bindEvents(),n.update(),n)}return n(l,[{key:"update",value:function(){this.folds=[];for(var t="string"==typeof this.options.headerElements?this.element.querySelectorAll(this.options.headerElements):this.options.headerElements,e="string"==typeof this.options.contentElements?this.element.querySelectorAll(this.options.contentElements):this.options.contentElements,n=0;n{window.requestAnimationFrame(()=>{this.content.style.height="0px"})})}else this._closed()}disable(){this.disabled=!0,this._updateAria("button","aria-disabled"),this.header.classList.add(this.handorgel.options.headerDisabledClass),this.content.classList.add(this.handorgel.options.contentDisabledClass)}enable(){this.disabled=!1,this._updateAria("button","aria-disabled"),this.header.classList.remove(this.handorgel.options.headerDisabledClass),this.content.classList.remove(this.handorgel.options.contentDisabledClass)}focus(){this.button.focus()}blur(){this.button.blur()}toggle(t=!0){this.expanded?this.close(t):this.open(t)}destroy(){this._unbindEvents(),this._cleanAria(),this.header.classList.remove(this.handorgel.options.headerOpenClass),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.content.style.height="0px",this.header.handorgelFold=null,this.content.handorgelFold=null,this.header.removeAttribute("id"),this.content.removeAttribute("id"),this.handorgel=null}_opened(){this.content.style.height="auto",this.header.classList.add(this.handorgel.options.headerOpenedClass),this.content.classList.add(this.handorgel.options.contentOpenedClass),this.handorgel.emitEvent("fold:opened",[this])}_closed(){this.header.classList.remove(this.handorgel.options.headerOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.handorgel.emitEvent("fold:closed",[this])}_initialOpen(){null===this.header.getAttribute(this.handorgel.options.initialOpenAttribute)&&null===this.content.getAttribute(this.handorgel.options.initialOpenAttribute)||(this.handorgel.options.initialOpenTransition?window.setTimeout(()=>{this.open()},this.handorgel.options.initialOpenTransitionDelay):this.open(!1))}_initialFocus(){null!==this.button.getAttribute("autofocus")&&this._handleFocus()}_initAria(){this._updateAria("button"),this._updateAria("content")}_cleanAria(){this._updateAria("button",null,!0),this._updateAria("content",null,!0)}_updateAria(t,e=null,s=!1){if(this.handorgel.options.ariaEnabled)if(e){const s=n[t][e].call(this);this[t].setAttribute(e,s)}else for(let e in n[t])if(n[t].hasOwnProperty(e))if(s)this[t].removeAttribute(e);else{const s=n[t][e].call(this);this[t].setAttribute(e,s)}}_handleContentTransitionEnd(t){t.target===t.currentTarget&&"height"===t.propertyName&&(this.expanded?this._opened():this._closed())}_handleFocus(){this.focused=!0,this.header.classList.add(this.handorgel.options.headerFocusClass),this.content.classList.add(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:focus",[this])}_handleBlur(){this.focused=!1,this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:blur",[this])}_handleButtonClick(t){this.focus(),this.disabled||this.toggle()}_handleButtonKeydown(t){if(!this.handorgel.options.keyboardInteraction)return;let e=null;switch(t.which){case o.arrowDown:e="next";break;case o.arrowUp:e="prev";break;case o.home:e="first";break;case o.end:e="last";break;case o.pageDown:t.ctrlKey&&(e="next");break;case o.pageUp:t.ctrlKey&&(e="prev")}e&&(t.preventDefault(),this.handorgel.focus(e))}_handleContentKeydown(t){if(!this.handorgel.options.keyboardInteraction||!t.ctrlKey)return;let e=null;switch(t.which){case o.pageDown:e="next";break;case o.pageUp:e="prev"}e&&(t.preventDefault(),this.handorgel.focus(e))}_bindEvents(){this._listeners={bFocus:["focus",this.button,this._handleFocus.bind(this)],bBlur:["blur",this.button,this._handleBlur.bind(this)],bClick:["click",this.button,this._handleButtonClick.bind(this)],bKeydown:["keydown",this.button,this._handleButtonKeydown.bind(this)],cKeydown:["keydown",this.content,this._handleContentKeydown.bind(this)],cTransition:["transitionend",this.content,this._handleContentTransitionEnd.bind(this)]};for(let t in this._listeners)if(this._listeners.hasOwnProperty(t)){const e=this._listeners[t];e[1].addEventListener(e[0],e[2])}}_unbindEvents(){for(let t in this._listeners)if(this._listeners.hasOwnProperty(t)){const e=this._listeners[t];e[1].removeEventListener(e[0],e[2])}}}let a=0;class l extends s{constructor(t,e={}){super(),t.handorgel||(this.element=t,this.element.handorgel=this,this.id=`handorgel${++a}`,this.element.setAttribute("id",this.id),this.folds=[],this.options=Object.assign({},l.defaultOptions,e),this._listeners={},this._bindEvents(),this._initAria(),this.update())}update(){this.folds=[];const t="string"==typeof this.options.headerElements?this.element.querySelectorAll(this.options.headerElements):this.options.headerElements,e="string"==typeof this.options.contentElements?this.element.querySelectorAll(this.options.contentElements):this.options.contentElements;for(let s=0;s{t.destroy()}),this._unbindEvents(),this._cleanAria(),this.element.handorgel=null,this.emitEvent("destroyed")}_handleFoldOpen(t){this.options.multiSelectable||this.folds.forEach(e=>{t!==e&&e.close()})}_initAria(){this.options.ariaEnabled&&this.options.multiSelectable&&this.element.setAttribute("aria-multiselectable","true")}_cleanAria(){this.element.removeAttribute("aria-multiselectable")}_bindEvents(){this._listeners.foldOpen=this._handleFoldOpen.bind(this),this.on("fold:open",this._listeners.foldOpen)}_unbindEvents(){this.off("fold:open",this._listeners.foldOpen)}}l.defaultOptions={keyboardInteraction:!0,multiSelectable:!0,ariaEnabled:!0,collapsible:!0,carouselFocus:!0,initialOpenAttribute:"data-open",initialOpenTransition:!0,initialOpenTransitionDelay:200,headerElements:".handorgel__header",contentElements:".handorgel__content",headerOpenClass:"handorgel__header--open",contentOpenClass:"handorgel__content--open",headerOpenedClass:"handorgel__header--opened",contentOpenedClass:"handorgel__content--opened",headerDisabledClass:"handorgel__header--disabled",contentDisabledClass:"handorgel__content--disabled",headerFocusClass:"handorgel__header--focus",contentFocusClass:"handorgel__content--focus"};export default l; \ No newline at end of file +var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var e,s=(function(e){var s,n;s="undefined"!=typeof window?window:t,n=function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var s=this._events=this._events||{},n=s[t]=s[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var s=this._onceEvents=this._onceEvents||{};return(s[t]=s[t]||{})[e]=!0,this}},e.off=function(t,e){var s=this._events&&this._events[t];if(s&&s.length){var n=s.indexOf(e);return-1!=n&&s.splice(n,1),this}},e.emitEvent=function(t,e){var s=this._events&&this._events[t];if(s&&s.length){s=s.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],i=0;i{window.requestAnimationFrame(()=>{this.content.style.height="0px"})})}else this._closed()}disable(){this.disabled=!0,this._updateAria("button","aria-disabled"),this.header.classList.add(this.handorgel.options.headerDisabledClass),this.content.classList.add(this.handorgel.options.contentDisabledClass)}enable(){this.disabled=!1,this._updateAria("button","aria-disabled"),this.header.classList.remove(this.handorgel.options.headerDisabledClass),this.content.classList.remove(this.handorgel.options.contentDisabledClass)}focus(){this.button.focus()}blur(){this.button.blur()}toggle(t=!0){this.expanded?this.close(t):this.open(t)}destroy(){this._unbindEvents(),this._cleanAria(),this.header.classList.remove(this.handorgel.options.headerOpenClass),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.content.style.height="0px",this.header.handorgelFold=null,this.content.handorgelFold=null,this.header.removeAttribute("id"),this.content.removeAttribute("id"),this.handorgel=null}_opened(){this.content.style.height="auto",this.header.classList.add(this.handorgel.options.headerOpenedClass),this.content.classList.add(this.handorgel.options.contentOpenedClass),this.handorgel.emitEvent("fold:opened",[this])}_closed(){this.header.classList.remove(this.handorgel.options.headerOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.handorgel.emitEvent("fold:closed",[this])}_initialOpen(){null===this.header.getAttribute(this.handorgel.options.initialOpenAttribute)&&null===this.content.getAttribute(this.handorgel.options.initialOpenAttribute)||(this.handorgel.options.initialOpenTransition?window.setTimeout(()=>{this.open()},this.handorgel.options.initialOpenTransitionDelay):this.open(!1))}_initialFocus(){null!==this.button.getAttribute("autofocus")&&this._handleFocus()}_initAria(){this._updateAria("button"),this._updateAria("content")}_cleanAria(){this._updateAria("button",null,!0),this._updateAria("content",null,!0)}_updateAria(t,e=null,s=!1){if(this.handorgel.options.ariaEnabled)if(e){const s=i[t][e].call(this);this[t].setAttribute(e,s)}else for(let e in i[t])if(i[t].hasOwnProperty(e))if(s)this[t].removeAttribute(e);else{const s=i[t][e].call(this);this[t].setAttribute(e,s)}}_handleContentTransitionEnd(t){t.target===t.currentTarget&&"height"===t.propertyName&&(this.expanded?this._opened():this._closed())}_handleFocus(){this.focused=!0,this.header.classList.add(this.handorgel.options.headerFocusClass),this.content.classList.add(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:focus",[this])}_handleBlur(){this.focused=!1,this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:blur",[this])}_handleButtonClick(t){this.focus(),this.disabled||this.toggle()}_handleButtonKeydown(t){if(!this.handorgel.options.keyboardInteraction)return;let e=null;switch(t.which){case o.arrowDown:e="next";break;case o.arrowUp:e="prev";break;case o.home:e="first";break;case o.end:e="last";break;case o.pageDown:t.ctrlKey&&(e="next");break;case o.pageUp:t.ctrlKey&&(e="prev")}e&&(t.preventDefault(),this.handorgel.focus(e))}_handleContentKeydown(t){if(!this.handorgel.options.keyboardInteraction||!t.ctrlKey)return;let e=null;switch(t.which){case o.pageDown:e="next";break;case o.pageUp:e="prev"}e&&(t.preventDefault(),this.handorgel.focus(e))}_bindEvents(){this._listeners={bFocus:["focus",this.button,this._handleFocus.bind(this)],bBlur:["blur",this.button,this._handleBlur.bind(this)],bClick:["click",this.button,this._handleButtonClick.bind(this)],bKeydown:["keydown",this.button,this._handleButtonKeydown.bind(this)],cKeydown:["keydown",this.content,this._handleContentKeydown.bind(this)],cTransition:["transitionend",this.content,this._handleContentTransitionEnd.bind(this)]};for(let t in this._listeners)if(this._listeners.hasOwnProperty(t)){const e=this._listeners[t];e[1].addEventListener(e[0],e[2])}}_unbindEvents(){for(let t in this._listeners)if(this._listeners.hasOwnProperty(t)){const e=this._listeners[t];e[1].removeEventListener(e[0],e[2])}}}let a=0;class l extends s{constructor(t,e={}){super(),t.handorgel||(this.element=t,this.element.handorgel=this,this.id=`handorgel${++a}`,this.element.setAttribute("id",this.id),this.folds=[],this.options=Object.assign({},l.defaultOptions,e),this._listeners={},this._bindEvents(),this.update())}update(){this.folds=[];const t="string"==typeof this.options.headerElements?this.element.querySelectorAll(this.options.headerElements):this.options.headerElements,e="string"==typeof this.options.contentElements?this.element.querySelectorAll(this.options.contentElements):this.options.contentElements;for(let s=0;s{t.destroy()}),this._unbindEvents(),this.element.handorgel=null,this.emitEvent("destroyed")}_handleFoldOpen(t){this.options.multiSelectable||this.folds.forEach(e=>{t!==e&&e.close()})}_bindEvents(){this._listeners.foldOpen=this._handleFoldOpen.bind(this),this.on("fold:open",this._listeners.foldOpen)}_unbindEvents(){this.off("fold:open",this._listeners.foldOpen)}}l.defaultOptions={keyboardInteraction:!0,multiSelectable:!0,ariaEnabled:!0,collapsible:!0,carouselFocus:!0,initialOpenAttribute:"data-open",initialOpenTransition:!0,initialOpenTransitionDelay:200,headerElements:".handorgel__header",contentElements:".handorgel__content",headerOpenClass:"handorgel__header--open",contentOpenClass:"handorgel__content--open",headerOpenedClass:"handorgel__header--opened",contentOpenedClass:"handorgel__content--opened",headerDisabledClass:"handorgel__header--disabled",contentDisabledClass:"handorgel__content--disabled",headerFocusClass:"handorgel__header--focus",contentFocusClass:"handorgel__content--focus"};export default l; \ No newline at end of file diff --git a/lib/js/umd/handorgel.js b/lib/js/umd/handorgel.js index d7c4282..8541046 100644 --- a/lib/js/umd/handorgel.js +++ b/lib/js/umd/handorgel.js @@ -622,7 +622,6 @@ _this.options = Object.assign({}, Handorgel.defaultOptions, options); _this._listeners = {}; _this._bindEvents(); - _this._initAria(); _this.update(); return _this; } @@ -688,7 +687,6 @@ fold.destroy(); }); this._unbindEvents(); - this._cleanAria(); // clean reference to handorgel instance this.element.handorgel = null; @@ -706,21 +704,6 @@ } }); } - }, { - key: "_initAria", - value: function _initAria() { - if (!this.options.ariaEnabled) { - return; - } - if (this.options.multiSelectable) { - this.element.setAttribute('aria-multiselectable', 'true'); - } - } - }, { - key: "_cleanAria", - value: function _cleanAria() { - this.element.removeAttribute('aria-multiselectable'); - } }, { key: "_bindEvents", value: function _bindEvents() { diff --git a/lib/js/umd/handorgel.min.js b/lib/js/umd/handorgel.min.js index 60b86c7..94ddd14 100644 --- a/lib/js/umd/handorgel.min.js +++ b/lib/js/umd/handorgel.min.js @@ -1,2 +1,2 @@ /** handorgel v1.0.0, @license MIT */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).handorgel=t()}(this,function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var n=0;n0&&void 0!==arguments[0])||arguments[0];if(!this.expanded)if(this.handorgel.emitEvent("fold:open",[this]),this.expanded=!0,this.handorgel.options.collapsible||this.disable(),this._updateAria("button","aria-expanded"),this.header.classList.add(this.handorgel.options.headerOpenClass),this.content.classList.add(this.handorgel.options.contentOpenClass),e){var t=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(t,"px")}else this._opened()}},{key:"close",value:function(){var e=this,t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];if(this.expanded)if(this.handorgel.emitEvent("fold:close",[this]),this.expanded=!1,this.handorgel.options.collapsible||this.enable(),this._updateAria("button","aria-expanded"),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),t){var n=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(n,"px"),window.requestAnimationFrame(function(){window.requestAnimationFrame(function(){e.content.style.height="0px"})})}else this._closed()}},{key:"disable",value:function(){this.disabled=!0,this._updateAria("button","aria-disabled"),this.header.classList.add(this.handorgel.options.headerDisabledClass),this.content.classList.add(this.handorgel.options.contentDisabledClass)}},{key:"enable",value:function(){this.disabled=!1,this._updateAria("button","aria-disabled"),this.header.classList.remove(this.handorgel.options.headerDisabledClass),this.content.classList.remove(this.handorgel.options.contentDisabledClass)}},{key:"focus",value:function(){this.button.focus()}},{key:"blur",value:function(){this.button.blur()}},{key:"toggle",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.expanded?this.close(e):this.open(e)}},{key:"destroy",value:function(){this._unbindEvents(),this._cleanAria(),this.header.classList.remove(this.handorgel.options.headerOpenClass),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.content.style.height="0px",this.header.handorgelFold=null,this.content.handorgelFold=null,this.header.removeAttribute("id"),this.content.removeAttribute("id"),this.handorgel=null}},{key:"_opened",value:function(){this.content.style.height="auto",this.header.classList.add(this.handorgel.options.headerOpenedClass),this.content.classList.add(this.handorgel.options.contentOpenedClass),this.handorgel.emitEvent("fold:opened",[this])}},{key:"_closed",value:function(){this.header.classList.remove(this.handorgel.options.headerOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.handorgel.emitEvent("fold:closed",[this])}},{key:"_initialOpen",value:function(){var e=this;null===this.header.getAttribute(this.handorgel.options.initialOpenAttribute)&&null===this.content.getAttribute(this.handorgel.options.initialOpenAttribute)||(this.handorgel.options.initialOpenTransition?window.setTimeout(function(){e.open()},this.handorgel.options.initialOpenTransitionDelay):this.open(!1))}},{key:"_initialFocus",value:function(){null!==this.button.getAttribute("autofocus")&&this._handleFocus()}},{key:"_initAria",value:function(){this._updateAria("button"),this._updateAria("content")}},{key:"_cleanAria",value:function(){this._updateAria("button",null,!0),this._updateAria("content",null,!0)}},{key:"_updateAria",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.handorgel.options.ariaEnabled)if(t){var i=u[e][t].call(this);this[e].setAttribute(t,i)}else for(var s in u[e])if(u[e].hasOwnProperty(s))if(n)this[e].removeAttribute(s);else{var o=u[e][s].call(this);this[e].setAttribute(s,o)}}},{key:"_handleContentTransitionEnd",value:function(e){e.target===e.currentTarget&&"height"===e.propertyName&&(this.expanded?this._opened():this._closed())}},{key:"_handleFocus",value:function(){this.focused=!0,this.header.classList.add(this.handorgel.options.headerFocusClass),this.content.classList.add(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:focus",[this])}},{key:"_handleBlur",value:function(){this.focused=!1,this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:blur",[this])}},{key:"_handleButtonClick",value:function(e){this.focus(),this.disabled||this.toggle()}},{key:"_handleButtonKeydown",value:function(e){if(this.handorgel.options.keyboardInteraction){var t=null;switch(e.which){case f:t="next";break;case p:t="prev";break;case y:t="first";break;case g:t="last";break;case b:e.ctrlKey&&(t="next");break;case v:e.ctrlKey&&(t="prev")}t&&(e.preventDefault(),this.handorgel.focus(t))}}},{key:"_handleContentKeydown",value:function(e){if(this.handorgel.options.keyboardInteraction&&e.ctrlKey){var t=null;switch(e.which){case b:t="next";break;case v:t="prev"}t&&(e.preventDefault(),this.handorgel.focus(t))}}},{key:"_bindEvents",value:function(){for(var e in this._listeners={bFocus:["focus",this.button,this._handleFocus.bind(this)],bBlur:["blur",this.button,this._handleBlur.bind(this)],bClick:["click",this.button,this._handleButtonClick.bind(this)],bKeydown:["keydown",this.button,this._handleButtonKeydown.bind(this)],cKeydown:["keydown",this.content,this._handleContentKeydown.bind(this)],cTransition:["transitionend",this.content,this._handleContentTransitionEnd.bind(this)]},this._listeners)if(this._listeners.hasOwnProperty(e)){var t=this._listeners[e];t[1].addEventListener(t[0],t[2])}}},{key:"_unbindEvents",value:function(){for(var e in this._listeners)if(this._listeners.hasOwnProperty(e)){var t=this._listeners[e];t[1].removeEventListener(t[0],t[2])}}}]),t}(),m=0,O=function(t){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&s(e,t)}(l,d);var i=r(l);function l(t){var n,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e(this,l),n=i.call(this),t.handorgel?a(n):(n.element=t,n.element.handorgel=o(n),n.id="handorgel".concat(++m),n.element.setAttribute("id",n.id),n.folds=[],n.options=Object.assign({},l.defaultOptions,s),n._listeners={},n._bindEvents(),n._initAria(),n.update(),n)}return n(l,[{key:"update",value:function(){this.folds=[];for(var e="string"==typeof this.options.headerElements?this.element.querySelectorAll(this.options.headerElements):this.options.headerElements,t="string"==typeof this.options.contentElements?this.element.querySelectorAll(this.options.contentElements):this.options.contentElements,n=0;n0&&void 0!==arguments[0])||arguments[0];if(!this.expanded)if(this.handorgel.emitEvent("fold:open",[this]),this.expanded=!0,this.handorgel.options.collapsible||this.disable(),this._updateAria("button","aria-expanded"),this.header.classList.add(this.handorgel.options.headerOpenClass),this.content.classList.add(this.handorgel.options.contentOpenClass),e){var t=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(t,"px")}else this._opened()}},{key:"close",value:function(){var e=this,t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];if(this.expanded)if(this.handorgel.emitEvent("fold:close",[this]),this.expanded=!1,this.handorgel.options.collapsible||this.enable(),this._updateAria("button","aria-expanded"),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),t){var n=this.content.firstElementChild.offsetHeight;this.content.style.height="".concat(n,"px"),window.requestAnimationFrame(function(){window.requestAnimationFrame(function(){e.content.style.height="0px"})})}else this._closed()}},{key:"disable",value:function(){this.disabled=!0,this._updateAria("button","aria-disabled"),this.header.classList.add(this.handorgel.options.headerDisabledClass),this.content.classList.add(this.handorgel.options.contentDisabledClass)}},{key:"enable",value:function(){this.disabled=!1,this._updateAria("button","aria-disabled"),this.header.classList.remove(this.handorgel.options.headerDisabledClass),this.content.classList.remove(this.handorgel.options.contentDisabledClass)}},{key:"focus",value:function(){this.button.focus()}},{key:"blur",value:function(){this.button.blur()}},{key:"toggle",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.expanded?this.close(e):this.open(e)}},{key:"destroy",value:function(){this._unbindEvents(),this._cleanAria(),this.header.classList.remove(this.handorgel.options.headerOpenClass),this.header.classList.remove(this.handorgel.options.headerOpenedClass),this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenedClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.content.style.height="0px",this.header.handorgelFold=null,this.content.handorgelFold=null,this.header.removeAttribute("id"),this.content.removeAttribute("id"),this.handorgel=null}},{key:"_opened",value:function(){this.content.style.height="auto",this.header.classList.add(this.handorgel.options.headerOpenedClass),this.content.classList.add(this.handorgel.options.contentOpenedClass),this.handorgel.emitEvent("fold:opened",[this])}},{key:"_closed",value:function(){this.header.classList.remove(this.handorgel.options.headerOpenClass),this.content.classList.remove(this.handorgel.options.contentOpenClass),this.handorgel.emitEvent("fold:closed",[this])}},{key:"_initialOpen",value:function(){var e=this;null===this.header.getAttribute(this.handorgel.options.initialOpenAttribute)&&null===this.content.getAttribute(this.handorgel.options.initialOpenAttribute)||(this.handorgel.options.initialOpenTransition?window.setTimeout(function(){e.open()},this.handorgel.options.initialOpenTransitionDelay):this.open(!1))}},{key:"_initialFocus",value:function(){null!==this.button.getAttribute("autofocus")&&this._handleFocus()}},{key:"_initAria",value:function(){this._updateAria("button"),this._updateAria("content")}},{key:"_cleanAria",value:function(){this._updateAria("button",null,!0),this._updateAria("content",null,!0)}},{key:"_updateAria",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(this.handorgel.options.ariaEnabled)if(t){var i=u[e][t].call(this);this[e].setAttribute(t,i)}else for(var s in u[e])if(u[e].hasOwnProperty(s))if(n)this[e].removeAttribute(s);else{var o=u[e][s].call(this);this[e].setAttribute(s,o)}}},{key:"_handleContentTransitionEnd",value:function(e){e.target===e.currentTarget&&"height"===e.propertyName&&(this.expanded?this._opened():this._closed())}},{key:"_handleFocus",value:function(){this.focused=!0,this.header.classList.add(this.handorgel.options.headerFocusClass),this.content.classList.add(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:focus",[this])}},{key:"_handleBlur",value:function(){this.focused=!1,this.header.classList.remove(this.handorgel.options.headerFocusClass),this.content.classList.remove(this.handorgel.options.contentFocusClass),this.handorgel.emitEvent("fold:blur",[this])}},{key:"_handleButtonClick",value:function(e){this.focus(),this.disabled||this.toggle()}},{key:"_handleButtonKeydown",value:function(e){if(this.handorgel.options.keyboardInteraction){var t=null;switch(e.which){case f:t="next";break;case p:t="prev";break;case y:t="first";break;case g:t="last";break;case b:e.ctrlKey&&(t="next");break;case v:e.ctrlKey&&(t="prev")}t&&(e.preventDefault(),this.handorgel.focus(t))}}},{key:"_handleContentKeydown",value:function(e){if(this.handorgel.options.keyboardInteraction&&e.ctrlKey){var t=null;switch(e.which){case b:t="next";break;case v:t="prev"}t&&(e.preventDefault(),this.handorgel.focus(t))}}},{key:"_bindEvents",value:function(){for(var e in this._listeners={bFocus:["focus",this.button,this._handleFocus.bind(this)],bBlur:["blur",this.button,this._handleBlur.bind(this)],bClick:["click",this.button,this._handleButtonClick.bind(this)],bKeydown:["keydown",this.button,this._handleButtonKeydown.bind(this)],cKeydown:["keydown",this.content,this._handleContentKeydown.bind(this)],cTransition:["transitionend",this.content,this._handleContentTransitionEnd.bind(this)]},this._listeners)if(this._listeners.hasOwnProperty(e)){var t=this._listeners[e];t[1].addEventListener(t[0],t[2])}}},{key:"_unbindEvents",value:function(){for(var e in this._listeners)if(this._listeners.hasOwnProperty(e)){var t=this._listeners[e];t[1].removeEventListener(t[0],t[2])}}}]),t}(),m=0,O=function(t){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&s(e,t)}(l,d);var i=a(l);function l(t){var n,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e(this,l),n=i.call(this),t.handorgel?r(n):(n.element=t,n.element.handorgel=o(n),n.id="handorgel".concat(++m),n.element.setAttribute("id",n.id),n.folds=[],n.options=Object.assign({},l.defaultOptions,s),n._listeners={},n._bindEvents(),n.update(),n)}return n(l,[{key:"update",value:function(){this.folds=[];for(var e="string"==typeof this.options.headerElements?this.element.querySelectorAll(this.options.headerElements):this.options.headerElements,t="string"==typeof this.options.contentElements?this.element.querySelectorAll(this.options.contentElements):this.options.contentElements,n=0;n