New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@threespot/expand-toggle

Package Overview
Dependencies
Maintainers
3
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@threespot/expand-toggle - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

2

dist/compressed/expand-toggle.amd.min.js

@@ -1,1 +0,1 @@

define("expand-toggleLink",[],(function(){return e=[function(t,e,n){var i,r;i="undefined"!=typeof window?window:this,r=function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let n=this._events=this._events||{},i=n[t]=n[t]||[];return i.includes(e)||i.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[e]=!0,this},e.off=function(t,e){let n=this._events&&this._events[t];return n&&n.length?(-1!=(t=n.indexOf(e))&&n.splice(t,1),this):this},e.emitEvent=function(t,e){let n=this._events&&this._events[t];if(!n||!n.length)return this;n=n.slice(0),e=e||[];let i=this._onceEvents&&this._onceEvents[t];for(var r of n)i&&i[r]&&(this.off(t,r),delete i[r]),r.apply(this,e);return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t},t.exports?t.exports=r():i.EvEmitter=r()},function(t,e,n){"use strict";function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function a(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)}}function s(t,e){return(s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t})(t,e)}function l(t,e){if(e&&("object"===i(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");if(void 0!==(e=t))return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}n.r(e),n.d(e,"default",(function(){return d})),e=n(0);var d=function(t){var e=i;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);var n=function(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=u(t);return l(this,e?(n=u(this).constructor,Reflect.construct(i,arguments,n)):i.apply(this,arguments))}}(i);function i(t,e){var r;if(this instanceof i)return(r=n.call(this)).el=t,r.targetId=r.el.getAttribute("data-expands"),r.targetEl=document.getElementById(r.targetId),r.targetParentEl=r.targetEl.parentNode,r.targetEl?(r.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:"",shouldStartExpanded:!1,onReady:null},e),r.expandedClasses=r.el.getAttribute("data-expands-class")||r.options.expandedClasses,r.expandedClasses.length&&(-1<r.expandedClasses.indexOf(" ")?r.expandedClasses=r.expandedClasses.split(" ").filter((function(t){return t.length})):r.expandedClasses=[r.expandedClasses]),r.shouldToggleHeight=r.el.hasAttribute("data-expands-height")||r.options.shouldToggleHeight,r.shouldStartExpanded=r.el.hasAttribute("data-expanded")||r.options.shouldStartExpanded,r.hasActiveText=!1,r.textEl=r.el.querySelector("[data-expands-text]"),r.textEl&&(r.defaultToggleText=r.textEl.textContent,r.activeToggleText=r.textEl.getAttribute("data-expands-text")||r.options.activeToggleText,r.hasActiveText=!!r.activeToggleText.length),r.init(),r):(console.warn("Can’t find expandable target with id “".concat(r.targetId,"”")),l(r,!1));throw new TypeError("Cannot call a class as a function")}return e=i,(t=[{key:"init",value:function(){this.hasInitialized=!0,this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",this.shouldStartExpanded),this.targetEl.setAttribute("aria-hidden",!this.shouldStartExpanded),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.shouldToggleHeight&&this.heightToggleSetup(),this.clickHandler=this.toggle.bind(this),this.el.addEventListener("click",this.clickHandler),this.keydownHandler=this.keyboardEvents.bind(this),this.el.addEventListener("keydown",this.keydownHandler),"function"==typeof this.options.onReady&&this.options.onReady()}},{key:"debounce",value:function(t,e){var n=null;return function(){for(var i=arguments.length,r=new Array(i),o=0;o<i;o++)r[o]=arguments[o];window.clearTimeout(n),n=window.setTimeout((function(){t.apply(null,r)}),e)}}},{key:"destroy",value:function(){var t;this.hasInitialized=!1,this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler),window.removeEventListener("resize",this.resizeHandler),this.el.removeAttribute("aria-haspopup"),this.el.removeAttribute("aria-expanded"),this.targetEl.removeAttribute("aria-hidden"),this.targetEl.style.removeProperty("max-height"),"a"===this.el.tagName.toLowerCase()&&this.el.removeAttribute("role"),this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,r(this.expandedClasses)),(t=this.targetEl.classList).remove.apply(t,r(this.expandedClasses))),this.emitEvent("destroy")}},{key:"keyboardEvents",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"heightToggleSetup",value:function(){var t=this;window.requestAnimationFrame(this.updateExpandedHeight.bind(this)),this.resizeHandler=this.debounce((function(){t.hasInitialized&&window.requestAnimationFrame(t.updateExpandedHeight.bind(t))}),100).bind(this),window.addEventListener("resize",this.resizeHandler)}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=(t=((e=this.targetEl.cloneNode(!0)).style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: ".concat(t,"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important"),e.setAttribute("aria-hidden",!1),e.removeAttribute("id"),e.querySelectorAll("[name]")),t=(Array.prototype.forEach.call(t,(function(t){t.removeAttribute("name")})),this.targetParentEl.insertBefore(e,this.targetEl)),Math.round(parseFloat(t.offsetHeight)));this.targetParentEl.removeChild(t),this.targetEl.style.maxHeight=e+"px"}},{key:"expand",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((e=this.el.classList).add.apply(e,r(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,r(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1),this.emitEvent("expand",t)}},{key:"collapse",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((e=this.el.classList).remove.apply(e,r(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,r(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),this.emitEvent("collapse",t)}},{key:"toggle",value:function(t){t.preventDefault(),"true"===this.el.getAttribute("aria-expanded")?this.collapse(t):this.expand(t)}}])&&a(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),i}(n.n(e).a)}],n={},t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:i})},t.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(t.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(i,r,function(t){return e[t]}.bind(null,r));return i},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},t.p="",t(t.s=1);function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var e,n}));
define("expand-toggleLink",[],(function(){return e=[function(t,e,n){var r,i;r="undefined"!=typeof window?window:this,i=function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let n=this._events=this._events||{},r=n[t]=n[t]||[];return r.includes(e)||r.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[e]=!0,this},e.off=function(t,e){let n=this._events&&this._events[t];return n&&n.length?(-1!=(t=n.indexOf(e))&&n.splice(t,1),this):this},e.emitEvent=function(t,e){let n=this._events&&this._events[t];if(!n||!n.length)return this;n=n.slice(0),e=e||[];let r=this._onceEvents&&this._onceEvents[t];for(var i of n)r&&r[i]&&(this.off(t,i),delete r[i]),i.apply(this,e);return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t},t.exports?t.exports=i():r.EvEmitter=i()},function(t,e,n){"use strict";function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function s(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,function(t){return t=function(t,e){if("object"!==r(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0===n)return String(t);if("object"!==r(n=n.call(t,e)))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}(t,"string"),"symbol"===r(t)?t:String(t)}(i.key),i)}}function a(t,e){return(a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t})(t,e)}function l(t,e){if(e&&("object"===r(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");if(void 0!==(e=t))return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}n.r(e),n.d(e,"default",(function(){return d})),e=n(0);var d=function(t){var e=r;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&&a(e,t);var n=function(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=u(t);return l(this,e?(n=u(this).constructor,Reflect.construct(r,arguments,n)):r.apply(this,arguments))}}(r);function r(t,e){var i;if(this instanceof r)return(i=n.call(this)).el=t,i.targetId=i.el.getAttribute("data-expands"),i.targetEl=document.getElementById(i.targetId),i.targetParentEl=i.targetEl.parentNode,i.targetEl?(i.options=Object.assign({},{expandedClasses:"",activeToggleText:"",shouldStartExpanded:!1,onReady:null},e),i.expandedClasses=i.el.getAttribute("data-expands-class")||i.options.expandedClasses,i.expandedClasses.length&&(-1<i.expandedClasses.indexOf(" ")?i.expandedClasses=i.expandedClasses.split(" ").filter((function(t){return t.length})):i.expandedClasses=[i.expandedClasses]),i.shouldStartExpanded=i.el.hasAttribute("data-expanded")||i.options.shouldStartExpanded,i.hasActiveText=!1,i.textEl=i.el.querySelector("[data-expands-text]"),i.textEl&&(i.defaultToggleText=i.textEl.textContent,i.activeToggleText=i.textEl.getAttribute("data-expands-text")||i.options.activeToggleText,i.hasActiveText=!!i.activeToggleText.length),i.init(),i):(console.warn("Can’t find expandable target with id “".concat(i.targetId,"”")),l(i));throw new TypeError("Cannot call a class as a function")}return e=r,(t=[{key:"init",value:function(){this.hasInitialized=!0,this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",this.shouldStartExpanded),this.targetEl.setAttribute("aria-hidden",!this.shouldStartExpanded),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.clickHandler=this.toggle.bind(this),this.el.addEventListener("click",this.clickHandler),this.keydownHandler=this.keyboardEvents.bind(this),this.el.addEventListener("keydown",this.keydownHandler),"function"==typeof this.options.onReady&&this.options.onReady()}},{key:"destroy",value:function(){var t;this.hasInitialized=!1,this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler),this.el.removeAttribute("aria-haspopup"),this.el.removeAttribute("aria-expanded"),this.targetEl.removeAttribute("aria-hidden"),"a"===this.el.tagName.toLowerCase()&&this.el.removeAttribute("role"),this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,i(this.expandedClasses)),(t=this.targetEl.classList).remove.apply(t,i(this.expandedClasses))),this.emitEvent("destroy")}},{key:"keyboardEvents",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"expand",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((e=this.el.classList).add.apply(e,i(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,i(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1),this.emitEvent("expand",t)}},{key:"collapse",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((e=this.el.classList).remove.apply(e,i(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,i(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),this.emitEvent("collapse",t)}},{key:"toggle",value:function(t){t.preventDefault(),"true"===this.el.getAttribute("aria-expanded")?this.collapse(t):this.expand(t)}}])&&s(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),r}(n.n(e).a)}],n={},t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var i in e)t.d(r,i,function(t){return e[t]}.bind(null,i));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},t.p="",t(t.s=1);function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var e,n}));

2

dist/compressed/expand-toggle.m.min.js

@@ -1,1 +0,1 @@

module.exports=function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){var i,r;i="undefined"!=typeof window?window:this,r=function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let n=this._events=this._events||{},i=n[t]=n[t]||[];return i.includes(e)||i.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[e]=!0,this},e.off=function(t,e){let n=this._events&&this._events[t];return n&&n.length?(-1!=(t=n.indexOf(e))&&n.splice(t,1),this):this},e.emitEvent=function(t,e){let n=this._events&&this._events[t];if(!n||!n.length)return this;n=n.slice(0),e=e||[];let i=this._onceEvents&&this._onceEvents[t];for(var r of n)i&&i[r]&&(this.off(t,r),delete i[r]),r.apply(this,e);return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t},t.exports?t.exports=r():i.EvEmitter=r()},function(t,e,n){"use strict";function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function a(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)}}function s(t,e){return(s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t})(t,e)}function l(t,e){if(e&&("object"===i(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");if(void 0!==(e=t))return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}n.r(e),n.d(e,"default",(function(){return d})),e=n(0);var d=function(t){var e=i;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);var n=function(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=u(t);return l(this,e?(n=u(this).constructor,Reflect.construct(i,arguments,n)):i.apply(this,arguments))}}(i);function i(t,e){var r;if(this instanceof i)return(r=n.call(this)).el=t,r.targetId=r.el.getAttribute("data-expands"),r.targetEl=document.getElementById(r.targetId),r.targetParentEl=r.targetEl.parentNode,r.targetEl?(r.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:"",shouldStartExpanded:!1,onReady:null},e),r.expandedClasses=r.el.getAttribute("data-expands-class")||r.options.expandedClasses,r.expandedClasses.length&&(-1<r.expandedClasses.indexOf(" ")?r.expandedClasses=r.expandedClasses.split(" ").filter((function(t){return t.length})):r.expandedClasses=[r.expandedClasses]),r.shouldToggleHeight=r.el.hasAttribute("data-expands-height")||r.options.shouldToggleHeight,r.shouldStartExpanded=r.el.hasAttribute("data-expanded")||r.options.shouldStartExpanded,r.hasActiveText=!1,r.textEl=r.el.querySelector("[data-expands-text]"),r.textEl&&(r.defaultToggleText=r.textEl.textContent,r.activeToggleText=r.textEl.getAttribute("data-expands-text")||r.options.activeToggleText,r.hasActiveText=!!r.activeToggleText.length),r.init(),r):(console.warn("Can’t find expandable target with id “".concat(r.targetId,"”")),l(r,!1));throw new TypeError("Cannot call a class as a function")}return e=i,(t=[{key:"init",value:function(){this.hasInitialized=!0,this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",this.shouldStartExpanded),this.targetEl.setAttribute("aria-hidden",!this.shouldStartExpanded),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.shouldToggleHeight&&this.heightToggleSetup(),this.clickHandler=this.toggle.bind(this),this.el.addEventListener("click",this.clickHandler),this.keydownHandler=this.keyboardEvents.bind(this),this.el.addEventListener("keydown",this.keydownHandler),"function"==typeof this.options.onReady&&this.options.onReady()}},{key:"debounce",value:function(t,e){var n=null;return function(){for(var i=arguments.length,r=new Array(i),o=0;o<i;o++)r[o]=arguments[o];window.clearTimeout(n),n=window.setTimeout((function(){t.apply(null,r)}),e)}}},{key:"destroy",value:function(){var t;this.hasInitialized=!1,this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler),window.removeEventListener("resize",this.resizeHandler),this.el.removeAttribute("aria-haspopup"),this.el.removeAttribute("aria-expanded"),this.targetEl.removeAttribute("aria-hidden"),this.targetEl.style.removeProperty("max-height"),"a"===this.el.tagName.toLowerCase()&&this.el.removeAttribute("role"),this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,r(this.expandedClasses)),(t=this.targetEl.classList).remove.apply(t,r(this.expandedClasses))),this.emitEvent("destroy")}},{key:"keyboardEvents",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"heightToggleSetup",value:function(){var t=this;window.requestAnimationFrame(this.updateExpandedHeight.bind(this)),this.resizeHandler=this.debounce((function(){t.hasInitialized&&window.requestAnimationFrame(t.updateExpandedHeight.bind(t))}),100).bind(this),window.addEventListener("resize",this.resizeHandler)}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=(t=((e=this.targetEl.cloneNode(!0)).style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: ".concat(t,"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important"),e.setAttribute("aria-hidden",!1),e.removeAttribute("id"),e.querySelectorAll("[name]")),t=(Array.prototype.forEach.call(t,(function(t){t.removeAttribute("name")})),this.targetParentEl.insertBefore(e,this.targetEl)),Math.round(parseFloat(t.offsetHeight)));this.targetParentEl.removeChild(t),this.targetEl.style.maxHeight=e+"px"}},{key:"expand",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((e=this.el.classList).add.apply(e,r(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,r(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1),this.emitEvent("expand",t)}},{key:"collapse",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((e=this.el.classList).remove.apply(e,r(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,r(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),this.emitEvent("collapse",t)}},{key:"toggle",value:function(t){t.preventDefault(),"true"===this.el.getAttribute("aria-expanded")?this.collapse(t):this.expand(t)}}])&&a(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),i}(n.n(e).a)}]);
module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){var r,i;r="undefined"!=typeof window?window:this,i=function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let n=this._events=this._events||{},r=n[t]=n[t]||[];return r.includes(e)||r.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[e]=!0,this},e.off=function(t,e){let n=this._events&&this._events[t];return n&&n.length?(-1!=(t=n.indexOf(e))&&n.splice(t,1),this):this},e.emitEvent=function(t,e){let n=this._events&&this._events[t];if(!n||!n.length)return this;n=n.slice(0),e=e||[];let r=this._onceEvents&&this._onceEvents[t];for(var i of n)r&&r[i]&&(this.off(t,i),delete r[i]),i.apply(this,e);return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t},t.exports?t.exports=i():r.EvEmitter=i()},function(t,e,n){"use strict";function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function s(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,function(t){return t=function(t,e){if("object"!==r(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0===n)return String(t);if("object"!==r(n=n.call(t,e)))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}(t,"string"),"symbol"===r(t)?t:String(t)}(i.key),i)}}function a(t,e){return(a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t})(t,e)}function l(t,e){if(e&&("object"===r(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");if(void 0!==(e=t))return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}n.r(e),n.d(e,"default",(function(){return d})),e=n(0);var d=function(t){var e=r;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&&a(e,t);var n=function(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=u(t);return l(this,e?(n=u(this).constructor,Reflect.construct(r,arguments,n)):r.apply(this,arguments))}}(r);function r(t,e){var i;if(this instanceof r)return(i=n.call(this)).el=t,i.targetId=i.el.getAttribute("data-expands"),i.targetEl=document.getElementById(i.targetId),i.targetParentEl=i.targetEl.parentNode,i.targetEl?(i.options=Object.assign({},{expandedClasses:"",activeToggleText:"",shouldStartExpanded:!1,onReady:null},e),i.expandedClasses=i.el.getAttribute("data-expands-class")||i.options.expandedClasses,i.expandedClasses.length&&(-1<i.expandedClasses.indexOf(" ")?i.expandedClasses=i.expandedClasses.split(" ").filter((function(t){return t.length})):i.expandedClasses=[i.expandedClasses]),i.shouldStartExpanded=i.el.hasAttribute("data-expanded")||i.options.shouldStartExpanded,i.hasActiveText=!1,i.textEl=i.el.querySelector("[data-expands-text]"),i.textEl&&(i.defaultToggleText=i.textEl.textContent,i.activeToggleText=i.textEl.getAttribute("data-expands-text")||i.options.activeToggleText,i.hasActiveText=!!i.activeToggleText.length),i.init(),i):(console.warn("Can’t find expandable target with id “".concat(i.targetId,"”")),l(i));throw new TypeError("Cannot call a class as a function")}return e=r,(t=[{key:"init",value:function(){this.hasInitialized=!0,this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",this.shouldStartExpanded),this.targetEl.setAttribute("aria-hidden",!this.shouldStartExpanded),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.clickHandler=this.toggle.bind(this),this.el.addEventListener("click",this.clickHandler),this.keydownHandler=this.keyboardEvents.bind(this),this.el.addEventListener("keydown",this.keydownHandler),"function"==typeof this.options.onReady&&this.options.onReady()}},{key:"destroy",value:function(){var t;this.hasInitialized=!1,this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler),this.el.removeAttribute("aria-haspopup"),this.el.removeAttribute("aria-expanded"),this.targetEl.removeAttribute("aria-hidden"),"a"===this.el.tagName.toLowerCase()&&this.el.removeAttribute("role"),this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,i(this.expandedClasses)),(t=this.targetEl.classList).remove.apply(t,i(this.expandedClasses))),this.emitEvent("destroy")}},{key:"keyboardEvents",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"expand",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((e=this.el.classList).add.apply(e,i(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,i(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1),this.emitEvent("expand",t)}},{key:"collapse",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((e=this.el.classList).remove.apply(e,i(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,i(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),this.emitEvent("collapse",t)}},{key:"toggle",value:function(t){t.preventDefault(),"true"===this.el.getAttribute("aria-expanded")?this.collapse(t):this.expand(t)}}])&&s(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),r}(n.n(e).a)}]);

2

dist/compressed/expand-toggle.umd.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["expand-toggleLink"]=e():t["expand-toggleLink"]=e()}(window,(function(){return e=[function(t,e,n){var i,r;i="undefined"!=typeof window?window:this,r=function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let n=this._events=this._events||{},i=n[t]=n[t]||[];return i.includes(e)||i.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[e]=!0,this},e.off=function(t,e){let n=this._events&&this._events[t];return n&&n.length?(-1!=(t=n.indexOf(e))&&n.splice(t,1),this):this},e.emitEvent=function(t,e){let n=this._events&&this._events[t];if(!n||!n.length)return this;n=n.slice(0),e=e||[];let i=this._onceEvents&&this._onceEvents[t];for(var r of n)i&&i[r]&&(this.off(t,r),delete i[r]),r.apply(this,e);return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t},t.exports?t.exports=r():i.EvEmitter=r()},function(t,e,n){"use strict";function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function a(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)}}function s(t,e){return(s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t})(t,e)}function l(t,e){if(e&&("object"===i(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");if(void 0!==(e=t))return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function d(t){return(d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}n.r(e),n.d(e,"default",(function(){return u})),e=n(0);var u=function(t){var e=i;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);var n=function(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,i=d(t);return l(this,e?(n=d(this).constructor,Reflect.construct(i,arguments,n)):i.apply(this,arguments))}}(i);function i(t,e){var r;if(this instanceof i)return(r=n.call(this)).el=t,r.targetId=r.el.getAttribute("data-expands"),r.targetEl=document.getElementById(r.targetId),r.targetParentEl=r.targetEl.parentNode,r.targetEl?(r.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:"",shouldStartExpanded:!1,onReady:null},e),r.expandedClasses=r.el.getAttribute("data-expands-class")||r.options.expandedClasses,r.expandedClasses.length&&(-1<r.expandedClasses.indexOf(" ")?r.expandedClasses=r.expandedClasses.split(" ").filter((function(t){return t.length})):r.expandedClasses=[r.expandedClasses]),r.shouldToggleHeight=r.el.hasAttribute("data-expands-height")||r.options.shouldToggleHeight,r.shouldStartExpanded=r.el.hasAttribute("data-expanded")||r.options.shouldStartExpanded,r.hasActiveText=!1,r.textEl=r.el.querySelector("[data-expands-text]"),r.textEl&&(r.defaultToggleText=r.textEl.textContent,r.activeToggleText=r.textEl.getAttribute("data-expands-text")||r.options.activeToggleText,r.hasActiveText=!!r.activeToggleText.length),r.init(),r):(console.warn("Can’t find expandable target with id “".concat(r.targetId,"”")),l(r,!1));throw new TypeError("Cannot call a class as a function")}return e=i,(t=[{key:"init",value:function(){this.hasInitialized=!0,this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",this.shouldStartExpanded),this.targetEl.setAttribute("aria-hidden",!this.shouldStartExpanded),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.shouldToggleHeight&&this.heightToggleSetup(),this.clickHandler=this.toggle.bind(this),this.el.addEventListener("click",this.clickHandler),this.keydownHandler=this.keyboardEvents.bind(this),this.el.addEventListener("keydown",this.keydownHandler),"function"==typeof this.options.onReady&&this.options.onReady()}},{key:"debounce",value:function(t,e){var n=null;return function(){for(var i=arguments.length,r=new Array(i),o=0;o<i;o++)r[o]=arguments[o];window.clearTimeout(n),n=window.setTimeout((function(){t.apply(null,r)}),e)}}},{key:"destroy",value:function(){var t;this.hasInitialized=!1,this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler),window.removeEventListener("resize",this.resizeHandler),this.el.removeAttribute("aria-haspopup"),this.el.removeAttribute("aria-expanded"),this.targetEl.removeAttribute("aria-hidden"),this.targetEl.style.removeProperty("max-height"),"a"===this.el.tagName.toLowerCase()&&this.el.removeAttribute("role"),this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,r(this.expandedClasses)),(t=this.targetEl.classList).remove.apply(t,r(this.expandedClasses))),this.emitEvent("destroy")}},{key:"keyboardEvents",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"heightToggleSetup",value:function(){var t=this;window.requestAnimationFrame(this.updateExpandedHeight.bind(this)),this.resizeHandler=this.debounce((function(){t.hasInitialized&&window.requestAnimationFrame(t.updateExpandedHeight.bind(t))}),100).bind(this),window.addEventListener("resize",this.resizeHandler)}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=(t=((e=this.targetEl.cloneNode(!0)).style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: ".concat(t,"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important"),e.setAttribute("aria-hidden",!1),e.removeAttribute("id"),e.querySelectorAll("[name]")),t=(Array.prototype.forEach.call(t,(function(t){t.removeAttribute("name")})),this.targetParentEl.insertBefore(e,this.targetEl)),Math.round(parseFloat(t.offsetHeight)));this.targetParentEl.removeChild(t),this.targetEl.style.maxHeight=e+"px"}},{key:"expand",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((e=this.el.classList).add.apply(e,r(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,r(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1),this.emitEvent("expand",t)}},{key:"collapse",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((e=this.el.classList).remove.apply(e,r(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,r(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),this.emitEvent("collapse",t)}},{key:"toggle",value:function(t){t.preventDefault(),"true"===this.el.getAttribute("aria-expanded")?this.collapse(t):this.expand(t)}}])&&a(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),i}(n.n(e).a)}],n={},t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:i})},t.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(t.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(i,r,function(t){return e[t]}.bind(null,r));return i},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},t.p="",t(t.s=1);function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var e,n}));
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["expand-toggleLink"]=e():t["expand-toggleLink"]=e()}(window,(function(){return e=[function(t,e,n){var r,i;r="undefined"!=typeof window?window:this,i=function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let n=this._events=this._events||{},r=n[t]=n[t]||[];return r.includes(e)||r.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let n=this._onceEvents=this._onceEvents||{};return(n[t]=n[t]||{})[e]=!0,this},e.off=function(t,e){let n=this._events&&this._events[t];return n&&n.length?(-1!=(t=n.indexOf(e))&&n.splice(t,1),this):this},e.emitEvent=function(t,e){let n=this._events&&this._events[t];if(!n||!n.length)return this;n=n.slice(0),e=e||[];let r=this._onceEvents&&this._onceEvents[t];for(var i of n)r&&r[i]&&(this.off(t,i),delete r[i]),i.apply(this,e);return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t},t.exports?t.exports=i():r.EvEmitter=i()},function(t,e,n){"use strict";function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function s(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,function(t){return t=function(t,e){if("object"!==r(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0===n)return String(t);if("object"!==r(n=n.call(t,e)))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}(t,"string"),"symbol"===r(t)?t:String(t)}(i.key),i)}}function a(t,e){return(a=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t})(t,e)}function l(t,e){if(e&&("object"===r(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");if(void 0!==(e=t))return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}function u(t){return(u=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}n.r(e),n.d(e,"default",(function(){return d})),e=n(0);var d=function(t){var e=r;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&&a(e,t);var n=function(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=u(t);return l(this,e?(n=u(this).constructor,Reflect.construct(r,arguments,n)):r.apply(this,arguments))}}(r);function r(t,e){var i;if(this instanceof r)return(i=n.call(this)).el=t,i.targetId=i.el.getAttribute("data-expands"),i.targetEl=document.getElementById(i.targetId),i.targetParentEl=i.targetEl.parentNode,i.targetEl?(i.options=Object.assign({},{expandedClasses:"",activeToggleText:"",shouldStartExpanded:!1,onReady:null},e),i.expandedClasses=i.el.getAttribute("data-expands-class")||i.options.expandedClasses,i.expandedClasses.length&&(-1<i.expandedClasses.indexOf(" ")?i.expandedClasses=i.expandedClasses.split(" ").filter((function(t){return t.length})):i.expandedClasses=[i.expandedClasses]),i.shouldStartExpanded=i.el.hasAttribute("data-expanded")||i.options.shouldStartExpanded,i.hasActiveText=!1,i.textEl=i.el.querySelector("[data-expands-text]"),i.textEl&&(i.defaultToggleText=i.textEl.textContent,i.activeToggleText=i.textEl.getAttribute("data-expands-text")||i.options.activeToggleText,i.hasActiveText=!!i.activeToggleText.length),i.init(),i):(console.warn("Can’t find expandable target with id “".concat(i.targetId,"”")),l(i));throw new TypeError("Cannot call a class as a function")}return e=r,(t=[{key:"init",value:function(){this.hasInitialized=!0,this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",this.shouldStartExpanded),this.targetEl.setAttribute("aria-hidden",!this.shouldStartExpanded),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.clickHandler=this.toggle.bind(this),this.el.addEventListener("click",this.clickHandler),this.keydownHandler=this.keyboardEvents.bind(this),this.el.addEventListener("keydown",this.keydownHandler),"function"==typeof this.options.onReady&&this.options.onReady()}},{key:"destroy",value:function(){var t;this.hasInitialized=!1,this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler),this.el.removeAttribute("aria-haspopup"),this.el.removeAttribute("aria-expanded"),this.targetEl.removeAttribute("aria-hidden"),"a"===this.el.tagName.toLowerCase()&&this.el.removeAttribute("role"),this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,i(this.expandedClasses)),(t=this.targetEl.classList).remove.apply(t,i(this.expandedClasses))),this.emitEvent("destroy")}},{key:"keyboardEvents",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"expand",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((e=this.el.classList).add.apply(e,i(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,i(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1),this.emitEvent("expand",t)}},{key:"collapse",value:function(t){var e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((e=this.el.classList).remove.apply(e,i(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,i(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),this.emitEvent("collapse",t)}},{key:"toggle",value:function(t){t.preventDefault(),"true"===this.el.getAttribute("aria-expanded")?this.collapse(t):this.expand(t)}}])&&s(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),r}(n.n(e).a)}],n={},t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var i in e)t.d(r,i,function(t){return e[t]}.bind(null,i));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},t.p="",t(t.s=1);function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var e,n}));

2

dist/expand-toggle.amd.js

@@ -97,3 +97,3 @@ define("expand-toggleLink", [], function() { return /******/ (function(modules) { // webpackBootstrap

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {boolean} [opts.shouldToggleHeight=false] - Whether or not to animate height\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n _inherits(ExpandToggle, _EventEmitter);\n\n var _super = _createSuper(ExpandToggle);\n\n function ExpandToggle(el, opts) {\n var _this;\n\n _classCallCheck(this, ExpandToggle);\n\n // Have to call super() first before referencing “this” since we’re extending EventEmitter\n // https://stackoverflow.com/a/43591507/673457\n _this = _super.call(this);\n _this.el = el;\n _this.targetId = _this.el.getAttribute(\"data-expands\");\n _this.targetEl = document.getElementById(_this.targetId);\n _this.targetParentEl = _this.targetEl.parentNode; // Ensure target element exist before initializing\n\n if (!_this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n return _possibleConstructorReturn(_this, false);\n } // Use Object.assign() to merge “opts” object with default values in this.options\n\n\n _this.options = Object.assign({}, {\n expandedClasses: \"\",\n // string, accepts multiple space-separated classes\n shouldToggleHeight: false,\n // should target element’s height be animated using max-height\n activeToggleText: \"\",\n // expanded state toggle button text\n shouldStartExpanded: false,\n // component starts expanded on init\n onReady: null // ready callback function\n\n }, opts); // Check for custom expanded class(es)\n\n _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n\n if (_this.expandedClasses.length) {\n // Check if active class string contains multiple classes\n if (_this.expandedClasses.indexOf(\" \") > -1) {\n // Convert to array and remove any empty string values\n // caused by having multiple spaces in a row.\n _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n return n.length;\n });\n } else {\n // We still need to convert a single active class to an array\n // so we can use the spread syntax later in classList.add()\n _this.expandedClasses = [_this.expandedClasses];\n }\n } // Check if height should be animated\n\n\n _this.shouldToggleHeight = _this.el.hasAttribute(\"data-expands-height\") || _this.options.shouldToggleHeight; // Check if component should start expanded\n\n _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded; // Check for custom toggle button text to use when expanded\n\n _this.hasActiveText = false;\n _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n\n if (_this.textEl) {\n _this.defaultToggleText = _this.textEl.textContent;\n _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n _this.hasActiveText = !!_this.activeToggleText.length;\n }\n\n _this.init();\n\n return _this;\n }\n\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Store state to avoid calling resize handler after component has been destroyed\n this.hasInitialized = true; // Accessibility setup\n\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded); // Omit “aria-controls” for now\n // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n // this.el.setAttribute(\"aria-controls\", this.targetId);\n\n this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n } // Click event listener on toggle button\n // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n // https://stackoverflow.com/a/22870717/673457\n\n\n this.clickHandler = this.toggle.bind(this);\n this.el.addEventListener(\"click\", this.clickHandler); // Keyboard listeners on toggle button\n\n this.keydownHandler = this.keyboardEvents.bind(this);\n this.el.addEventListener(\"keydown\", this.keydownHandler); // Check for onReady callback\n\n if (typeof this.options.onReady === \"function\") {\n this.options.onReady();\n }\n } // Debounce function\n // https://www.joshwcomeau.com/snippets/javascript/debounce/\n\n }, {\n key: \"debounce\",\n value: function debounce(callback, wait) {\n var timeoutId = null;\n return function () {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n window.clearTimeout(timeoutId);\n timeoutId = window.setTimeout(function () {\n callback.apply(null, args);\n }, wait);\n };\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.hasInitialized = false; // Remove event listeners\n\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n window.removeEventListener(\"resize\", this.resizeHandler); // Remove aria attributes\n\n this.el.removeAttribute(\"aria-haspopup\");\n this.el.removeAttribute(\"aria-expanded\");\n this.targetEl.removeAttribute(\"aria-hidden\");\n this.targetEl.style.removeProperty(\"max-height\");\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.removeAttribute(\"role\");\n } // Reset toggle text\n\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n } // Remove custom classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList, _this$targetEl$classL;\n\n (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n }\n\n this.emitEvent(\"destroy\");\n }\n }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(event) {\n // Expand with down arrow\n if (event.keyCode == 40) {\n this.expand();\n } else if (event.keyCode == 38 || event.keyCode == 27) {\n // Close with up arrow or escape key\n this.collapse();\n }\n }\n }, {\n key: \"heightToggleSetup\",\n value: function heightToggleSetup() {\n var _this2 = this;\n\n // Set max-height to the expanded height so we can animate it.\n window.requestAnimationFrame(this.updateExpandedHeight.bind(this));\n this.resizeHandler = this.debounce(function () {\n // Due to debounce() it’s possible for this to run after destroy() has been called.\n // To avoid this edge case, check “this.hasInitialized” first.\n if (_this2.hasInitialized) {\n window.requestAnimationFrame(_this2.updateExpandedHeight.bind(_this2));\n }\n }, 100).bind(this); // Update target element’s max-height on resize\n\n window.addEventListener(\"resize\", this.resizeHandler);\n } // Set inline “max-height” on target element equal to its expanded height\n // (will be overridden by CSS when aria-hidden=\"true\" is set)\n //\n // This technique works by creating an absolutely-positioned invisible clone of the target\n // element and calculating its height. This avoids any relayout that would otherwise occur\n // if the element was briefly expanded so we could measure it.\n //\n // Note: We’re using CSS to transition max-height instead jQuery’s slideToggle(),\n // or another 3rd-party lib like Velocity.js, to avoid loading a large lib.\n\n }, {\n key: \"updateExpandedHeight\",\n value: function updateExpandedHeight() {\n // Note: Element.scrollHeight also gets an element’s height, including hidden overflow content,\n // but fails when there are nested expandables.\n // this.targetEl.style.maxHeight = this.targetEl.scrollHeight + \"px\";\n // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth)); // Create clone of node\n\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n\n cloneEl.style.cssText = \"max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: \".concat(nodeWidth, \"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important\"); // Update “aria-hidden” attribute\n\n cloneEl.setAttribute(\"aria-hidden\", false); // Remove id just to be safe\n\n cloneEl.removeAttribute(\"id\"); // Remove “name” attributes to prevent resetting checkbox or radio elements\n\n var childElsWithId = cloneEl.querySelectorAll(\"[name]\"); // IE-friendly way of iterating over a NodeList\n\n Array.prototype.forEach.call(childElsWithId, function (el) {\n el.removeAttribute(\"name\");\n }); // Append clone to document, save as new let so we can remove it later\n\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl); // Calculate height\n\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight)); // Remove cloned node to clean up after ourselves\n\n this.targetParentEl.removeChild(newEl); // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.activeToggleText;\n } // Add classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList2, _this$targetEl$classL2;\n\n (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n } // Update aria attributes\n\n\n this.el.setAttribute(\"aria-expanded\", true);\n this.targetEl.setAttribute(\"aria-hidden\", false); // Emit event and include original event as an argument\n\n this.emitEvent(\"expand\", event);\n }\n }, {\n key: \"collapse\",\n value: function collapse(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n } // Remove classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList3, _this$targetEl$classL3;\n\n (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n } // Update aria attributes\n\n\n this.el.setAttribute(\"aria-expanded\", false);\n this.targetEl.setAttribute(\"aria-hidden\", true); // Emit event and include original event as an argument\n\n this.emitEvent(\"collapse\", event);\n }\n }, {\n key: \"toggle\",\n value: function toggle(event) {\n // Prevent default in case toggle element is a link instead of a button\n event.preventDefault();\n\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse(event);\n } else {\n this.expand(event);\n }\n }\n }]);\n\n return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n _inherits(ExpandToggle, _EventEmitter);\n var _super = _createSuper(ExpandToggle);\n function ExpandToggle(el, opts) {\n var _this;\n _classCallCheck(this, ExpandToggle);\n // Have to call super() first before referencing “this” since we’re extending EventEmitter\n // https://stackoverflow.com/a/43591507/673457\n _this = _super.call(this);\n _this.el = el;\n _this.targetId = _this.el.getAttribute(\"data-expands\");\n _this.targetEl = document.getElementById(_this.targetId);\n _this.targetParentEl = _this.targetEl.parentNode;\n\n // Ensure target element exist before initializing\n if (!_this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n return _possibleConstructorReturn(_this);\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n _this.options = Object.assign({}, {\n expandedClasses: \"\",\n // string, accepts multiple space-separated classes\n activeToggleText: \"\",\n // expanded state toggle button text\n shouldStartExpanded: false,\n // component starts expanded on init\n onReady: null // ready callback function\n }, opts);\n\n // Check for custom expanded class(es)\n _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n if (_this.expandedClasses.length) {\n // Check if active class string contains multiple classes\n if (_this.expandedClasses.indexOf(\" \") > -1) {\n // Convert to array and remove any empty string values\n // caused by having multiple spaces in a row.\n _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n return n.length;\n });\n } else {\n // We still need to convert a single active class to an array\n // so we can use the spread syntax later in classList.add()\n _this.expandedClasses = [_this.expandedClasses];\n }\n }\n\n // Check if component should start expanded\n _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n // Check for custom toggle button text to use when expanded\n _this.hasActiveText = false;\n _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n if (_this.textEl) {\n _this.defaultToggleText = _this.textEl.textContent;\n _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n _this.hasActiveText = !!_this.activeToggleText.length;\n }\n _this.init();\n return _this;\n }\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Store state to avoid calling resize handler after component has been destroyed\n this.hasInitialized = true;\n\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n // Omit “aria-controls” for now\n // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n // this.el.setAttribute(\"aria-controls\", this.targetId);\n this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n // Click event listener on toggle button\n // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n // https://stackoverflow.com/a/22870717/673457\n this.clickHandler = this.toggle.bind(this);\n this.el.addEventListener(\"click\", this.clickHandler);\n\n // Keyboard listeners on toggle button\n this.keydownHandler = this.keyboardEvents.bind(this);\n this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n // Check for onReady callback\n if (typeof this.options.onReady === \"function\") {\n this.options.onReady();\n }\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.hasInitialized = false;\n\n // Remove event listeners\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n // Remove aria attributes\n this.el.removeAttribute(\"aria-haspopup\");\n this.el.removeAttribute(\"aria-expanded\");\n this.targetEl.removeAttribute(\"aria-hidden\");\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.removeAttribute(\"role\");\n }\n\n // Reset toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n // Remove custom classes\n if (this.expandedClasses.length) {\n var _this$el$classList, _this$targetEl$classL;\n (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n }\n this.emitEvent(\"destroy\");\n }\n }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(event) {\n // Expand with down arrow\n if (event.keyCode == 40) {\n this.expand();\n } else if (event.keyCode == 38 || event.keyCode == 27) {\n // Close with up arrow or escape key\n this.collapse();\n }\n }\n }, {\n key: \"expand\",\n value: function expand(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.activeToggleText;\n }\n\n // Add classes\n if (this.expandedClasses.length) {\n var _this$el$classList2, _this$targetEl$classL2;\n (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n }\n\n // Update aria attributes\n this.el.setAttribute(\"aria-expanded\", true);\n this.targetEl.setAttribute(\"aria-hidden\", false);\n\n // Emit event and include original event as an argument\n this.emitEvent(\"expand\", event);\n }\n }, {\n key: \"collapse\",\n value: function collapse(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n // Remove classes\n if (this.expandedClasses.length) {\n var _this$el$classList3, _this$targetEl$classL3;\n (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n }\n\n // Update aria attributes\n this.el.setAttribute(\"aria-expanded\", false);\n this.targetEl.setAttribute(\"aria-hidden\", true);\n\n // Emit event and include original event as an argument\n this.emitEvent(\"collapse\", event);\n }\n }, {\n key: \"toggle\",\n value: function toggle(event) {\n // Prevent default in case toggle element is a link instead of a button\n event.preventDefault();\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse(event);\n } else {\n this.expand(event);\n }\n }\n }]);\n return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");

@@ -100,0 +100,0 @@ /***/ }),

2

dist/expand-toggle.m.js

@@ -98,3 +98,3 @@ module.exports =

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {boolean} [opts.shouldToggleHeight=false] - Whether or not to animate height\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n _inherits(ExpandToggle, _EventEmitter);\n\n var _super = _createSuper(ExpandToggle);\n\n function ExpandToggle(el, opts) {\n var _this;\n\n _classCallCheck(this, ExpandToggle);\n\n // Have to call super() first before referencing “this” since we’re extending EventEmitter\n // https://stackoverflow.com/a/43591507/673457\n _this = _super.call(this);\n _this.el = el;\n _this.targetId = _this.el.getAttribute(\"data-expands\");\n _this.targetEl = document.getElementById(_this.targetId);\n _this.targetParentEl = _this.targetEl.parentNode; // Ensure target element exist before initializing\n\n if (!_this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n return _possibleConstructorReturn(_this, false);\n } // Use Object.assign() to merge “opts” object with default values in this.options\n\n\n _this.options = Object.assign({}, {\n expandedClasses: \"\",\n // string, accepts multiple space-separated classes\n shouldToggleHeight: false,\n // should target element’s height be animated using max-height\n activeToggleText: \"\",\n // expanded state toggle button text\n shouldStartExpanded: false,\n // component starts expanded on init\n onReady: null // ready callback function\n\n }, opts); // Check for custom expanded class(es)\n\n _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n\n if (_this.expandedClasses.length) {\n // Check if active class string contains multiple classes\n if (_this.expandedClasses.indexOf(\" \") > -1) {\n // Convert to array and remove any empty string values\n // caused by having multiple spaces in a row.\n _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n return n.length;\n });\n } else {\n // We still need to convert a single active class to an array\n // so we can use the spread syntax later in classList.add()\n _this.expandedClasses = [_this.expandedClasses];\n }\n } // Check if height should be animated\n\n\n _this.shouldToggleHeight = _this.el.hasAttribute(\"data-expands-height\") || _this.options.shouldToggleHeight; // Check if component should start expanded\n\n _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded; // Check for custom toggle button text to use when expanded\n\n _this.hasActiveText = false;\n _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n\n if (_this.textEl) {\n _this.defaultToggleText = _this.textEl.textContent;\n _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n _this.hasActiveText = !!_this.activeToggleText.length;\n }\n\n _this.init();\n\n return _this;\n }\n\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Store state to avoid calling resize handler after component has been destroyed\n this.hasInitialized = true; // Accessibility setup\n\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded); // Omit “aria-controls” for now\n // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n // this.el.setAttribute(\"aria-controls\", this.targetId);\n\n this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n } // Click event listener on toggle button\n // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n // https://stackoverflow.com/a/22870717/673457\n\n\n this.clickHandler = this.toggle.bind(this);\n this.el.addEventListener(\"click\", this.clickHandler); // Keyboard listeners on toggle button\n\n this.keydownHandler = this.keyboardEvents.bind(this);\n this.el.addEventListener(\"keydown\", this.keydownHandler); // Check for onReady callback\n\n if (typeof this.options.onReady === \"function\") {\n this.options.onReady();\n }\n } // Debounce function\n // https://www.joshwcomeau.com/snippets/javascript/debounce/\n\n }, {\n key: \"debounce\",\n value: function debounce(callback, wait) {\n var timeoutId = null;\n return function () {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n window.clearTimeout(timeoutId);\n timeoutId = window.setTimeout(function () {\n callback.apply(null, args);\n }, wait);\n };\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.hasInitialized = false; // Remove event listeners\n\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n window.removeEventListener(\"resize\", this.resizeHandler); // Remove aria attributes\n\n this.el.removeAttribute(\"aria-haspopup\");\n this.el.removeAttribute(\"aria-expanded\");\n this.targetEl.removeAttribute(\"aria-hidden\");\n this.targetEl.style.removeProperty(\"max-height\");\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.removeAttribute(\"role\");\n } // Reset toggle text\n\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n } // Remove custom classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList, _this$targetEl$classL;\n\n (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n }\n\n this.emitEvent(\"destroy\");\n }\n }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(event) {\n // Expand with down arrow\n if (event.keyCode == 40) {\n this.expand();\n } else if (event.keyCode == 38 || event.keyCode == 27) {\n // Close with up arrow or escape key\n this.collapse();\n }\n }\n }, {\n key: \"heightToggleSetup\",\n value: function heightToggleSetup() {\n var _this2 = this;\n\n // Set max-height to the expanded height so we can animate it.\n window.requestAnimationFrame(this.updateExpandedHeight.bind(this));\n this.resizeHandler = this.debounce(function () {\n // Due to debounce() it’s possible for this to run after destroy() has been called.\n // To avoid this edge case, check “this.hasInitialized” first.\n if (_this2.hasInitialized) {\n window.requestAnimationFrame(_this2.updateExpandedHeight.bind(_this2));\n }\n }, 100).bind(this); // Update target element’s max-height on resize\n\n window.addEventListener(\"resize\", this.resizeHandler);\n } // Set inline “max-height” on target element equal to its expanded height\n // (will be overridden by CSS when aria-hidden=\"true\" is set)\n //\n // This technique works by creating an absolutely-positioned invisible clone of the target\n // element and calculating its height. This avoids any relayout that would otherwise occur\n // if the element was briefly expanded so we could measure it.\n //\n // Note: We’re using CSS to transition max-height instead jQuery’s slideToggle(),\n // or another 3rd-party lib like Velocity.js, to avoid loading a large lib.\n\n }, {\n key: \"updateExpandedHeight\",\n value: function updateExpandedHeight() {\n // Note: Element.scrollHeight also gets an element’s height, including hidden overflow content,\n // but fails when there are nested expandables.\n // this.targetEl.style.maxHeight = this.targetEl.scrollHeight + \"px\";\n // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth)); // Create clone of node\n\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n\n cloneEl.style.cssText = \"max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: \".concat(nodeWidth, \"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important\"); // Update “aria-hidden” attribute\n\n cloneEl.setAttribute(\"aria-hidden\", false); // Remove id just to be safe\n\n cloneEl.removeAttribute(\"id\"); // Remove “name” attributes to prevent resetting checkbox or radio elements\n\n var childElsWithId = cloneEl.querySelectorAll(\"[name]\"); // IE-friendly way of iterating over a NodeList\n\n Array.prototype.forEach.call(childElsWithId, function (el) {\n el.removeAttribute(\"name\");\n }); // Append clone to document, save as new let so we can remove it later\n\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl); // Calculate height\n\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight)); // Remove cloned node to clean up after ourselves\n\n this.targetParentEl.removeChild(newEl); // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.activeToggleText;\n } // Add classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList2, _this$targetEl$classL2;\n\n (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n } // Update aria attributes\n\n\n this.el.setAttribute(\"aria-expanded\", true);\n this.targetEl.setAttribute(\"aria-hidden\", false); // Emit event and include original event as an argument\n\n this.emitEvent(\"expand\", event);\n }\n }, {\n key: \"collapse\",\n value: function collapse(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n } // Remove classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList3, _this$targetEl$classL3;\n\n (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n } // Update aria attributes\n\n\n this.el.setAttribute(\"aria-expanded\", false);\n this.targetEl.setAttribute(\"aria-hidden\", true); // Emit event and include original event as an argument\n\n this.emitEvent(\"collapse\", event);\n }\n }, {\n key: \"toggle\",\n value: function toggle(event) {\n // Prevent default in case toggle element is a link instead of a button\n event.preventDefault();\n\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse(event);\n } else {\n this.expand(event);\n }\n }\n }]);\n\n return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n _inherits(ExpandToggle, _EventEmitter);\n var _super = _createSuper(ExpandToggle);\n function ExpandToggle(el, opts) {\n var _this;\n _classCallCheck(this, ExpandToggle);\n // Have to call super() first before referencing “this” since we’re extending EventEmitter\n // https://stackoverflow.com/a/43591507/673457\n _this = _super.call(this);\n _this.el = el;\n _this.targetId = _this.el.getAttribute(\"data-expands\");\n _this.targetEl = document.getElementById(_this.targetId);\n _this.targetParentEl = _this.targetEl.parentNode;\n\n // Ensure target element exist before initializing\n if (!_this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n return _possibleConstructorReturn(_this);\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n _this.options = Object.assign({}, {\n expandedClasses: \"\",\n // string, accepts multiple space-separated classes\n activeToggleText: \"\",\n // expanded state toggle button text\n shouldStartExpanded: false,\n // component starts expanded on init\n onReady: null // ready callback function\n }, opts);\n\n // Check for custom expanded class(es)\n _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n if (_this.expandedClasses.length) {\n // Check if active class string contains multiple classes\n if (_this.expandedClasses.indexOf(\" \") > -1) {\n // Convert to array and remove any empty string values\n // caused by having multiple spaces in a row.\n _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n return n.length;\n });\n } else {\n // We still need to convert a single active class to an array\n // so we can use the spread syntax later in classList.add()\n _this.expandedClasses = [_this.expandedClasses];\n }\n }\n\n // Check if component should start expanded\n _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n // Check for custom toggle button text to use when expanded\n _this.hasActiveText = false;\n _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n if (_this.textEl) {\n _this.defaultToggleText = _this.textEl.textContent;\n _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n _this.hasActiveText = !!_this.activeToggleText.length;\n }\n _this.init();\n return _this;\n }\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Store state to avoid calling resize handler after component has been destroyed\n this.hasInitialized = true;\n\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n // Omit “aria-controls” for now\n // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n // this.el.setAttribute(\"aria-controls\", this.targetId);\n this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n // Click event listener on toggle button\n // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n // https://stackoverflow.com/a/22870717/673457\n this.clickHandler = this.toggle.bind(this);\n this.el.addEventListener(\"click\", this.clickHandler);\n\n // Keyboard listeners on toggle button\n this.keydownHandler = this.keyboardEvents.bind(this);\n this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n // Check for onReady callback\n if (typeof this.options.onReady === \"function\") {\n this.options.onReady();\n }\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.hasInitialized = false;\n\n // Remove event listeners\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n // Remove aria attributes\n this.el.removeAttribute(\"aria-haspopup\");\n this.el.removeAttribute(\"aria-expanded\");\n this.targetEl.removeAttribute(\"aria-hidden\");\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.removeAttribute(\"role\");\n }\n\n // Reset toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n // Remove custom classes\n if (this.expandedClasses.length) {\n var _this$el$classList, _this$targetEl$classL;\n (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n }\n this.emitEvent(\"destroy\");\n }\n }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(event) {\n // Expand with down arrow\n if (event.keyCode == 40) {\n this.expand();\n } else if (event.keyCode == 38 || event.keyCode == 27) {\n // Close with up arrow or escape key\n this.collapse();\n }\n }\n }, {\n key: \"expand\",\n value: function expand(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.activeToggleText;\n }\n\n // Add classes\n if (this.expandedClasses.length) {\n var _this$el$classList2, _this$targetEl$classL2;\n (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n }\n\n // Update aria attributes\n this.el.setAttribute(\"aria-expanded\", true);\n this.targetEl.setAttribute(\"aria-hidden\", false);\n\n // Emit event and include original event as an argument\n this.emitEvent(\"expand\", event);\n }\n }, {\n key: \"collapse\",\n value: function collapse(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n // Remove classes\n if (this.expandedClasses.length) {\n var _this$el$classList3, _this$targetEl$classL3;\n (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n }\n\n // Update aria attributes\n this.el.setAttribute(\"aria-expanded\", false);\n this.targetEl.setAttribute(\"aria-hidden\", true);\n\n // Emit event and include original event as an argument\n this.emitEvent(\"collapse\", event);\n }\n }, {\n key: \"toggle\",\n value: function toggle(event) {\n // Prevent default in case toggle element is a link instead of a button\n event.preventDefault();\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse(event);\n } else {\n this.expand(event);\n }\n }\n }]);\n return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");

@@ -101,0 +101,0 @@ /***/ }),

2

dist/expand-toggle.umd.js

@@ -107,3 +107,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\n\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {boolean} [opts.shouldToggleHeight=false] - Whether or not to animate height\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n _inherits(ExpandToggle, _EventEmitter);\n\n var _super = _createSuper(ExpandToggle);\n\n function ExpandToggle(el, opts) {\n var _this;\n\n _classCallCheck(this, ExpandToggle);\n\n // Have to call super() first before referencing “this” since we’re extending EventEmitter\n // https://stackoverflow.com/a/43591507/673457\n _this = _super.call(this);\n _this.el = el;\n _this.targetId = _this.el.getAttribute(\"data-expands\");\n _this.targetEl = document.getElementById(_this.targetId);\n _this.targetParentEl = _this.targetEl.parentNode; // Ensure target element exist before initializing\n\n if (!_this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n return _possibleConstructorReturn(_this, false);\n } // Use Object.assign() to merge “opts” object with default values in this.options\n\n\n _this.options = Object.assign({}, {\n expandedClasses: \"\",\n // string, accepts multiple space-separated classes\n shouldToggleHeight: false,\n // should target element’s height be animated using max-height\n activeToggleText: \"\",\n // expanded state toggle button text\n shouldStartExpanded: false,\n // component starts expanded on init\n onReady: null // ready callback function\n\n }, opts); // Check for custom expanded class(es)\n\n _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n\n if (_this.expandedClasses.length) {\n // Check if active class string contains multiple classes\n if (_this.expandedClasses.indexOf(\" \") > -1) {\n // Convert to array and remove any empty string values\n // caused by having multiple spaces in a row.\n _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n return n.length;\n });\n } else {\n // We still need to convert a single active class to an array\n // so we can use the spread syntax later in classList.add()\n _this.expandedClasses = [_this.expandedClasses];\n }\n } // Check if height should be animated\n\n\n _this.shouldToggleHeight = _this.el.hasAttribute(\"data-expands-height\") || _this.options.shouldToggleHeight; // Check if component should start expanded\n\n _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded; // Check for custom toggle button text to use when expanded\n\n _this.hasActiveText = false;\n _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n\n if (_this.textEl) {\n _this.defaultToggleText = _this.textEl.textContent;\n _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n _this.hasActiveText = !!_this.activeToggleText.length;\n }\n\n _this.init();\n\n return _this;\n }\n\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Store state to avoid calling resize handler after component has been destroyed\n this.hasInitialized = true; // Accessibility setup\n\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded); // Omit “aria-controls” for now\n // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n // this.el.setAttribute(\"aria-controls\", this.targetId);\n\n this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n } // Click event listener on toggle button\n // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n // https://stackoverflow.com/a/22870717/673457\n\n\n this.clickHandler = this.toggle.bind(this);\n this.el.addEventListener(\"click\", this.clickHandler); // Keyboard listeners on toggle button\n\n this.keydownHandler = this.keyboardEvents.bind(this);\n this.el.addEventListener(\"keydown\", this.keydownHandler); // Check for onReady callback\n\n if (typeof this.options.onReady === \"function\") {\n this.options.onReady();\n }\n } // Debounce function\n // https://www.joshwcomeau.com/snippets/javascript/debounce/\n\n }, {\n key: \"debounce\",\n value: function debounce(callback, wait) {\n var timeoutId = null;\n return function () {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n window.clearTimeout(timeoutId);\n timeoutId = window.setTimeout(function () {\n callback.apply(null, args);\n }, wait);\n };\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.hasInitialized = false; // Remove event listeners\n\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n window.removeEventListener(\"resize\", this.resizeHandler); // Remove aria attributes\n\n this.el.removeAttribute(\"aria-haspopup\");\n this.el.removeAttribute(\"aria-expanded\");\n this.targetEl.removeAttribute(\"aria-hidden\");\n this.targetEl.style.removeProperty(\"max-height\");\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.removeAttribute(\"role\");\n } // Reset toggle text\n\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n } // Remove custom classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList, _this$targetEl$classL;\n\n (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n }\n\n this.emitEvent(\"destroy\");\n }\n }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(event) {\n // Expand with down arrow\n if (event.keyCode == 40) {\n this.expand();\n } else if (event.keyCode == 38 || event.keyCode == 27) {\n // Close with up arrow or escape key\n this.collapse();\n }\n }\n }, {\n key: \"heightToggleSetup\",\n value: function heightToggleSetup() {\n var _this2 = this;\n\n // Set max-height to the expanded height so we can animate it.\n window.requestAnimationFrame(this.updateExpandedHeight.bind(this));\n this.resizeHandler = this.debounce(function () {\n // Due to debounce() it’s possible for this to run after destroy() has been called.\n // To avoid this edge case, check “this.hasInitialized” first.\n if (_this2.hasInitialized) {\n window.requestAnimationFrame(_this2.updateExpandedHeight.bind(_this2));\n }\n }, 100).bind(this); // Update target element’s max-height on resize\n\n window.addEventListener(\"resize\", this.resizeHandler);\n } // Set inline “max-height” on target element equal to its expanded height\n // (will be overridden by CSS when aria-hidden=\"true\" is set)\n //\n // This technique works by creating an absolutely-positioned invisible clone of the target\n // element and calculating its height. This avoids any relayout that would otherwise occur\n // if the element was briefly expanded so we could measure it.\n //\n // Note: We’re using CSS to transition max-height instead jQuery’s slideToggle(),\n // or another 3rd-party lib like Velocity.js, to avoid loading a large lib.\n\n }, {\n key: \"updateExpandedHeight\",\n value: function updateExpandedHeight() {\n // Note: Element.scrollHeight also gets an element’s height, including hidden overflow content,\n // but fails when there are nested expandables.\n // this.targetEl.style.maxHeight = this.targetEl.scrollHeight + \"px\";\n // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth)); // Create clone of node\n\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n\n cloneEl.style.cssText = \"max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: \".concat(nodeWidth, \"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important\"); // Update “aria-hidden” attribute\n\n cloneEl.setAttribute(\"aria-hidden\", false); // Remove id just to be safe\n\n cloneEl.removeAttribute(\"id\"); // Remove “name” attributes to prevent resetting checkbox or radio elements\n\n var childElsWithId = cloneEl.querySelectorAll(\"[name]\"); // IE-friendly way of iterating over a NodeList\n\n Array.prototype.forEach.call(childElsWithId, function (el) {\n el.removeAttribute(\"name\");\n }); // Append clone to document, save as new let so we can remove it later\n\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl); // Calculate height\n\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight)); // Remove cloned node to clean up after ourselves\n\n this.targetParentEl.removeChild(newEl); // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.activeToggleText;\n } // Add classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList2, _this$targetEl$classL2;\n\n (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n } // Update aria attributes\n\n\n this.el.setAttribute(\"aria-expanded\", true);\n this.targetEl.setAttribute(\"aria-hidden\", false); // Emit event and include original event as an argument\n\n this.emitEvent(\"expand\", event);\n }\n }, {\n key: \"collapse\",\n value: function collapse(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n } // Remove classes\n\n\n if (this.expandedClasses.length) {\n var _this$el$classList3, _this$targetEl$classL3;\n\n (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n\n (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n } // Update aria attributes\n\n\n this.el.setAttribute(\"aria-expanded\", false);\n this.targetEl.setAttribute(\"aria-hidden\", true); // Emit event and include original event as an argument\n\n this.emitEvent(\"collapse\", event);\n }\n }, {\n key: \"toggle\",\n value: function toggle(event) {\n // Prevent default in case toggle element is a link instead of a button\n event.preventDefault();\n\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse(event);\n } else {\n this.expand(event);\n }\n }\n }]);\n\n return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return ExpandToggle; });\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ev-emitter */ \"./node_modules/ev-emitter/ev-emitter.js\");\n/* harmony import */ var ev_emitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ev_emitter__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof(obj); }\nfunction _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _iterableToArray(iter) { if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter); }\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, \"prototype\", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } else if (call !== void 0) { throw new TypeError(\"Derived constructors may only return object or undefined\"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n/**\n * Wrap the last X words in an HTML tag to prevent them from wrapping (i.e. orphans)\n * @param {HTMLElement} el - Toggle button DOM node\n * @param {Object} opts - Options\n * @param {string} [opts.expandedClasses=\"\"] - Class(es) to apply when expanded\n * @param {string} [opts.activeToggleText=\"\"] - Expanded state toggle button text\n * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded\n * @param {function} [opts.onReady=\"\"] - Ready callback function\n */\n\nvar ExpandToggle = /*#__PURE__*/function (_EventEmitter) {\n _inherits(ExpandToggle, _EventEmitter);\n var _super = _createSuper(ExpandToggle);\n function ExpandToggle(el, opts) {\n var _this;\n _classCallCheck(this, ExpandToggle);\n // Have to call super() first before referencing “this” since we’re extending EventEmitter\n // https://stackoverflow.com/a/43591507/673457\n _this = _super.call(this);\n _this.el = el;\n _this.targetId = _this.el.getAttribute(\"data-expands\");\n _this.targetEl = document.getElementById(_this.targetId);\n _this.targetParentEl = _this.targetEl.parentNode;\n\n // Ensure target element exist before initializing\n if (!_this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\".concat(_this.targetId, \"\\u201D\"));\n return _possibleConstructorReturn(_this);\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n _this.options = Object.assign({}, {\n expandedClasses: \"\",\n // string, accepts multiple space-separated classes\n activeToggleText: \"\",\n // expanded state toggle button text\n shouldStartExpanded: false,\n // component starts expanded on init\n onReady: null // ready callback function\n }, opts);\n\n // Check for custom expanded class(es)\n _this.expandedClasses = _this.el.getAttribute(\"data-expands-class\") || _this.options.expandedClasses;\n if (_this.expandedClasses.length) {\n // Check if active class string contains multiple classes\n if (_this.expandedClasses.indexOf(\" \") > -1) {\n // Convert to array and remove any empty string values\n // caused by having multiple spaces in a row.\n _this.expandedClasses = _this.expandedClasses.split(\" \").filter(function (n) {\n return n.length;\n });\n } else {\n // We still need to convert a single active class to an array\n // so we can use the spread syntax later in classList.add()\n _this.expandedClasses = [_this.expandedClasses];\n }\n }\n\n // Check if component should start expanded\n _this.shouldStartExpanded = _this.el.hasAttribute(\"data-expanded\") || _this.options.shouldStartExpanded;\n\n // Check for custom toggle button text to use when expanded\n _this.hasActiveText = false;\n _this.textEl = _this.el.querySelector(\"[data-expands-text]\");\n if (_this.textEl) {\n _this.defaultToggleText = _this.textEl.textContent;\n _this.activeToggleText = _this.textEl.getAttribute(\"data-expands-text\") || _this.options.activeToggleText;\n _this.hasActiveText = !!_this.activeToggleText.length;\n }\n _this.init();\n return _this;\n }\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Store state to avoid calling resize handler after component has been destroyed\n this.hasInitialized = true;\n\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", this.shouldStartExpanded);\n\n // Omit “aria-controls” for now\n // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols\n // this.el.setAttribute(\"aria-controls\", this.targetId);\n this.targetEl.setAttribute(\"aria-hidden\", !this.shouldStartExpanded);\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n // Click event listener on toggle button\n // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()\n // https://stackoverflow.com/a/22870717/673457\n this.clickHandler = this.toggle.bind(this);\n this.el.addEventListener(\"click\", this.clickHandler);\n\n // Keyboard listeners on toggle button\n this.keydownHandler = this.keyboardEvents.bind(this);\n this.el.addEventListener(\"keydown\", this.keydownHandler);\n\n // Check for onReady callback\n if (typeof this.options.onReady === \"function\") {\n this.options.onReady();\n }\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.hasInitialized = false;\n\n // Remove event listeners\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n\n // Remove aria attributes\n this.el.removeAttribute(\"aria-haspopup\");\n this.el.removeAttribute(\"aria-expanded\");\n this.targetEl.removeAttribute(\"aria-hidden\");\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.removeAttribute(\"role\");\n }\n\n // Reset toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n // Remove custom classes\n if (this.expandedClasses.length) {\n var _this$el$classList, _this$targetEl$classL;\n (_this$el$classList = this.el.classList).remove.apply(_this$el$classList, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL = this.targetEl.classList).remove.apply(_this$targetEl$classL, _toConsumableArray(this.expandedClasses));\n }\n this.emitEvent(\"destroy\");\n }\n }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(event) {\n // Expand with down arrow\n if (event.keyCode == 40) {\n this.expand();\n } else if (event.keyCode == 38 || event.keyCode == 27) {\n // Close with up arrow or escape key\n this.collapse();\n }\n }\n }, {\n key: \"expand\",\n value: function expand(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.activeToggleText;\n }\n\n // Add classes\n if (this.expandedClasses.length) {\n var _this$el$classList2, _this$targetEl$classL2;\n (_this$el$classList2 = this.el.classList).add.apply(_this$el$classList2, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL2 = this.targetEl.classList).add.apply(_this$targetEl$classL2, _toConsumableArray(this.expandedClasses));\n }\n\n // Update aria attributes\n this.el.setAttribute(\"aria-expanded\", true);\n this.targetEl.setAttribute(\"aria-hidden\", false);\n\n // Emit event and include original event as an argument\n this.emitEvent(\"expand\", event);\n }\n }, {\n key: \"collapse\",\n value: function collapse(event) {\n // Update toggle text\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n // Remove classes\n if (this.expandedClasses.length) {\n var _this$el$classList3, _this$targetEl$classL3;\n (_this$el$classList3 = this.el.classList).remove.apply(_this$el$classList3, _toConsumableArray(this.expandedClasses));\n (_this$targetEl$classL3 = this.targetEl.classList).remove.apply(_this$targetEl$classL3, _toConsumableArray(this.expandedClasses));\n }\n\n // Update aria attributes\n this.el.setAttribute(\"aria-expanded\", false);\n this.targetEl.setAttribute(\"aria-hidden\", true);\n\n // Emit event and include original event as an argument\n this.emitEvent(\"collapse\", event);\n }\n }, {\n key: \"toggle\",\n value: function toggle(event) {\n // Prevent default in case toggle element is a link instead of a button\n event.preventDefault();\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse(event);\n } else {\n this.expand(event);\n }\n }\n }]);\n return ExpandToggle;\n}(ev_emitter__WEBPACK_IMPORTED_MODULE_0___default.a);\n\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");

@@ -110,0 +110,0 @@ /***/ }),

101

index.js

@@ -6,3 +6,2 @@ /**

* @param {string} [opts.expandedClasses=""] - Class(es) to apply when expanded
* @param {boolean} [opts.shouldToggleHeight=false] - Whether or not to animate height
* @param {string} [opts.activeToggleText=""] - Expanded state toggle button text

@@ -28,3 +27,3 @@ * @param {boolean} [opts.shouldStartExpanded=false] - Whether menu should start expanded

console.warn(`Can’t find expandable target with id “${this.targetId}”`);
return false;
return;
}

@@ -37,3 +36,2 @@

expandedClasses: "", // string, accepts multiple space-separated classes
shouldToggleHeight: false, // should target element’s height be animated using max-height
activeToggleText: "", // expanded state toggle button text

@@ -47,5 +45,3 @@ shouldStartExpanded: false, // component starts expanded on init

// Check for custom expanded class(es)
this.expandedClasses =
this.el.getAttribute("data-expands-class") ||
this.options.expandedClasses;
this.expandedClasses = this.el.getAttribute("data-expands-class") || this.options.expandedClasses;

@@ -67,7 +63,2 @@ if (this.expandedClasses.length) {

// Check if height should be animated
this.shouldToggleHeight =
this.el.hasAttribute("data-expands-height") ||
this.options.shouldToggleHeight;
// Check if component should start expanded

@@ -95,5 +86,7 @@ this.shouldStartExpanded =

this.hasInitialized = true;
// Accessibility setup
this.el.setAttribute("aria-haspopup", true);
this.el.setAttribute("aria-expanded", this.shouldStartExpanded);
// Omit “aria-controls” for now

@@ -108,6 +101,2 @@ // See https://inclusive-components.design/menus-menu-buttons/#ariacontrols

if (this.shouldToggleHeight) {
this.heightToggleSetup();
}
// Click event listener on toggle button

@@ -129,15 +118,2 @@ // Note: Callback needs to be assigned to a let so we can remove it since we’re using bind()

// Debounce function
// https://www.joshwcomeau.com/snippets/javascript/debounce/
debounce(callback, wait) {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
destroy() {

@@ -149,3 +125,2 @@ this.hasInitialized = false;

this.el.removeEventListener("keydown", this.keydownHandler);
window.removeEventListener("resize", this.resizeHandler);

@@ -156,3 +131,2 @@ // Remove aria attributes

this.targetEl.removeAttribute("aria-hidden");
this.targetEl.style.removeProperty("max-height");

@@ -187,69 +161,2 @@ if (this.el.tagName.toLowerCase() === "a") {

heightToggleSetup() {
// Set max-height to the expanded height so we can animate it.
window.requestAnimationFrame(this.updateExpandedHeight.bind(this));
this.resizeHandler = this.debounce(() => {
// Due to debounce() it’s possible for this to run after destroy() has been called.
// To avoid this edge case, check “this.hasInitialized” first.
if (this.hasInitialized) {
window.requestAnimationFrame(this.updateExpandedHeight.bind(this));
}
}, 100).bind(this);
// Update target element’s max-height on resize
window.addEventListener("resize", this.resizeHandler);
}
// Set inline “max-height” on target element equal to its expanded height
// (will be overridden by CSS when aria-hidden="true" is set)
//
// This technique works by creating an absolutely-positioned invisible clone of the target
// element and calculating its height. This avoids any relayout that would otherwise occur
// if the element was briefly expanded so we could measure it.
//
// Note: We’re using CSS to transition max-height instead jQuery’s slideToggle(),
// or another 3rd-party lib like Velocity.js, to avoid loading a large lib.
updateExpandedHeight() {
// Note: Element.scrollHeight also gets an element’s height, including hidden overflow content,
// but fails when there are nested expandables.
// this.targetEl.style.maxHeight = this.targetEl.scrollHeight + "px";
// Get width of original element so we can apply it to the clone
let nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth));
// Create clone of node
let cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes
// Inline styles added to prevent reflow, ensure clone is same size as expanded element
cloneEl.style.cssText = `max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: ${nodeWidth}px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important`;
// Update “aria-hidden” attribute
cloneEl.setAttribute("aria-hidden", false);
// Remove id just to be safe
cloneEl.removeAttribute("id");
// Remove “name” attributes to prevent resetting checkbox or radio elements
let childElsWithId = cloneEl.querySelectorAll("[name]");
// IE-friendly way of iterating over a NodeList
Array.prototype.forEach.call(childElsWithId, el => {
el.removeAttribute("name");
});
// Append clone to document, save as new let so we can remove it later
let newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl);
// Calculate height
let expandedHeight = Math.round(parseFloat(newEl.offsetHeight));
// Remove cloned node to clean up after ourselves
this.targetParentEl.removeChild(newEl);
// Apply inline max-height to collapsed element
// Note: CSS is overriding this when aria-hidden="true"
this.targetEl.style.maxHeight = expandedHeight + "px";
}
expand(event) {

@@ -256,0 +163,0 @@ // Update toggle text

2

package.json
{
"name": "@threespot/expand-toggle",
"version": "2.1.0",
"version": "3.0.0",
"description": "Simple and accessible expandable functionality, similar to jQuery’s `slideToggle()` method.",

@@ -5,0 +5,0 @@ "main": "dist/expand-toggle.m.js",

81

README.md

@@ -9,4 +9,7 @@ # Expand Toggle

Inspired by https://inclusive-components.design/menus-menu-buttons#truemenus.
Inspired by:
- https://inclusive-components.design/menus-menu-buttons#truemenus
- https://www.stefanjudis.com/snippets/how-to-animate-height-with-css-grid/
## Install

@@ -25,11 +28,17 @@

const toggles = document.querySelectorAll("[data-expands]");
document.querySelectorAll("[data-expands]").forEach(el => new ExpandToggle(el));
```
// ES6
toggles.forEach(el => new ExpandToggle(el));
**Markup**
// ES5
for (var i = 0, len = toggles.length; i < len; i++) {
new ExpandToggle(toggles[i]);
}
```html
<button type="button" data-expands="demo" data-expands-class="is-expanded">
<span data-expands-text="Close">Open</span>
</button>
<div class="expandable" id="demo">
<div class="expandable-wrap">
<p>This content will be hidden to start.</p>
</div>
</div>
```

@@ -44,44 +53,18 @@

.expandable {
$transition-speed: 400ms;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 250ms ease;
// Expanded state
&,
.js &[aria-hidden="false"] {
overflow: hidden;
transition: max-height $transition-speed ease-in-out,
visibility 0s linear 0s;
visibility: visible;
&[aria-hidden="false"],
.no-js & {
grid-template-rows: 1fr;
}
// Collapsed state
&[aria-hidden="true"],
// Selector below prevents a flash of unstyled content (FOUC)
.js &:not([aria-hidden]) {
max-height: 0 !important;// !important required to override inline styles added by JS
transition: max-height $transition-speed ease-in-out,
visibility 0s linear $transition-speed;
visibility: hidden;
&-wrap {
overflow: hidden;
}
}
// We also suggest hiding the button when JS is disabled.
// Note: Modernizr looks for a “no-js” class on the html tag and replaces it with “js” on load.
// If not using Modernizr, see https://www.paulirish.com/2009/avoiding-the-fouc-v3/
.no-js [data-expands] {
display: none;
}
```
**Markup**
```html
<button type="button" data-expands="demo" data-expands-class="is-expanded" data-expands-height>
<span data-expands-text="Close">Open</span>
</button>
<div class="expandable" id="demo">
<p>This content will be hidden to start.</p>
</div>
```
### Options

@@ -91,16 +74,18 @@

`data-expands-height` transitions the menu height using `max-height` and CSS transitions (see required CSS above)
`data-expands-text` defines button text to use when expanded
These options can also be set in JavaScript:
`data-expanded` will expand the element by default
The following options can be set via JavaScript:
```js
new ExpandToggle(el, {
expandedClasses: "is-expanded",
shouldToggleHeight: true,
activeToggleText: "Close",
expandedClasses: "", // string, accepts multiple space-separated classes
activeToggleText: "", // expanded state toggle button text
shouldStartExpanded: false, // component starts expanded on init
onReady: null // ready callback function
});
```
### Events

@@ -107,0 +92,0 @@ 

.tool-versions

Sorry, the diff of this file is not supported yet

docs/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc