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
2
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 1.2.0 to 1.2.1

2

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

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

define("expand-toggleLink",[],function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=13)}([function(t,e,i){var n=i(1).Symbol;t.exports=n},function(t,e,i){var n=i(10),r="object"==typeof self&&self&&self.Object===Object&&self,a=n||r||Function("return this")();t.exports=a},function(t,e){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e){var i=Object.prototype.toString;t.exports=function(t){return i.call(t)}},function(t,e,i){var n=i(0),r=Object.prototype,a=r.hasOwnProperty,s=r.toString,o=n?n.toStringTag:void 0;t.exports=function(t){var e=a.call(t,o),i=t[o];try{t[o]=void 0;var n=!0}catch(t){}var r=s.call(t);return n&&(e?t[o]=i:delete t[o]),r}},function(t,e,i){var n=i(0),r=i(5),a=i(4),s=n?n.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":s&&s in Object(t)?r(t):a(t)}},function(t,e,i){var n=i(6),r=i(3);t.exports=function(t){return"symbol"==typeof t||r(t)&&"[object Symbol]"==n(t)}},function(t,e,i){var n=i(2),r=i(7),a=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(r(t))return NaN;if(n(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=n(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=o.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):s.test(t)?NaN:+t}},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){(function(e){var i="object"==typeof e&&e&&e.Object===Object&&e;t.exports=i}).call(this,i(9))},function(t,e,i){var n=i(1);t.exports=function(){return n.Date.now()}},function(t,e,i){var n=i(2),r=i(11),a=i(8),s=Math.max,o=Math.min;t.exports=function(t,e,i){var l,u,h,d,c,p,f=0,g=!1,v=!1,x=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var i=l,n=u;return l=u=void 0,f=e,d=t.apply(n,i)}function b(t){var i=t-p;return void 0===p||i>=e||i<0||v&&t-f>=h}function m(){var t=r();if(b(t))return E(t);c=setTimeout(m,function(t){var i=e-(t-p);return v?o(i,h-(t-f)):i}(t))}function E(t){return c=void 0,x&&l?y(t):(l=u=void 0,d)}function T(){var t=r(),i=b(t);if(l=arguments,u=this,p=t,i){if(void 0===c)return function(t){return f=t,c=setTimeout(m,e),g?y(t):d}(p);if(v)return c=setTimeout(m,e),y(p)}return void 0===c&&(c=setTimeout(m,e)),d}return e=a(e)||0,n(i)&&(g=!!i.leading,h=(v="maxWait"in i)?s(a(i.maxWait)||0,e):h,x="trailing"in i?!!i.trailing:x),T.cancel=function(){void 0!==c&&clearTimeout(c),f=0,l=p=u=c=void 0},T.flush=function(){return void 0===c?d:E(r())},T}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=(n=i(12))&&n.__esModule?n:{default:n};function s(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}var o=function(){function t(e,i){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e,this.targetId=this.el.getAttribute("data-expands"),this.targetEl=document.getElementById(this.targetId),!this.targetEl)return console.warn("Can’t find expandable target with id “"+this.targetId+"”"),!1;this.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:""},i),this.expandedClasses=this.el.getAttribute("data-expands-class")||this.options.expandedClasses,this.expandedClasses.length&&(this.expandedClasses.indexOf(" ")>-1?this.expandedClasses=this.expandedClasses.split(" ").filter(function(t){return t.length}):this.expandedClasses=[this.expandedClasses]),this.shouldToggleHeight=this.el.hasAttribute("data-expands-height")||this.options.shouldToggleHeight,this.hasActiveText=!1,this.textEl=this.el.querySelector("[data-expands-text]"),this.textEl&&(this.defaultToggleText=this.textEl.textContent,this.activeToggleText=this.textEl.getAttribute("data-expands-text")||this.options.activeToggleText,this.hasActiveText=!!this.activeToggleText.length),this.init()}return r(t,[{key:"init",value:function(){this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.shouldToggleHeight&&this.heightToggleSetup(),this.el.addEventListener("click",this.toggle.bind(this)),this.el.addEventListener("keydown",this.keydownHandler.bind(this))}},{key:"keydownHandler",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"heightToggleSetup",value:function(){var t=this;this.targetParentEl=this.targetEl.parentNode,this.updateExpandedHeight(),window.addEventListener("resize",(0,a.default)(function(e){t.updateExpandedHeight()},150))}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=this.targetEl.cloneNode(!0);e.style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: "+t+"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important",e.setAttribute("aria-hidden",!1),e.removeAttribute("id");var i=this.targetParentEl.insertBefore(e,this.targetEl),n=Math.round(parseFloat(i.offsetHeight));this.targetParentEl.removeChild(i),this.targetEl.style.maxHeight=n+"px"}},{key:"expand",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((t=this.el.classList).add.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1)}},{key:"collapse",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0)}},{key:"toggle",value:function(t){"true"===this.el.getAttribute("aria-expanded")?this.collapse():this.expand()}},{key:"destroy",value:function(){var t,e;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,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.removeEventListener("click",this.toggle),this.el.removeEventListener("keydown",this.keydownHandler)}}]),t}();e.default=o}])});
define("expand-toggleLink",[],function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=13)}([function(t,e,i){var n=i(1).Symbol;t.exports=n},function(t,e,i){var n=i(10),r="object"==typeof self&&self&&self.Object===Object&&self,a=n||r||Function("return this")();t.exports=a},function(t,e){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e){var i=Object.prototype.toString;t.exports=function(t){return i.call(t)}},function(t,e,i){var n=i(0),r=Object.prototype,a=r.hasOwnProperty,s=r.toString,o=n?n.toStringTag:void 0;t.exports=function(t){var e=a.call(t,o),i=t[o];try{t[o]=void 0;var n=!0}catch(t){}var r=s.call(t);return n&&(e?t[o]=i:delete t[o]),r}},function(t,e,i){var n=i(0),r=i(5),a=i(4),s=n?n.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":s&&s in Object(t)?r(t):a(t)}},function(t,e,i){var n=i(6),r=i(3);t.exports=function(t){return"symbol"==typeof t||r(t)&&"[object Symbol]"==n(t)}},function(t,e,i){var n=i(2),r=i(7),a=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(r(t))return NaN;if(n(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=n(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=o.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):s.test(t)?NaN:+t}},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){(function(e){var i="object"==typeof e&&e&&e.Object===Object&&e;t.exports=i}).call(this,i(9))},function(t,e,i){var n=i(1);t.exports=function(){return n.Date.now()}},function(t,e,i){var n=i(2),r=i(11),a=i(8),s=Math.max,o=Math.min;t.exports=function(t,e,i){var l,u,h,d,c,p,f=0,g=!1,v=!1,x=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var i=l,n=u;return l=u=void 0,f=e,d=t.apply(n,i)}function b(t){var i=t-p;return void 0===p||i>=e||i<0||v&&t-f>=h}function m(){var t=r();if(b(t))return E(t);c=setTimeout(m,function(t){var i=e-(t-p);return v?o(i,h-(t-f)):i}(t))}function E(t){return c=void 0,x&&l?y(t):(l=u=void 0,d)}function T(){var t=r(),i=b(t);if(l=arguments,u=this,p=t,i){if(void 0===c)return function(t){return f=t,c=setTimeout(m,e),g?y(t):d}(p);if(v)return c=setTimeout(m,e),y(p)}return void 0===c&&(c=setTimeout(m,e)),d}return e=a(e)||0,n(i)&&(g=!!i.leading,h=(v="maxWait"in i)?s(a(i.maxWait)||0,e):h,x="trailing"in i?!!i.trailing:x),T.cancel=function(){void 0!==c&&clearTimeout(c),f=0,l=p=u=c=void 0},T.flush=function(){return void 0===c?d:E(r())},T}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=(n=i(12))&&n.__esModule?n:{default:n};function s(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}var o=function(){function t(e,i){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e,this.targetId=this.el.getAttribute("data-expands"),this.targetEl=document.getElementById(this.targetId),!this.targetEl)return console.warn("Can’t find expandable target with id “"+this.targetId+"”"),!1;this.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:""},i),this.expandedClasses=this.el.getAttribute("data-expands-class")||this.options.expandedClasses,this.expandedClasses.length&&(this.expandedClasses.indexOf(" ")>-1?this.expandedClasses=this.expandedClasses.split(" ").filter(function(t){return t.length}):this.expandedClasses=[this.expandedClasses]),this.shouldToggleHeight=this.el.hasAttribute("data-expands-height")||this.options.shouldToggleHeight,this.hasActiveText=!1,this.textEl=this.el.querySelector("[data-expands-text]"),this.textEl&&(this.defaultToggleText=this.textEl.textContent,this.activeToggleText=this.textEl.getAttribute("data-expands-text")||this.options.activeToggleText,this.hasActiveText=!!this.activeToggleText.length),this.init()}return r(t,[{key:"init",value:function(){this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),"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)}},{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;this.targetParentEl=this.targetEl.parentNode,this.updateExpandedHeight(),window.addEventListener("resize",(0,a.default)(function(e){t.updateExpandedHeight()},150))}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=this.targetEl.cloneNode(!0);e.style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: "+t+"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important",e.setAttribute("aria-hidden",!1),e.removeAttribute("id");var i=this.targetParentEl.insertBefore(e,this.targetEl),n=Math.round(parseFloat(i.offsetHeight));this.targetParentEl.removeChild(i),this.targetEl.style.maxHeight=n+"px"}},{key:"expand",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((t=this.el.classList).add.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1)}},{key:"collapse",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0)}},{key:"toggle",value:function(t){"true"===this.el.getAttribute("aria-expanded")?this.collapse():this.expand()}},{key:"destroy",value:function(){var t,e;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,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler)}}]),t}();e.default=o}])});

2

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

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

module.exports=function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=13)}([function(t,e,i){var n=i(1).Symbol;t.exports=n},function(t,e,i){var n=i(10),r="object"==typeof self&&self&&self.Object===Object&&self,a=n||r||Function("return this")();t.exports=a},function(t,e){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e){var i=Object.prototype.toString;t.exports=function(t){return i.call(t)}},function(t,e,i){var n=i(0),r=Object.prototype,a=r.hasOwnProperty,s=r.toString,o=n?n.toStringTag:void 0;t.exports=function(t){var e=a.call(t,o),i=t[o];try{t[o]=void 0;var n=!0}catch(t){}var r=s.call(t);return n&&(e?t[o]=i:delete t[o]),r}},function(t,e,i){var n=i(0),r=i(5),a=i(4),s=n?n.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":s&&s in Object(t)?r(t):a(t)}},function(t,e,i){var n=i(6),r=i(3);t.exports=function(t){return"symbol"==typeof t||r(t)&&"[object Symbol]"==n(t)}},function(t,e,i){var n=i(2),r=i(7),a=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(r(t))return NaN;if(n(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=n(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=o.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):s.test(t)?NaN:+t}},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){(function(e){var i="object"==typeof e&&e&&e.Object===Object&&e;t.exports=i}).call(this,i(9))},function(t,e,i){var n=i(1);t.exports=function(){return n.Date.now()}},function(t,e,i){var n=i(2),r=i(11),a=i(8),s=Math.max,o=Math.min;t.exports=function(t,e,i){var l,u,h,d,c,p,f=0,g=!1,v=!1,x=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var i=l,n=u;return l=u=void 0,f=e,d=t.apply(n,i)}function b(t){var i=t-p;return void 0===p||i>=e||i<0||v&&t-f>=h}function m(){var t=r();if(b(t))return E(t);c=setTimeout(m,function(t){var i=e-(t-p);return v?o(i,h-(t-f)):i}(t))}function E(t){return c=void 0,x&&l?y(t):(l=u=void 0,d)}function T(){var t=r(),i=b(t);if(l=arguments,u=this,p=t,i){if(void 0===c)return function(t){return f=t,c=setTimeout(m,e),g?y(t):d}(p);if(v)return c=setTimeout(m,e),y(p)}return void 0===c&&(c=setTimeout(m,e)),d}return e=a(e)||0,n(i)&&(g=!!i.leading,h=(v="maxWait"in i)?s(a(i.maxWait)||0,e):h,x="trailing"in i?!!i.trailing:x),T.cancel=function(){void 0!==c&&clearTimeout(c),f=0,l=p=u=c=void 0},T.flush=function(){return void 0===c?d:E(r())},T}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=(n=i(12))&&n.__esModule?n:{default:n};function s(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}var o=function(){function t(e,i){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e,this.targetId=this.el.getAttribute("data-expands"),this.targetEl=document.getElementById(this.targetId),!this.targetEl)return console.warn("Can’t find expandable target with id “"+this.targetId+"”"),!1;this.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:""},i),this.expandedClasses=this.el.getAttribute("data-expands-class")||this.options.expandedClasses,this.expandedClasses.length&&(this.expandedClasses.indexOf(" ")>-1?this.expandedClasses=this.expandedClasses.split(" ").filter(function(t){return t.length}):this.expandedClasses=[this.expandedClasses]),this.shouldToggleHeight=this.el.hasAttribute("data-expands-height")||this.options.shouldToggleHeight,this.hasActiveText=!1,this.textEl=this.el.querySelector("[data-expands-text]"),this.textEl&&(this.defaultToggleText=this.textEl.textContent,this.activeToggleText=this.textEl.getAttribute("data-expands-text")||this.options.activeToggleText,this.hasActiveText=!!this.activeToggleText.length),this.init()}return r(t,[{key:"init",value:function(){this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.shouldToggleHeight&&this.heightToggleSetup(),this.el.addEventListener("click",this.toggle.bind(this)),this.el.addEventListener("keydown",this.keydownHandler.bind(this))}},{key:"keydownHandler",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"heightToggleSetup",value:function(){var t=this;this.targetParentEl=this.targetEl.parentNode,this.updateExpandedHeight(),window.addEventListener("resize",(0,a.default)(function(e){t.updateExpandedHeight()},150))}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=this.targetEl.cloneNode(!0);e.style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: "+t+"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important",e.setAttribute("aria-hidden",!1),e.removeAttribute("id");var i=this.targetParentEl.insertBefore(e,this.targetEl),n=Math.round(parseFloat(i.offsetHeight));this.targetParentEl.removeChild(i),this.targetEl.style.maxHeight=n+"px"}},{key:"expand",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((t=this.el.classList).add.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1)}},{key:"collapse",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0)}},{key:"toggle",value:function(t){"true"===this.el.getAttribute("aria-expanded")?this.collapse():this.expand()}},{key:"destroy",value:function(){var t,e;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,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.removeEventListener("click",this.toggle),this.el.removeEventListener("keydown",this.keydownHandler)}}]),t}();e.default=o}]);
module.exports=function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=13)}([function(t,e,i){var n=i(1).Symbol;t.exports=n},function(t,e,i){var n=i(10),r="object"==typeof self&&self&&self.Object===Object&&self,a=n||r||Function("return this")();t.exports=a},function(t,e){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e){var i=Object.prototype.toString;t.exports=function(t){return i.call(t)}},function(t,e,i){var n=i(0),r=Object.prototype,a=r.hasOwnProperty,s=r.toString,o=n?n.toStringTag:void 0;t.exports=function(t){var e=a.call(t,o),i=t[o];try{t[o]=void 0;var n=!0}catch(t){}var r=s.call(t);return n&&(e?t[o]=i:delete t[o]),r}},function(t,e,i){var n=i(0),r=i(5),a=i(4),s=n?n.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":s&&s in Object(t)?r(t):a(t)}},function(t,e,i){var n=i(6),r=i(3);t.exports=function(t){return"symbol"==typeof t||r(t)&&"[object Symbol]"==n(t)}},function(t,e,i){var n=i(2),r=i(7),a=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(r(t))return NaN;if(n(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=n(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=o.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):s.test(t)?NaN:+t}},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){(function(e){var i="object"==typeof e&&e&&e.Object===Object&&e;t.exports=i}).call(this,i(9))},function(t,e,i){var n=i(1);t.exports=function(){return n.Date.now()}},function(t,e,i){var n=i(2),r=i(11),a=i(8),s=Math.max,o=Math.min;t.exports=function(t,e,i){var l,u,h,d,c,p,f=0,g=!1,v=!1,x=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var i=l,n=u;return l=u=void 0,f=e,d=t.apply(n,i)}function b(t){var i=t-p;return void 0===p||i>=e||i<0||v&&t-f>=h}function m(){var t=r();if(b(t))return E(t);c=setTimeout(m,function(t){var i=e-(t-p);return v?o(i,h-(t-f)):i}(t))}function E(t){return c=void 0,x&&l?y(t):(l=u=void 0,d)}function T(){var t=r(),i=b(t);if(l=arguments,u=this,p=t,i){if(void 0===c)return function(t){return f=t,c=setTimeout(m,e),g?y(t):d}(p);if(v)return c=setTimeout(m,e),y(p)}return void 0===c&&(c=setTimeout(m,e)),d}return e=a(e)||0,n(i)&&(g=!!i.leading,h=(v="maxWait"in i)?s(a(i.maxWait)||0,e):h,x="trailing"in i?!!i.trailing:x),T.cancel=function(){void 0!==c&&clearTimeout(c),f=0,l=p=u=c=void 0},T.flush=function(){return void 0===c?d:E(r())},T}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=(n=i(12))&&n.__esModule?n:{default:n};function s(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}var o=function(){function t(e,i){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e,this.targetId=this.el.getAttribute("data-expands"),this.targetEl=document.getElementById(this.targetId),!this.targetEl)return console.warn("Can’t find expandable target with id “"+this.targetId+"”"),!1;this.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:""},i),this.expandedClasses=this.el.getAttribute("data-expands-class")||this.options.expandedClasses,this.expandedClasses.length&&(this.expandedClasses.indexOf(" ")>-1?this.expandedClasses=this.expandedClasses.split(" ").filter(function(t){return t.length}):this.expandedClasses=[this.expandedClasses]),this.shouldToggleHeight=this.el.hasAttribute("data-expands-height")||this.options.shouldToggleHeight,this.hasActiveText=!1,this.textEl=this.el.querySelector("[data-expands-text]"),this.textEl&&(this.defaultToggleText=this.textEl.textContent,this.activeToggleText=this.textEl.getAttribute("data-expands-text")||this.options.activeToggleText,this.hasActiveText=!!this.activeToggleText.length),this.init()}return r(t,[{key:"init",value:function(){this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),"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)}},{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;this.targetParentEl=this.targetEl.parentNode,this.updateExpandedHeight(),window.addEventListener("resize",(0,a.default)(function(e){t.updateExpandedHeight()},150))}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=this.targetEl.cloneNode(!0);e.style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: "+t+"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important",e.setAttribute("aria-hidden",!1),e.removeAttribute("id");var i=this.targetParentEl.insertBefore(e,this.targetEl),n=Math.round(parseFloat(i.offsetHeight));this.targetParentEl.removeChild(i),this.targetEl.style.maxHeight=n+"px"}},{key:"expand",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((t=this.el.classList).add.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1)}},{key:"collapse",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0)}},{key:"toggle",value:function(t){"true"===this.el.getAttribute("aria-expanded")?this.collapse():this.expand()}},{key:"destroy",value:function(){var t,e;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,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler)}}]),t}();e.default=o}]);

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 function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=13)}([function(t,e,i){var n=i(1).Symbol;t.exports=n},function(t,e,i){var n=i(10),r="object"==typeof self&&self&&self.Object===Object&&self,a=n||r||Function("return this")();t.exports=a},function(t,e){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e){var i=Object.prototype.toString;t.exports=function(t){return i.call(t)}},function(t,e,i){var n=i(0),r=Object.prototype,a=r.hasOwnProperty,s=r.toString,o=n?n.toStringTag:void 0;t.exports=function(t){var e=a.call(t,o),i=t[o];try{t[o]=void 0;var n=!0}catch(t){}var r=s.call(t);return n&&(e?t[o]=i:delete t[o]),r}},function(t,e,i){var n=i(0),r=i(5),a=i(4),s=n?n.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":s&&s in Object(t)?r(t):a(t)}},function(t,e,i){var n=i(6),r=i(3);t.exports=function(t){return"symbol"==typeof t||r(t)&&"[object Symbol]"==n(t)}},function(t,e,i){var n=i(2),r=i(7),a=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(r(t))return NaN;if(n(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=n(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=o.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):s.test(t)?NaN:+t}},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){(function(e){var i="object"==typeof e&&e&&e.Object===Object&&e;t.exports=i}).call(this,i(9))},function(t,e,i){var n=i(1);t.exports=function(){return n.Date.now()}},function(t,e,i){var n=i(2),r=i(11),a=i(8),s=Math.max,o=Math.min;t.exports=function(t,e,i){var l,u,d,h,c,p,f=0,g=!1,x=!1,v=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var i=l,n=u;return l=u=void 0,f=e,h=t.apply(n,i)}function b(t){var i=t-p;return void 0===p||i>=e||i<0||x&&t-f>=d}function m(){var t=r();if(b(t))return E(t);c=setTimeout(m,function(t){var i=e-(t-p);return x?o(i,d-(t-f)):i}(t))}function E(t){return c=void 0,v&&l?y(t):(l=u=void 0,h)}function T(){var t=r(),i=b(t);if(l=arguments,u=this,p=t,i){if(void 0===c)return function(t){return f=t,c=setTimeout(m,e),g?y(t):h}(p);if(x)return c=setTimeout(m,e),y(p)}return void 0===c&&(c=setTimeout(m,e)),h}return e=a(e)||0,n(i)&&(g=!!i.leading,d=(x="maxWait"in i)?s(a(i.maxWait)||0,e):d,v="trailing"in i?!!i.trailing:v),T.cancel=function(){void 0!==c&&clearTimeout(c),f=0,l=p=u=c=void 0},T.flush=function(){return void 0===c?h:E(r())},T}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=(n=i(12))&&n.__esModule?n:{default:n};function s(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}var o=function(){function t(e,i){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e,this.targetId=this.el.getAttribute("data-expands"),this.targetEl=document.getElementById(this.targetId),!this.targetEl)return console.warn("Can’t find expandable target with id “"+this.targetId+"”"),!1;this.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:""},i),this.expandedClasses=this.el.getAttribute("data-expands-class")||this.options.expandedClasses,this.expandedClasses.length&&(this.expandedClasses.indexOf(" ")>-1?this.expandedClasses=this.expandedClasses.split(" ").filter(function(t){return t.length}):this.expandedClasses=[this.expandedClasses]),this.shouldToggleHeight=this.el.hasAttribute("data-expands-height")||this.options.shouldToggleHeight,this.hasActiveText=!1,this.textEl=this.el.querySelector("[data-expands-text]"),this.textEl&&(this.defaultToggleText=this.textEl.textContent,this.activeToggleText=this.textEl.getAttribute("data-expands-text")||this.options.activeToggleText,this.hasActiveText=!!this.activeToggleText.length),this.init()}return r(t,[{key:"init",value:function(){this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),"a"===this.el.tagName.toLowerCase()&&this.el.setAttribute("role","button"),this.shouldToggleHeight&&this.heightToggleSetup(),this.el.addEventListener("click",this.toggle.bind(this)),this.el.addEventListener("keydown",this.keydownHandler.bind(this))}},{key:"keydownHandler",value:function(t){40==t.keyCode?this.expand():38!=t.keyCode&&27!=t.keyCode||this.collapse()}},{key:"heightToggleSetup",value:function(){var t=this;this.targetParentEl=this.targetEl.parentNode,this.updateExpandedHeight(),window.addEventListener("resize",(0,a.default)(function(e){t.updateExpandedHeight()},150))}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=this.targetEl.cloneNode(!0);e.style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: "+t+"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important",e.setAttribute("aria-hidden",!1),e.removeAttribute("id");var i=this.targetParentEl.insertBefore(e,this.targetEl),n=Math.round(parseFloat(i.offsetHeight));this.targetParentEl.removeChild(i),this.targetEl.style.maxHeight=n+"px"}},{key:"expand",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((t=this.el.classList).add.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1)}},{key:"collapse",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0)}},{key:"toggle",value:function(t){"true"===this.el.getAttribute("aria-expanded")?this.collapse():this.expand()}},{key:"destroy",value:function(){var t,e;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,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.removeEventListener("click",this.toggle),this.el.removeEventListener("keydown",this.keydownHandler)}}]),t}();e.default=o}])});
!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 function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=13)}([function(t,e,i){var n=i(1).Symbol;t.exports=n},function(t,e,i){var n=i(10),r="object"==typeof self&&self&&self.Object===Object&&self,a=n||r||Function("return this")();t.exports=a},function(t,e){t.exports=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}},function(t,e){t.exports=function(t){return null!=t&&"object"==typeof t}},function(t,e){var i=Object.prototype.toString;t.exports=function(t){return i.call(t)}},function(t,e,i){var n=i(0),r=Object.prototype,a=r.hasOwnProperty,s=r.toString,o=n?n.toStringTag:void 0;t.exports=function(t){var e=a.call(t,o),i=t[o];try{t[o]=void 0;var n=!0}catch(t){}var r=s.call(t);return n&&(e?t[o]=i:delete t[o]),r}},function(t,e,i){var n=i(0),r=i(5),a=i(4),s=n?n.toStringTag:void 0;t.exports=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":s&&s in Object(t)?r(t):a(t)}},function(t,e,i){var n=i(6),r=i(3);t.exports=function(t){return"symbol"==typeof t||r(t)&&"[object Symbol]"==n(t)}},function(t,e,i){var n=i(2),r=i(7),a=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,o=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt;t.exports=function(t){if("number"==typeof t)return t;if(r(t))return NaN;if(n(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=n(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=o.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):s.test(t)?NaN:+t}},function(t,e){var i;i=function(){return this}();try{i=i||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(i=window)}t.exports=i},function(t,e,i){(function(e){var i="object"==typeof e&&e&&e.Object===Object&&e;t.exports=i}).call(this,i(9))},function(t,e,i){var n=i(1);t.exports=function(){return n.Date.now()}},function(t,e,i){var n=i(2),r=i(11),a=i(8),s=Math.max,o=Math.min;t.exports=function(t,e,i){var l,u,d,h,c,p,f=0,g=!1,x=!1,v=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function y(e){var i=l,n=u;return l=u=void 0,f=e,h=t.apply(n,i)}function b(t){var i=t-p;return void 0===p||i>=e||i<0||x&&t-f>=d}function m(){var t=r();if(b(t))return E(t);c=setTimeout(m,function(t){var i=e-(t-p);return x?o(i,d-(t-f)):i}(t))}function E(t){return c=void 0,v&&l?y(t):(l=u=void 0,h)}function T(){var t=r(),i=b(t);if(l=arguments,u=this,p=t,i){if(void 0===c)return function(t){return f=t,c=setTimeout(m,e),g?y(t):h}(p);if(x)return c=setTimeout(m,e),y(p)}return void 0===c&&(c=setTimeout(m,e)),h}return e=a(e)||0,n(i)&&(g=!!i.leading,d=(x="maxWait"in i)?s(a(i.maxWait)||0,e):d,v="trailing"in i?!!i.trailing:v),T.cancel=function(){void 0!==c&&clearTimeout(c),f=0,l=p=u=c=void 0},T.flush=function(){return void 0===c?h:E(r())},T}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n,r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=(n=i(12))&&n.__esModule?n:{default:n};function s(t){if(Array.isArray(t)){for(var e=0,i=Array(t.length);e<t.length;e++)i[e]=t[e];return i}return Array.from(t)}var o=function(){function t(e,i){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e,this.targetId=this.el.getAttribute("data-expands"),this.targetEl=document.getElementById(this.targetId),!this.targetEl)return console.warn("Can’t find expandable target with id “"+this.targetId+"”"),!1;this.options=Object.assign({},{expandedClasses:"",shouldToggleHeight:!1,activeToggleText:""},i),this.expandedClasses=this.el.getAttribute("data-expands-class")||this.options.expandedClasses,this.expandedClasses.length&&(this.expandedClasses.indexOf(" ")>-1?this.expandedClasses=this.expandedClasses.split(" ").filter(function(t){return t.length}):this.expandedClasses=[this.expandedClasses]),this.shouldToggleHeight=this.el.hasAttribute("data-expands-height")||this.options.shouldToggleHeight,this.hasActiveText=!1,this.textEl=this.el.querySelector("[data-expands-text]"),this.textEl&&(this.defaultToggleText=this.textEl.textContent,this.activeToggleText=this.textEl.getAttribute("data-expands-text")||this.options.activeToggleText,this.hasActiveText=!!this.activeToggleText.length),this.init()}return r(t,[{key:"init",value:function(){this.el.setAttribute("aria-haspopup",!0),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0),"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)}},{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;this.targetParentEl=this.targetEl.parentNode,this.updateExpandedHeight(),window.addEventListener("resize",(0,a.default)(function(e){t.updateExpandedHeight()},150))}},{key:"updateExpandedHeight",value:function(){var t=Math.round(parseFloat(this.targetEl.offsetWidth)),e=this.targetEl.cloneNode(!0);e.style.cssText="max-height: none !important; position: absolute !important; right: 100% !important; visibility: hidden !important; width: "+t+"px !important; -webkit-transition: none !important; -moz-transition: none !important; transition: none !important",e.setAttribute("aria-hidden",!1),e.removeAttribute("id");var i=this.targetParentEl.insertBefore(e,this.targetEl),n=Math.round(parseFloat(i.offsetHeight));this.targetParentEl.removeChild(i),this.targetEl.style.maxHeight=n+"px"}},{key:"expand",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.activeToggleText),this.expandedClasses.length&&((t=this.el.classList).add.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).add.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!0),this.targetEl.setAttribute("aria-hidden",!1)}},{key:"collapse",value:function(){var t,e;this.hasActiveText&&(this.textEl.textContent=this.defaultToggleText),this.expandedClasses.length&&((t=this.el.classList).remove.apply(t,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.setAttribute("aria-expanded",!1),this.targetEl.setAttribute("aria-hidden",!0)}},{key:"toggle",value:function(t){"true"===this.el.getAttribute("aria-expanded")?this.collapse():this.expand()}},{key:"destroy",value:function(){var t,e;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,s(this.expandedClasses)),(e=this.targetEl.classList).remove.apply(e,s(this.expandedClasses))),this.el.removeEventListener("click",this.clickHandler),this.el.removeEventListener("keydown",this.keydownHandler)}}]),t}();e.default=o}])});

2

dist/expand-toggle.amd.js

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

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _debounce2 = _interopRequireDefault(_debounce);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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.defaultToggleText=\"\"] - Expanded state toggle button text\n */\nvar ExpandToggle = function () {\n function ExpandToggle(el, opts) {\n _classCallCheck(this, ExpandToggle);\n\n var self = this;\n this.el = el;\n this.targetId = this.el.getAttribute(\"data-expands\");\n this.targetEl = document.getElementById(this.targetId);\n\n // Ensure target element exist before initializing\n if (!this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\" + this.targetId + \"\\u201D\");\n return false;\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n this.options = Object.assign({}, {\n expandedClasses: \"\", // string, accepts multiple space-separated classes\n shouldToggleHeight: false, // should target element’s height be animated using max-height\n activeToggleText: \"\" // expanded state toggle button text\n }, opts);\n\n // Check for custom expanded class(es)\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 }\n\n // Check if height should be animated\n this.shouldToggleHeight = this.el.hasAttribute(\"data-expands-height\") || this.options.shouldToggleHeight;\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\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\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n var self = this;\n\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", false);\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\", true);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n }\n\n // Add click event listener on toggle button\n this.el.addEventListener(\"click\", this.toggle.bind(this));\n\n // Keyboard listeners on toggle button\n this.el.addEventListener(\"keydown\", this.keydownHandler.bind(this));\n }\n }, {\n key: \"keydownHandler\",\n value: function keydownHandler(evt) {\n // Expand with down arrow\n if (evt.keyCode == 40) {\n this.expand();\n } else if (evt.keyCode == 38 || evt.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 self = this;\n this.targetParentEl = this.targetEl.parentNode;\n\n // Set max-height to the expanded height so we can animate it.\n this.updateExpandedHeight();\n\n // Update target element’s max-height on resize\n window.addEventListener(\"resize\", (0, _debounce2.default)(function (event) {\n self.updateExpandedHeight();\n }, 150));\n }\n\n // Set max-height of target element to its expanded height without triggering relayout.\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 // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth));\n\n // Create clone of node\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n 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\";\n\n // Update “aria-hidden” attribute\n cloneEl.setAttribute(\"aria-hidden\", false);\n\n // Remove id just to be safe\n cloneEl.removeAttribute(\"id\");\n\n // Append clone to document, save as new var so we can remove it later\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl);\n\n // Calculate height\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight));\n\n // Remove cloned node to clean up after ourselves\n this.targetParentEl.removeChild(newEl);\n\n // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand() {\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 _el$classList, _targetEl$classList;\n\n (_el$classList = this.el.classList).add.apply(_el$classList, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList = this.targetEl.classList).add.apply(_targetEl$classList, _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 }, {\n key: \"collapse\",\n value: function collapse() {\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 _el$classList2, _targetEl$classList2;\n\n (_el$classList2 = this.el.classList).remove.apply(_el$classList2, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList2 = this.targetEl.classList).remove.apply(_targetEl$classList2, _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 }, {\n key: \"toggle\",\n value: function toggle(evt) {\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse();\n } else {\n this.expand();\n }\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\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 }\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n if (this.expandedClasses.length) {\n var _el$classList3, _targetEl$classList3;\n\n (_el$classList3 = this.el.classList).remove.apply(_el$classList3, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList3 = this.targetEl.classList).remove.apply(_targetEl$classList3, _toConsumableArray(this.expandedClasses));\n }\n\n this.el.removeEventListener(\"click\", this.toggle);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n }\n }]);\n\n return ExpandToggle;\n}();\n\nexports.default = ExpandToggle;\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _debounce2 = _interopRequireDefault(_debounce);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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.defaultToggleText=\"\"] - Expanded state toggle button text\n */\nvar ExpandToggle = function () {\n function ExpandToggle(el, opts) {\n _classCallCheck(this, ExpandToggle);\n\n var self = this;\n this.el = el;\n this.targetId = this.el.getAttribute(\"data-expands\");\n this.targetEl = document.getElementById(this.targetId);\n\n // Ensure target element exist before initializing\n if (!this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\" + this.targetId + \"\\u201D\");\n return false;\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n this.options = Object.assign({}, {\n expandedClasses: \"\", // string, accepts multiple space-separated classes\n shouldToggleHeight: false, // should target element’s height be animated using max-height\n activeToggleText: \"\" // expanded state toggle button text\n }, opts);\n\n // Check for custom expanded class(es)\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 }\n\n // Check if height should be animated\n this.shouldToggleHeight = this.el.hasAttribute(\"data-expands-height\") || this.options.shouldToggleHeight;\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\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\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", false);\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\", true);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n }\n\n // Click event listener on toggle button\n // Note: Callback needs to be assigned to a var 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 }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(evt) {\n // Expand with down arrow\n if (evt.keyCode == 40) {\n this.expand();\n } else if (evt.keyCode == 38 || evt.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 self = this;\n this.targetParentEl = this.targetEl.parentNode;\n\n // Set max-height to the expanded height so we can animate it.\n this.updateExpandedHeight();\n\n // Update target element’s max-height on resize\n window.addEventListener(\"resize\", (0, _debounce2.default)(function (event) {\n self.updateExpandedHeight();\n }, 150));\n }\n\n // Set max-height of target element to its expanded height without triggering relayout.\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 // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth));\n\n // Create clone of node\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n 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\";\n\n // Update “aria-hidden” attribute\n cloneEl.setAttribute(\"aria-hidden\", false);\n\n // Remove id just to be safe\n cloneEl.removeAttribute(\"id\");\n\n // Append clone to document, save as new var so we can remove it later\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl);\n\n // Calculate height\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight));\n\n // Remove cloned node to clean up after ourselves\n this.targetParentEl.removeChild(newEl);\n\n // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand() {\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 _el$classList, _targetEl$classList;\n\n (_el$classList = this.el.classList).add.apply(_el$classList, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList = this.targetEl.classList).add.apply(_targetEl$classList, _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 }, {\n key: \"collapse\",\n value: function collapse() {\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 _el$classList2, _targetEl$classList2;\n\n (_el$classList2 = this.el.classList).remove.apply(_el$classList2, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList2 = this.targetEl.classList).remove.apply(_targetEl$classList2, _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 }, {\n key: \"toggle\",\n value: function toggle(evt) {\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse();\n } else {\n this.expand();\n }\n }\n\n // Remove attributes and event listeners\n\n }, {\n key: \"destroy\",\n value: function destroy() {\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 }\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n if (this.expandedClasses.length) {\n var _el$classList3, _targetEl$classList3;\n\n (_el$classList3 = this.el.classList).remove.apply(_el$classList3, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList3 = this.targetEl.classList).remove.apply(_targetEl$classList3, _toConsumableArray(this.expandedClasses));\n }\n\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n }\n }]);\n\n return ExpandToggle;\n}();\n\nexports.default = ExpandToggle;\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");

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

2

dist/expand-toggle.m.js

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

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _debounce2 = _interopRequireDefault(_debounce);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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.defaultToggleText=\"\"] - Expanded state toggle button text\n */\nvar ExpandToggle = function () {\n function ExpandToggle(el, opts) {\n _classCallCheck(this, ExpandToggle);\n\n var self = this;\n this.el = el;\n this.targetId = this.el.getAttribute(\"data-expands\");\n this.targetEl = document.getElementById(this.targetId);\n\n // Ensure target element exist before initializing\n if (!this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\" + this.targetId + \"\\u201D\");\n return false;\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n this.options = Object.assign({}, {\n expandedClasses: \"\", // string, accepts multiple space-separated classes\n shouldToggleHeight: false, // should target element’s height be animated using max-height\n activeToggleText: \"\" // expanded state toggle button text\n }, opts);\n\n // Check for custom expanded class(es)\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 }\n\n // Check if height should be animated\n this.shouldToggleHeight = this.el.hasAttribute(\"data-expands-height\") || this.options.shouldToggleHeight;\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\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\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n var self = this;\n\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", false);\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\", true);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n }\n\n // Add click event listener on toggle button\n this.el.addEventListener(\"click\", this.toggle.bind(this));\n\n // Keyboard listeners on toggle button\n this.el.addEventListener(\"keydown\", this.keydownHandler.bind(this));\n }\n }, {\n key: \"keydownHandler\",\n value: function keydownHandler(evt) {\n // Expand with down arrow\n if (evt.keyCode == 40) {\n this.expand();\n } else if (evt.keyCode == 38 || evt.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 self = this;\n this.targetParentEl = this.targetEl.parentNode;\n\n // Set max-height to the expanded height so we can animate it.\n this.updateExpandedHeight();\n\n // Update target element’s max-height on resize\n window.addEventListener(\"resize\", (0, _debounce2.default)(function (event) {\n self.updateExpandedHeight();\n }, 150));\n }\n\n // Set max-height of target element to its expanded height without triggering relayout.\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 // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth));\n\n // Create clone of node\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n 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\";\n\n // Update “aria-hidden” attribute\n cloneEl.setAttribute(\"aria-hidden\", false);\n\n // Remove id just to be safe\n cloneEl.removeAttribute(\"id\");\n\n // Append clone to document, save as new var so we can remove it later\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl);\n\n // Calculate height\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight));\n\n // Remove cloned node to clean up after ourselves\n this.targetParentEl.removeChild(newEl);\n\n // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand() {\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 _el$classList, _targetEl$classList;\n\n (_el$classList = this.el.classList).add.apply(_el$classList, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList = this.targetEl.classList).add.apply(_targetEl$classList, _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 }, {\n key: \"collapse\",\n value: function collapse() {\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 _el$classList2, _targetEl$classList2;\n\n (_el$classList2 = this.el.classList).remove.apply(_el$classList2, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList2 = this.targetEl.classList).remove.apply(_targetEl$classList2, _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 }, {\n key: \"toggle\",\n value: function toggle(evt) {\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse();\n } else {\n this.expand();\n }\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\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 }\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n if (this.expandedClasses.length) {\n var _el$classList3, _targetEl$classList3;\n\n (_el$classList3 = this.el.classList).remove.apply(_el$classList3, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList3 = this.targetEl.classList).remove.apply(_targetEl$classList3, _toConsumableArray(this.expandedClasses));\n }\n\n this.el.removeEventListener(\"click\", this.toggle);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n }\n }]);\n\n return ExpandToggle;\n}();\n\nexports.default = ExpandToggle;\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _debounce2 = _interopRequireDefault(_debounce);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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.defaultToggleText=\"\"] - Expanded state toggle button text\n */\nvar ExpandToggle = function () {\n function ExpandToggle(el, opts) {\n _classCallCheck(this, ExpandToggle);\n\n var self = this;\n this.el = el;\n this.targetId = this.el.getAttribute(\"data-expands\");\n this.targetEl = document.getElementById(this.targetId);\n\n // Ensure target element exist before initializing\n if (!this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\" + this.targetId + \"\\u201D\");\n return false;\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n this.options = Object.assign({}, {\n expandedClasses: \"\", // string, accepts multiple space-separated classes\n shouldToggleHeight: false, // should target element’s height be animated using max-height\n activeToggleText: \"\" // expanded state toggle button text\n }, opts);\n\n // Check for custom expanded class(es)\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 }\n\n // Check if height should be animated\n this.shouldToggleHeight = this.el.hasAttribute(\"data-expands-height\") || this.options.shouldToggleHeight;\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\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\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", false);\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\", true);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n }\n\n // Click event listener on toggle button\n // Note: Callback needs to be assigned to a var 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 }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(evt) {\n // Expand with down arrow\n if (evt.keyCode == 40) {\n this.expand();\n } else if (evt.keyCode == 38 || evt.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 self = this;\n this.targetParentEl = this.targetEl.parentNode;\n\n // Set max-height to the expanded height so we can animate it.\n this.updateExpandedHeight();\n\n // Update target element’s max-height on resize\n window.addEventListener(\"resize\", (0, _debounce2.default)(function (event) {\n self.updateExpandedHeight();\n }, 150));\n }\n\n // Set max-height of target element to its expanded height without triggering relayout.\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 // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth));\n\n // Create clone of node\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n 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\";\n\n // Update “aria-hidden” attribute\n cloneEl.setAttribute(\"aria-hidden\", false);\n\n // Remove id just to be safe\n cloneEl.removeAttribute(\"id\");\n\n // Append clone to document, save as new var so we can remove it later\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl);\n\n // Calculate height\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight));\n\n // Remove cloned node to clean up after ourselves\n this.targetParentEl.removeChild(newEl);\n\n // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand() {\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 _el$classList, _targetEl$classList;\n\n (_el$classList = this.el.classList).add.apply(_el$classList, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList = this.targetEl.classList).add.apply(_targetEl$classList, _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 }, {\n key: \"collapse\",\n value: function collapse() {\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 _el$classList2, _targetEl$classList2;\n\n (_el$classList2 = this.el.classList).remove.apply(_el$classList2, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList2 = this.targetEl.classList).remove.apply(_targetEl$classList2, _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 }, {\n key: \"toggle\",\n value: function toggle(evt) {\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse();\n } else {\n this.expand();\n }\n }\n\n // Remove attributes and event listeners\n\n }, {\n key: \"destroy\",\n value: function destroy() {\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 }\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n if (this.expandedClasses.length) {\n var _el$classList3, _targetEl$classList3;\n\n (_el$classList3 = this.el.classList).remove.apply(_el$classList3, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList3 = this.targetEl.classList).remove.apply(_targetEl$classList3, _toConsumableArray(this.expandedClasses));\n }\n\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n }\n }]);\n\n return ExpandToggle;\n}();\n\nexports.default = ExpandToggle;\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");

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

2

dist/expand-toggle.umd.js

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

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _debounce2 = _interopRequireDefault(_debounce);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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.defaultToggleText=\"\"] - Expanded state toggle button text\n */\nvar ExpandToggle = function () {\n function ExpandToggle(el, opts) {\n _classCallCheck(this, ExpandToggle);\n\n var self = this;\n this.el = el;\n this.targetId = this.el.getAttribute(\"data-expands\");\n this.targetEl = document.getElementById(this.targetId);\n\n // Ensure target element exist before initializing\n if (!this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\" + this.targetId + \"\\u201D\");\n return false;\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n this.options = Object.assign({}, {\n expandedClasses: \"\", // string, accepts multiple space-separated classes\n shouldToggleHeight: false, // should target element’s height be animated using max-height\n activeToggleText: \"\" // expanded state toggle button text\n }, opts);\n\n // Check for custom expanded class(es)\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 }\n\n // Check if height should be animated\n this.shouldToggleHeight = this.el.hasAttribute(\"data-expands-height\") || this.options.shouldToggleHeight;\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\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\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n var self = this;\n\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", false);\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\", true);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n }\n\n // Add click event listener on toggle button\n this.el.addEventListener(\"click\", this.toggle.bind(this));\n\n // Keyboard listeners on toggle button\n this.el.addEventListener(\"keydown\", this.keydownHandler.bind(this));\n }\n }, {\n key: \"keydownHandler\",\n value: function keydownHandler(evt) {\n // Expand with down arrow\n if (evt.keyCode == 40) {\n this.expand();\n } else if (evt.keyCode == 38 || evt.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 self = this;\n this.targetParentEl = this.targetEl.parentNode;\n\n // Set max-height to the expanded height so we can animate it.\n this.updateExpandedHeight();\n\n // Update target element’s max-height on resize\n window.addEventListener(\"resize\", (0, _debounce2.default)(function (event) {\n self.updateExpandedHeight();\n }, 150));\n }\n\n // Set max-height of target element to its expanded height without triggering relayout.\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 // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth));\n\n // Create clone of node\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n 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\";\n\n // Update “aria-hidden” attribute\n cloneEl.setAttribute(\"aria-hidden\", false);\n\n // Remove id just to be safe\n cloneEl.removeAttribute(\"id\");\n\n // Append clone to document, save as new var so we can remove it later\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl);\n\n // Calculate height\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight));\n\n // Remove cloned node to clean up after ourselves\n this.targetParentEl.removeChild(newEl);\n\n // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand() {\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 _el$classList, _targetEl$classList;\n\n (_el$classList = this.el.classList).add.apply(_el$classList, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList = this.targetEl.classList).add.apply(_targetEl$classList, _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 }, {\n key: \"collapse\",\n value: function collapse() {\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 _el$classList2, _targetEl$classList2;\n\n (_el$classList2 = this.el.classList).remove.apply(_el$classList2, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList2 = this.targetEl.classList).remove.apply(_targetEl$classList2, _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 }, {\n key: \"toggle\",\n value: function toggle(evt) {\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse();\n } else {\n this.expand();\n }\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\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 }\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n if (this.expandedClasses.length) {\n var _el$classList3, _targetEl$classList3;\n\n (_el$classList3 = this.el.classList).remove.apply(_el$classList3, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList3 = this.targetEl.classList).remove.apply(_targetEl$classList3, _toConsumableArray(this.expandedClasses));\n }\n\n this.el.removeEventListener(\"click\", this.toggle);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n }\n }]);\n\n return ExpandToggle;\n}();\n\nexports.default = ExpandToggle;\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");
eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _debounce = __webpack_require__(/*! lodash/debounce */ \"./node_modules/lodash/debounce.js\");\n\nvar _debounce2 = _interopRequireDefault(_debounce);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\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.defaultToggleText=\"\"] - Expanded state toggle button text\n */\nvar ExpandToggle = function () {\n function ExpandToggle(el, opts) {\n _classCallCheck(this, ExpandToggle);\n\n var self = this;\n this.el = el;\n this.targetId = this.el.getAttribute(\"data-expands\");\n this.targetEl = document.getElementById(this.targetId);\n\n // Ensure target element exist before initializing\n if (!this.targetEl) {\n console.warn(\"Can\\u2019t find expandable target with id \\u201C\" + this.targetId + \"\\u201D\");\n return false;\n }\n\n // Use Object.assign() to merge “opts” object with default values in this.options\n this.options = Object.assign({}, {\n expandedClasses: \"\", // string, accepts multiple space-separated classes\n shouldToggleHeight: false, // should target element’s height be animated using max-height\n activeToggleText: \"\" // expanded state toggle button text\n }, opts);\n\n // Check for custom expanded class(es)\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 }\n\n // Check if height should be animated\n this.shouldToggleHeight = this.el.hasAttribute(\"data-expands-height\") || this.options.shouldToggleHeight;\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\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\n _createClass(ExpandToggle, [{\n key: \"init\",\n value: function init() {\n // Accessibility setup\n this.el.setAttribute(\"aria-haspopup\", true);\n this.el.setAttribute(\"aria-expanded\", false);\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\", true);\n\n if (this.el.tagName.toLowerCase() === \"a\") {\n this.el.setAttribute(\"role\", \"button\");\n }\n\n if (this.shouldToggleHeight) {\n this.heightToggleSetup();\n }\n\n // Click event listener on toggle button\n // Note: Callback needs to be assigned to a var 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 }, {\n key: \"keyboardEvents\",\n value: function keyboardEvents(evt) {\n // Expand with down arrow\n if (evt.keyCode == 40) {\n this.expand();\n } else if (evt.keyCode == 38 || evt.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 self = this;\n this.targetParentEl = this.targetEl.parentNode;\n\n // Set max-height to the expanded height so we can animate it.\n this.updateExpandedHeight();\n\n // Update target element’s max-height on resize\n window.addEventListener(\"resize\", (0, _debounce2.default)(function (event) {\n self.updateExpandedHeight();\n }, 150));\n }\n\n // Set max-height of target element to its expanded height without triggering relayout.\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 // Get width of original element so we can apply it to the clone\n var nodeWidth = Math.round(parseFloat(this.targetEl.offsetWidth));\n\n // Create clone of node\n var cloneEl = this.targetEl.cloneNode(true); // 'true' includes child nodes\n\n // Inline styles added to prevent reflow, ensure clone is same size as expanded element\n 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\";\n\n // Update “aria-hidden” attribute\n cloneEl.setAttribute(\"aria-hidden\", false);\n\n // Remove id just to be safe\n cloneEl.removeAttribute(\"id\");\n\n // Append clone to document, save as new var so we can remove it later\n var newEl = this.targetParentEl.insertBefore(cloneEl, this.targetEl);\n\n // Calculate height\n var expandedHeight = Math.round(parseFloat(newEl.offsetHeight));\n\n // Remove cloned node to clean up after ourselves\n this.targetParentEl.removeChild(newEl);\n\n // Apply inline max-height to collapsed element\n // Note: CSS is overriding this when aria-hidden=\"true\"\n this.targetEl.style.maxHeight = expandedHeight + \"px\";\n }\n }, {\n key: \"expand\",\n value: function expand() {\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 _el$classList, _targetEl$classList;\n\n (_el$classList = this.el.classList).add.apply(_el$classList, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList = this.targetEl.classList).add.apply(_targetEl$classList, _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 }, {\n key: \"collapse\",\n value: function collapse() {\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 _el$classList2, _targetEl$classList2;\n\n (_el$classList2 = this.el.classList).remove.apply(_el$classList2, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList2 = this.targetEl.classList).remove.apply(_targetEl$classList2, _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 }, {\n key: \"toggle\",\n value: function toggle(evt) {\n if (this.el.getAttribute(\"aria-expanded\") === \"true\") {\n this.collapse();\n } else {\n this.expand();\n }\n }\n\n // Remove attributes and event listeners\n\n }, {\n key: \"destroy\",\n value: function destroy() {\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 }\n\n if (this.hasActiveText) {\n this.textEl.textContent = this.defaultToggleText;\n }\n\n if (this.expandedClasses.length) {\n var _el$classList3, _targetEl$classList3;\n\n (_el$classList3 = this.el.classList).remove.apply(_el$classList3, _toConsumableArray(this.expandedClasses));\n (_targetEl$classList3 = this.targetEl.classList).remove.apply(_targetEl$classList3, _toConsumableArray(this.expandedClasses));\n }\n\n this.el.removeEventListener(\"click\", this.clickHandler);\n this.el.removeEventListener(\"keydown\", this.keydownHandler);\n }\n }]);\n\n return ExpandToggle;\n}();\n\nexports.default = ExpandToggle;\n\n//# sourceURL=webpack://%5Bname%5DLink/./index.js?");

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

18

index.js

@@ -62,3 +62,2 @@ "use strict";

// Check for custom toggle button text to use when expanded

@@ -80,4 +79,2 @@ this.hasActiveText = false;

init() {
var self = this;
// Accessibility setup

@@ -99,10 +96,14 @@ this.el.setAttribute("aria-haspopup", true);

// Add click event listener on toggle button
this.el.addEventListener("click", this.toggle.bind(this));
// Click event listener on toggle button
// Note: Callback needs to be assigned to a var so we can remove it since we’re using bind()
// https://stackoverflow.com/a/22870717/673457
this.clickHandler = this.toggle.bind(this);
this.el.addEventListener("click", this.clickHandler);
// Keyboard listeners on toggle button
this.el.addEventListener("keydown", this.keydownHandler.bind(this));
this.keydownHandler = this.keyboardEvents.bind(this);
this.el.addEventListener("keydown", this.keydownHandler);
}
keydownHandler(evt) {
keyboardEvents(evt) {
// Expand with down arrow

@@ -216,2 +217,3 @@ if (evt.keyCode == 40) {

// Remove attributes and event listeners
destroy() {

@@ -236,5 +238,5 @@ this.el.removeAttribute("aria-haspopup");

this.el.removeEventListener("click", this.toggle);
this.el.removeEventListener("click", this.clickHandler);
this.el.removeEventListener("keydown", this.keydownHandler);
}
}

2

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

@@ -5,0 +5,0 @@ "main": "index.js",

13

test/index.test.js

@@ -265,2 +265,15 @@ import ExpandToggle from "../index";

</div>`));
// Try clicking toggle again
toggle.click();
expect(minify(document.body.innerHTML)).toBe(minify(`
<div>
<button type="button" data-expands="menu" class="">
<span data-expands-text="">Toggle Menu</span>
</button>
<div class="expandable" id="menu" style="">
<p>Menu content</p>
</div>
</div>`));
});

@@ -267,0 +280,0 @@ 

docs/index.html

Sorry, the diff of this file is not supported yet

docs/index.js.html

Sorry, the diff of this file is not supported yet

docs/module.exports.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