a11y-dropdown-component
Advanced tools
Comparing version 1.1.1 to 1.2.0
@@ -1,1 +0,1 @@ | ||
const Dropdowns=(()=>{const t={escape:27,end:35,home:36,up:38,down:40};class e{constructor(t){this.trigger=t.trigger,this.dropdown=document.getElementById(t.dropdown),this.items=this.dropdown.querySelectorAll("[data-item]"),this.links=this.dropdown.querySelectorAll("[data-focus]"),[this.firstLink]=this.links,this.lastLink=this.links[this.links.length-1],this.state=[],this.currentFocusedIndex=0,this.hover=t.hover,this.isOpen=t.isOpen,this.open=this.open.bind(this),this.toggle=this.toggle.bind(this),this.onClick=this.onClick.bind(this),this.onFocus=this.onFocus.bind(this),this.onKeydown=this.onKeydown.bind(this),this.isOpen&&this.open()}onClick(t){t.target.closest(`#${this.trigger.id}, #${this.dropdown.id}`)||this.close()}onFocus(t){this.state.forEach((e,i)=>{t.target===e.link&&(this.currentFocusedIndex=i)})}setFocus(e){switch(e.preventDefault(),e.target===this.trigger&&(this.currentFocusedIndex=0),e.which){case t.up:this.state[this.currentFocusedIndex].prevLink.focus();break;case t.home:this.firstLink.focus();break;case t.end:this.lastLink.focus();break;case t.down:e.target!==this.trigger?this.state[this.currentFocusedIndex].nextLink.focus():this.firstLink.focus()}}onKeydown(e){switch(e.which){case t.escape:this.close(e);break;case t.up:case t.down:case t.home:case t.end:this.setFocus(e)}}addAttributes(){this.trigger.setAttribute("aria-haspopup",!0),this.trigger.setAttribute("aria-controls",this.trigger.dataset.target),this.dropdown.setAttribute("role","menu"),this.dropdown.setAttribute("aria-labelledby",this.trigger.id),this.dropdown.setAttribute("tabindex",-1),this.dropdown.setAttribute("aria-hidden",!this.isOpen),this.state.forEach(t=>{t.item&&t.item.setAttribute("role","none"),t.link.setAttribute("role","menuitem"),t.link.setAttribute("tabindex",-1)})}removeAttributes(){this.trigger.removeAttribute("aria-haspopup"),this.trigger.removeAttribute("aria-controls"),this.trigger.removeAttribute("aria-expanded"),this.dropdown.removeAttribute("role"),this.dropdown.removeAttribute("aria-labelledby"),this.dropdown.removeAttribute("tabindex"),this.dropdown.removeAttribute("aria-hidden"),this.state.forEach(t=>{t.item&&t.item.removeAttribute("role"),t.link.removeAttribute("role"),t.link.removeAttribute("tabindex")})}addEventListeners(){document.addEventListener("click",this.onClick),this.hover&&document.addEventListener("mouseover",this.onClick),this.trigger.addEventListener("keydown",this.onKeydown),this.dropdown.addEventListener("keydown",this.onKeydown),this.links.forEach(t=>{t.addEventListener("focus",this.onFocus)})}removeEventListeners(){document.removeEventListener("click",this.onClick),this.hover&&document.removeEventListener("mouseover",this.onClick),this.trigger.removeEventListener("keydown",this.onKeydown),this.dropdown.removeEventListener("keydown",this.onKeydown),this.links.forEach(t=>{t.removeEventListener("focus",this.onFocus)})}open(){this.isOpen=!0,this.trigger.setAttribute("aria-expanded",!0),this.dropdown.setAttribute("aria-hidden",!1),this.addEventListeners()}close(t){this.isOpen=!1,this.trigger.setAttribute("aria-expanded",!1),this.dropdown.setAttribute("aria-hidden",!0),this.removeEventListeners(),t&&this.trigger.focus()}toggle(t){t.preventDefault(),this.isOpen=!this.isOpen,this.isOpen?this.open():this.close()}destroy(){this.removeAttributes(),this.removeEventListeners(),this.trigger.removeEventListener("click",this.toggle),this.hover&&this.trigger.removeEventListener("mouseover",this.open)}render(){this.links.forEach((t,e)=>{this.state.push({item:this.items[e],link:t,prevLink:this.links[e-1]||this.lastLink,nextLink:this.links[e+1]||this.firstLink})}),this.addAttributes(),this.trigger.addEventListener("click",this.toggle),this.hover&&this.trigger.addEventListener("mouseover",this.open)}}const i=[];return{render:(t,{isOpen:s=!1,hover:r=!1}={})=>{const n=document.getElementById(t),o=n.dataset.target,h=new e({trigger:n,dropdown:o,isOpen:s,hover:r});h.render(),i.push(h)},destroy:t=>{i.forEach((e,s)=>{t===e.trigger.id&&(e.destroy(),i.splice(s,1))})},init:()=>{const t={};document.querySelectorAll('[data-component="dropdown"]').forEach(i=>{t.trigger=i,t.dropdown=i.dataset.target,t.hover="true"===i.dataset.hover,t.isOpen="true"===i.dataset.open,new e(t).render()})}}})();export default Dropdowns; | ||
const Dropdowns=(()=>{const t={escape:27,end:35,home:36,up:38,down:40};class e{constructor(t){this.trigger=t.trigger,this.dropdown=document.getElementById(t.dropdown),this.items=this.dropdown.querySelectorAll("[data-item]"),this.links=this.dropdown.querySelectorAll("[data-focus]"),[this.firstLink]=this.links,this.lastLink=this.links[this.links.length-1],this.state=[],this.currentFocusedIndex=0,this.hover=t.hover,this.isOpen=t.isOpen,this.autoClose=t.autoClose,this.open=this.open.bind(this),this.toggle=this.toggle.bind(this),this.onClick=this.onClick.bind(this),this.onFocus=this.onFocus.bind(this),this.onKeydown=this.onKeydown.bind(this),this.isOpen&&this.open()}onClick(t){this.autoClose||t.target.closest(`#${this.trigger.id}, #${this.dropdown.id}`)||this.close(),this.autoClose&&!t.target.closest(`#${this.trigger.id}`)&&this.close()}onFocus(t){this.state.forEach((e,i)=>{t.target===e.link&&(this.currentFocusedIndex=i)})}setFocus(e){switch(e.preventDefault(),e.target===this.trigger&&(this.currentFocusedIndex=0),e.which){case t.up:this.state[this.currentFocusedIndex].prevLink.focus();break;case t.home:this.firstLink.focus();break;case t.end:this.lastLink.focus();break;case t.down:e.target!==this.trigger?this.state[this.currentFocusedIndex].nextLink.focus():this.firstLink.focus()}}onKeydown(e){switch(e.which){case t.escape:this.close(e);break;case t.up:case t.down:case t.home:case t.end:this.setFocus(e)}}addAttributes(){this.trigger.setAttribute("aria-haspopup",!0),this.trigger.setAttribute("aria-controls",this.trigger.dataset.target),this.dropdown.setAttribute("role","menu"),this.dropdown.setAttribute("aria-labelledby",this.trigger.id),this.dropdown.setAttribute("tabindex",-1),this.dropdown.setAttribute("aria-hidden",!this.isOpen),this.state.forEach(t=>{t.item&&t.item.setAttribute("role","none"),t.link.setAttribute("role","menuitem"),t.link.setAttribute("tabindex",-1)})}removeAttributes(){this.trigger.removeAttribute("aria-haspopup"),this.trigger.removeAttribute("aria-controls"),this.trigger.removeAttribute("aria-expanded"),this.dropdown.removeAttribute("role"),this.dropdown.removeAttribute("aria-labelledby"),this.dropdown.removeAttribute("tabindex"),this.dropdown.removeAttribute("aria-hidden"),this.state.forEach(t=>{t.item&&t.item.removeAttribute("role"),t.link.removeAttribute("role"),t.link.removeAttribute("tabindex")})}addEventListeners(){document.addEventListener("click",this.onClick),this.hover&&document.addEventListener("mouseover",this.onClick),this.trigger.addEventListener("keydown",this.onKeydown),this.dropdown.addEventListener("keydown",this.onKeydown),this.links.forEach(t=>{t.addEventListener("focus",this.onFocus)})}removeEventListeners(){document.removeEventListener("click",this.onClick),this.hover&&document.removeEventListener("mouseover",this.onClick),this.trigger.removeEventListener("keydown",this.onKeydown),this.dropdown.removeEventListener("keydown",this.onKeydown),this.links.forEach(t=>{t.removeEventListener("focus",this.onFocus)})}open(){this.isOpen=!0,this.trigger.setAttribute("aria-expanded",!0),this.dropdown.setAttribute("aria-hidden",!1),this.addEventListeners()}close(t){this.isOpen=!1,this.trigger.setAttribute("aria-expanded",!1),this.dropdown.setAttribute("aria-hidden",!0),this.removeEventListeners(),t&&this.trigger.focus()}toggle(t){t.preventDefault(),this.isOpen=!this.isOpen,this.isOpen?this.open():this.close()}destroy(){this.removeAttributes(),this.removeEventListeners(),this.trigger.removeEventListener("click",this.toggle),this.hover&&this.trigger.removeEventListener("mouseover",this.open)}render(){this.links.forEach((t,e)=>{this.state.push({item:this.items[e],link:t,prevLink:this.links[e-1]||this.lastLink,nextLink:this.links[e+1]||this.firstLink})}),this.addAttributes(),this.trigger.addEventListener("click",this.toggle),this.hover&&this.trigger.addEventListener("mouseover",this.open)}}const i=[];return{render:(t,{isOpen:s=!1,hover:r=!1,autoClose:o=!1}={})=>{const n=document.getElementById(t),h=n.dataset.target,d=new e({trigger:n,dropdown:h,isOpen:s,hover:r,autoClose:o});d.render(),i.push(d)},destroy:t=>{i.forEach((e,s)=>{t===e.trigger.id&&(e.destroy(),i.splice(s,1))})},init:()=>{const t={};document.querySelectorAll('[data-component="dropdown"]').forEach(i=>{t.trigger=i,t.dropdown=i.dataset.target,t.hover="true"===i.dataset.hover,t.isOpen="true"===i.dataset.open,t.autoClose="true"===i.dataset.autoClose,new e(t).render()})}}})();export default Dropdowns; |
@@ -48,2 +48,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Dropdowns = f()}})(function(){var define,module,exports;return (function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){ | ||
this.isOpen = options.isOpen; | ||
this.autoClose = options.autoClose; | ||
@@ -62,5 +63,9 @@ this.open = this.open.bind(this); | ||
value: function onClick(event) { | ||
if (!event.target.closest('#' + this.trigger.id + ', #' + this.dropdown.id)) { | ||
if (!this.autoClose && !event.target.closest('#' + this.trigger.id + ', #' + this.dropdown.id)) { | ||
this.close(); | ||
} | ||
if (this.autoClose && !event.target.closest('#' + this.trigger.id)) { | ||
this.close(); | ||
} | ||
} | ||
@@ -267,3 +272,5 @@ }, { | ||
_ref$hover = _ref.hover, | ||
hover = _ref$hover === undefined ? false : _ref$hover; | ||
hover = _ref$hover === undefined ? false : _ref$hover, | ||
_ref$autoClose = _ref.autoClose, | ||
autoClose = _ref$autoClose === undefined ? false : _ref$autoClose; | ||
@@ -276,3 +283,4 @@ var trigger = document.getElementById(triggerId); | ||
isOpen: isOpen, | ||
hover: hover | ||
hover: hover, | ||
autoClose: autoClose | ||
}; | ||
@@ -308,2 +316,3 @@ | ||
options.isOpen = trigger.dataset.open === 'true'; | ||
options.autoClose = trigger.dataset.autoClose === 'true'; | ||
@@ -310,0 +319,0 @@ var dropdown = new Dropdown(options); |
@@ -1,1 +0,1 @@ | ||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).Dropdowns=e()}}(function(){return function(){return function e(t,i,n){function r(s,u){if(!i[s]){if(!t[s]){var d="function"==typeof require&&require;if(!u&&d)return d(s,!0);if(o)return o(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var h=i[s]={exports:{}};t[s][0].call(h.exports,function(e){var i=t[s][1][e];return r(i||e)},h,h.exports,e,t,i,n)}return i[s].exports}for(var o="function"==typeof require&&require,s=0;s<n.length;s++)r(n[s]);return r}}()({1:[function(e,t,i){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var n=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var i=[],n=!0,r=!1,o=void 0;try{for(var s,u=e[Symbol.iterator]();!(n=(s=u.next()).done)&&(i.push(s.value),!t||i.length!==t);n=!0);}catch(e){r=!0,o=e}finally{try{!n&&u.return&&u.return()}finally{if(r)throw o}}return i}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}();var o,s,u,d,a,h,c,l=(o=27,s=35,u=36,d=38,a=40,h=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.trigger=t.trigger,this.dropdown=document.getElementById(t.dropdown),this.items=this.dropdown.querySelectorAll("[data-item]"),this.links=this.dropdown.querySelectorAll("[data-focus]");var i=n(this.links,1);this.firstLink=i[0],this.lastLink=this.links[this.links.length-1],this.state=[],this.currentFocusedIndex=0,this.hover=t.hover,this.isOpen=t.isOpen,this.open=this.open.bind(this),this.toggle=this.toggle.bind(this),this.onClick=this.onClick.bind(this),this.onFocus=this.onFocus.bind(this),this.onKeydown=this.onKeydown.bind(this),this.isOpen&&this.open()}return r(e,[{key:"onClick",value:function(e){e.target.closest("#"+this.trigger.id+", #"+this.dropdown.id)||this.close()}},{key:"onFocus",value:function(e){var t=this;this.state.forEach(function(i,n){e.target===i.link&&(t.currentFocusedIndex=n)})}},{key:"setFocus",value:function(e){switch(e.preventDefault(),e.target===this.trigger&&(this.currentFocusedIndex=0),e.which){case d:this.state[this.currentFocusedIndex].prevLink.focus();break;case u:this.firstLink.focus();break;case s:this.lastLink.focus();break;case a:e.target!==this.trigger?this.state[this.currentFocusedIndex].nextLink.focus():this.firstLink.focus()}}},{key:"onKeydown",value:function(e){switch(e.which){case o:this.close(e);break;case d:case a:case u:case s:this.setFocus(e)}}},{key:"addAttributes",value:function(){this.trigger.setAttribute("aria-haspopup",!0),this.trigger.setAttribute("aria-controls",this.trigger.dataset.target),this.dropdown.setAttribute("role","menu"),this.dropdown.setAttribute("aria-labelledby",this.trigger.id),this.dropdown.setAttribute("tabindex",-1),this.dropdown.setAttribute("aria-hidden",!this.isOpen),this.state.forEach(function(e){e.item&&e.item.setAttribute("role","none"),e.link.setAttribute("role","menuitem"),e.link.setAttribute("tabindex",-1)})}},{key:"removeAttributes",value:function(){this.trigger.removeAttribute("aria-haspopup"),this.trigger.removeAttribute("aria-controls"),this.trigger.removeAttribute("aria-expanded"),this.dropdown.removeAttribute("role"),this.dropdown.removeAttribute("aria-labelledby"),this.dropdown.removeAttribute("tabindex"),this.dropdown.removeAttribute("aria-hidden"),this.state.forEach(function(e){e.item&&e.item.removeAttribute("role"),e.link.removeAttribute("role"),e.link.removeAttribute("tabindex")})}},{key:"addEventListeners",value:function(){var e=this;document.addEventListener("click",this.onClick),this.hover&&document.addEventListener("mouseover",this.onClick),this.trigger.addEventListener("keydown",this.onKeydown),this.dropdown.addEventListener("keydown",this.onKeydown),this.links.forEach(function(t){t.addEventListener("focus",e.onFocus)})}},{key:"removeEventListeners",value:function(){var e=this;document.removeEventListener("click",this.onClick),this.hover&&document.removeEventListener("mouseover",this.onClick),this.trigger.removeEventListener("keydown",this.onKeydown),this.dropdown.removeEventListener("keydown",this.onKeydown),this.links.forEach(function(t){t.removeEventListener("focus",e.onFocus)})}},{key:"open",value:function(){this.isOpen=!0,this.trigger.setAttribute("aria-expanded",!0),this.dropdown.setAttribute("aria-hidden",!1),this.addEventListeners()}},{key:"close",value:function(e){this.isOpen=!1,this.trigger.setAttribute("aria-expanded",!1),this.dropdown.setAttribute("aria-hidden",!0),this.removeEventListeners(),e&&this.trigger.focus()}},{key:"toggle",value:function(e){e.preventDefault(),this.isOpen=!this.isOpen,this.isOpen?this.open():this.close()}},{key:"destroy",value:function(){this.removeAttributes(),this.removeEventListeners(),this.trigger.removeEventListener("click",this.toggle),this.hover&&this.trigger.removeEventListener("mouseover",this.open)}},{key:"render",value:function(){var e=this;this.links.forEach(function(t,i){e.state.push({item:e.items[i],link:t,prevLink:e.links[i-1]||e.lastLink,nextLink:e.links[i+1]||e.firstLink})}),this.addAttributes(),this.trigger.addEventListener("click",this.toggle),this.hover&&this.trigger.addEventListener("mouseover",this.open)}}]),e}(),c=[],{render:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.isOpen,n=void 0!==i&&i,r=t.hover,o=void 0!==r&&r,s=document.getElementById(e),u=s.dataset.target,d=new h({trigger:s,dropdown:u,isOpen:n,hover:o});d.render(),c.push(d)},destroy:function(e){c.forEach(function(t,i){e===t.trigger.id&&(t.destroy(),c.splice(i,1))})},init:function(){var e={};document.querySelectorAll('[data-component="dropdown"]').forEach(function(t){e.trigger=t,e.dropdown=t.dataset.target,e.hover="true"===t.dataset.hover,e.isOpen="true"===t.dataset.open,new h(e).render()})}});i.default=l},{}]},{},[1])(1)}); | ||
!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).Dropdowns=t()}}(function(){return function(){return function t(e,i,n){function r(s,u){if(!i[s]){if(!e[s]){var a="function"==typeof require&&require;if(!u&&a)return a(s,!0);if(o)return o(s,!0);var d=new Error("Cannot find module '"+s+"'");throw d.code="MODULE_NOT_FOUND",d}var h=i[s]={exports:{}};e[s][0].call(h.exports,function(t){var i=e[s][1][t];return r(i||t)},h,h.exports,t,e,i,n)}return i[s].exports}for(var o="function"==typeof require&&require,s=0;s<n.length;s++)r(n[s]);return r}}()({1:[function(t,e,i){"use strict";Object.defineProperty(i,"__esModule",{value:!0});var n=function(){return function(t,e){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,e){var i=[],n=!0,r=!1,o=void 0;try{for(var s,u=t[Symbol.iterator]();!(n=(s=u.next()).done)&&(i.push(s.value),!e||i.length!==e);n=!0);}catch(t){r=!0,o=t}finally{try{!n&&u.return&&u.return()}finally{if(r)throw o}}return i}(t,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),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}}();var o,s,u,a,d,h,c,l=(o=27,s=35,u=36,a=38,d=40,h=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.trigger=e.trigger,this.dropdown=document.getElementById(e.dropdown),this.items=this.dropdown.querySelectorAll("[data-item]"),this.links=this.dropdown.querySelectorAll("[data-focus]");var i=n(this.links,1);this.firstLink=i[0],this.lastLink=this.links[this.links.length-1],this.state=[],this.currentFocusedIndex=0,this.hover=e.hover,this.isOpen=e.isOpen,this.autoClose=e.autoClose,this.open=this.open.bind(this),this.toggle=this.toggle.bind(this),this.onClick=this.onClick.bind(this),this.onFocus=this.onFocus.bind(this),this.onKeydown=this.onKeydown.bind(this),this.isOpen&&this.open()}return r(t,[{key:"onClick",value:function(t){this.autoClose||t.target.closest("#"+this.trigger.id+", #"+this.dropdown.id)||this.close(),this.autoClose&&!t.target.closest("#"+this.trigger.id)&&this.close()}},{key:"onFocus",value:function(t){var e=this;this.state.forEach(function(i,n){t.target===i.link&&(e.currentFocusedIndex=n)})}},{key:"setFocus",value:function(t){switch(t.preventDefault(),t.target===this.trigger&&(this.currentFocusedIndex=0),t.which){case a:this.state[this.currentFocusedIndex].prevLink.focus();break;case u:this.firstLink.focus();break;case s:this.lastLink.focus();break;case d:t.target!==this.trigger?this.state[this.currentFocusedIndex].nextLink.focus():this.firstLink.focus()}}},{key:"onKeydown",value:function(t){switch(t.which){case o:this.close(t);break;case a:case d:case u:case s:this.setFocus(t)}}},{key:"addAttributes",value:function(){this.trigger.setAttribute("aria-haspopup",!0),this.trigger.setAttribute("aria-controls",this.trigger.dataset.target),this.dropdown.setAttribute("role","menu"),this.dropdown.setAttribute("aria-labelledby",this.trigger.id),this.dropdown.setAttribute("tabindex",-1),this.dropdown.setAttribute("aria-hidden",!this.isOpen),this.state.forEach(function(t){t.item&&t.item.setAttribute("role","none"),t.link.setAttribute("role","menuitem"),t.link.setAttribute("tabindex",-1)})}},{key:"removeAttributes",value:function(){this.trigger.removeAttribute("aria-haspopup"),this.trigger.removeAttribute("aria-controls"),this.trigger.removeAttribute("aria-expanded"),this.dropdown.removeAttribute("role"),this.dropdown.removeAttribute("aria-labelledby"),this.dropdown.removeAttribute("tabindex"),this.dropdown.removeAttribute("aria-hidden"),this.state.forEach(function(t){t.item&&t.item.removeAttribute("role"),t.link.removeAttribute("role"),t.link.removeAttribute("tabindex")})}},{key:"addEventListeners",value:function(){var t=this;document.addEventListener("click",this.onClick),this.hover&&document.addEventListener("mouseover",this.onClick),this.trigger.addEventListener("keydown",this.onKeydown),this.dropdown.addEventListener("keydown",this.onKeydown),this.links.forEach(function(e){e.addEventListener("focus",t.onFocus)})}},{key:"removeEventListeners",value:function(){var t=this;document.removeEventListener("click",this.onClick),this.hover&&document.removeEventListener("mouseover",this.onClick),this.trigger.removeEventListener("keydown",this.onKeydown),this.dropdown.removeEventListener("keydown",this.onKeydown),this.links.forEach(function(e){e.removeEventListener("focus",t.onFocus)})}},{key:"open",value:function(){this.isOpen=!0,this.trigger.setAttribute("aria-expanded",!0),this.dropdown.setAttribute("aria-hidden",!1),this.addEventListeners()}},{key:"close",value:function(t){this.isOpen=!1,this.trigger.setAttribute("aria-expanded",!1),this.dropdown.setAttribute("aria-hidden",!0),this.removeEventListeners(),t&&this.trigger.focus()}},{key:"toggle",value:function(t){t.preventDefault(),this.isOpen=!this.isOpen,this.isOpen?this.open():this.close()}},{key:"destroy",value:function(){this.removeAttributes(),this.removeEventListeners(),this.trigger.removeEventListener("click",this.toggle),this.hover&&this.trigger.removeEventListener("mouseover",this.open)}},{key:"render",value:function(){var t=this;this.links.forEach(function(e,i){t.state.push({item:t.items[i],link:e,prevLink:t.links[i-1]||t.lastLink,nextLink:t.links[i+1]||t.firstLink})}),this.addAttributes(),this.trigger.addEventListener("click",this.toggle),this.hover&&this.trigger.addEventListener("mouseover",this.open)}}]),t}(),c=[],{render:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=e.isOpen,n=void 0!==i&&i,r=e.hover,o=void 0!==r&&r,s=e.autoClose,u=void 0!==s&&s,a=document.getElementById(t),d=a.dataset.target,l=new h({trigger:a,dropdown:d,isOpen:n,hover:o,autoClose:u});l.render(),c.push(l)},destroy:function(t){c.forEach(function(e,i){t===e.trigger.id&&(e.destroy(),c.splice(i,1))})},init:function(){var t={};document.querySelectorAll('[data-component="dropdown"]').forEach(function(e){t.trigger=e,t.dropdown=e.dataset.target,t.hover="true"===e.dataset.hover,t.isOpen="true"===e.dataset.open,t.autoClose="true"===e.dataset.autoClose,new h(t).render()})}});i.default=l},{}]},{},[1])(1)}); |
{ | ||
"name": "a11y-dropdown-component", | ||
"description": "Accessible Dropdown Component in Vanilla JS", | ||
"version": "1.1.1", | ||
"version": "1.2.0", | ||
"keywords": [ | ||
@@ -6,0 +6,0 @@ "dropdown", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
31469
275