a11y-dropdown-component
Advanced tools
Comparing version 1.0.2 to 1.0.3
@@ -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-link]"),[this.firstLink]=this.links,this.lastLink=this.links[this.links.length-1],this.state=[],this.currentFocusedIndex=0,this.isOpen=t.isOpen,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.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.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.removeAttribute("aria-hidden"),this.addEventListeners()}close(t){this.isOpen=!1,this.trigger.removeAttribute("aria-expanded"),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)}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)}}const i=[];return{render:(t,{isOpen:s=!1}={})=>{const r=document.getElementById(t),n=r.dataset.target,o=new e({trigger:r,dropdown:n,isOpen:s});o.render(),i.push(o)},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.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.isOpen=t.isOpen,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.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.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.removeAttribute("aria-hidden"),this.addEventListeners()}close(t){this.isOpen=!1,this.trigger.removeAttribute("aria-expanded"),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)}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)}}const i=[];return{render:(t,{isOpen:s=!1}={})=>{const r=document.getElementById(t),n=r.dataset.target,o=new e({trigger:r,dropdown:n,isOpen:s});o.render(),i.push(o)},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.isOpen="true"===i.dataset.open,new e(t).render()})}}})();export default Dropdowns; |
@@ -35,3 +35,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.items = this.dropdown.querySelectorAll('[data-item]'); | ||
this.links = this.dropdown.querySelectorAll('[data-link]'); | ||
this.links = this.dropdown.querySelectorAll('[data-focus]'); | ||
@@ -38,0 +38,0 @@ var _links = _slicedToArray(this.links, 1); |
@@ -1,1 +0,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 c=i[s]={exports:{}};e[s][0].call(c.exports,function(t){var i=e[s][1][t];return r(i||t)},c,c.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,c,h,l=(o=27,s=35,u=36,a=38,d=40,c=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-link]");var i=n(this.links,1);this.firstLink=i[0],this.lastLink=this.links[this.links.length-1],this.state=[],this.currentFocusedIndex=0,this.isOpen=e.isOpen,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){t.target.closest("#"+this.trigger.id+", #"+this.dropdown.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.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.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.removeAttribute("aria-hidden"),this.addEventListeners()}},{key:"close",value:function(t){this.isOpen=!1,this.trigger.removeAttribute("aria-expanded"),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)}},{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)}}]),t}(),h=[],{render:function(t){var e=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).isOpen,i=void 0!==e&&e,n=document.getElementById(t),r=n.dataset.target,o=new c({trigger:n,dropdown:r,isOpen:i});o.render(),h.push(o)},destroy:function(t){h.forEach(function(e,i){t===e.trigger.id&&(e.destroy(),h.splice(i,1))})},init:function(){var t={};document.querySelectorAll('[data-component="dropdown"]').forEach(function(e){t.trigger=e,t.dropdown=e.dataset.target,t.isOpen="true"===e.dataset.open,new c(t).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 c=i[s]={exports:{}};e[s][0].call(c.exports,function(t){var i=e[s][1][t];return r(i||t)},c,c.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,c,h,l=(o=27,s=35,u=36,a=38,d=40,c=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.isOpen=e.isOpen,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){t.target.closest("#"+this.trigger.id+", #"+this.dropdown.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.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.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.removeAttribute("aria-hidden"),this.addEventListeners()}},{key:"close",value:function(t){this.isOpen=!1,this.trigger.removeAttribute("aria-expanded"),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)}},{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)}}]),t}(),h=[],{render:function(t){var e=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).isOpen,i=void 0!==e&&e,n=document.getElementById(t),r=n.dataset.target,o=new c({trigger:n,dropdown:r,isOpen:i});o.render(),h.push(o)},destroy:function(t){h.forEach(function(e,i){t===e.trigger.id&&(e.destroy(),h.splice(i,1))})},init:function(){var t={};document.querySelectorAll('[data-component="dropdown"]').forEach(function(e){t.trigger=e,t.dropdown=e.dataset.target,t.isOpen="true"===e.dataset.open,new c(t).render()})}});i.default=l},{}]},{},[1])(1)}); |
{ | ||
"name": "a11y-dropdown-component", | ||
"description": "Accessible Dropdown Component in Vanilla JS", | ||
"version": "1.0.2", | ||
"version": "1.0.3", | ||
"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
29365