Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
dropmic - npm Package Compare versions
Comparing version 0.3.2 to 0.3.3
| /*! | ||
| * Dropmic.js v0.3.2 | ||
| * Dropmic.js v0.3.3 | ||
| * (c) 2016-2020 Agence Webup | ||
@@ -44,4 +44,2 @@ * Released under the MIT License. | ||
| var dropmicClassShow = "dropmic--show"; | ||
| var Dropmic = | ||
@@ -56,2 +54,3 @@ /*#__PURE__*/ | ||
| this.container = null; | ||
| this.showClass = "dropmic--show"; | ||
| this.defaults = _defineProperty({ | ||
@@ -83,13 +82,21 @@ onOpen: null, | ||
| }, { | ||
| key: "_stringToDom", | ||
| value: function _stringToDom(htmlString) { | ||
| var div = document.createElement('div'); | ||
| div.innerHTML = htmlString.trim(); | ||
| return div.firstChild; | ||
| } | ||
| }, { | ||
| key: "_bindEvents", | ||
| value: function _bindEvents() { | ||
| var self = this; // Show menu | ||
| var _this = this; | ||
| // Show menu | ||
| this.btn.addEventListener("click", function (event) { | ||
| event.preventDefault(); | ||
| if (!self.target.classList.contains(dropmicClassShow)) { | ||
| self.open(); | ||
| if (!_this.target.classList.contains(_this.showClass)) { | ||
| _this.open(); | ||
| } else { | ||
| self.close(); | ||
| _this.close(); | ||
| } | ||
@@ -99,5 +106,5 @@ }); // Close menu when mouthclick outside menu | ||
| document.addEventListener("click", function (event) { | ||
| if (!(self._findAncestor(event.target, 'dropmic') === self.target)) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| self.close.call(self); | ||
| if (!(_this._findAncestor(event.target, 'dropmic') === _this.target)) { | ||
| if (_this.target.classList.contains(_this.showClass)) { | ||
| _this.close.call(_this); | ||
| } | ||
@@ -109,10 +116,12 @@ } | ||
| if (event.keyCode === 27) { | ||
| self.close(); | ||
| self.btn.focus(); | ||
| _this.close(); | ||
| _this.btn.focus(); | ||
| } | ||
| }); | ||
| this.target.addEventListener("keydown", function (event) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| if (_this.target.classList.contains(_this.showClass)) { | ||
| // Tab navigation | ||
| var elementList = self.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| var elementList = _this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| var elementLast = elementList.length - 1; | ||
@@ -129,3 +138,3 @@ | ||
| var currentItemIndex = self._getCurrentItemIndex(elementList, document.activeElement); | ||
| var currentItemIndex = _this._getCurrentItemIndex(elementList, document.activeElement); | ||
@@ -193,5 +202,3 @@ if (currentItemIndex === undefined) { | ||
| value: function _constructDropdown() { | ||
| this.container = document.createElement("div"); | ||
| this.container.classList.add("dropmic-menu"); | ||
| this.container.setAttribute("aria-hidden", "true"); | ||
| this.container = this._stringToDom("<div class=\"dropmic-menu\" aria-hidden=\"true\"></div>"); | ||
| this.target.appendChild(this.container); | ||
@@ -204,5 +211,3 @@ } // Construct list if it doesn't exist | ||
| if (this.list === null) { | ||
| this.list = document.createElement("ul"); | ||
| this.list.classList.add("dropmic-menu__list"); | ||
| this.list.setAttribute("role", "menu"); | ||
| this.list = this._stringToDom("<ul class=\"dropmic-menu__list\" role=\"menu\"></ul>"); | ||
| this.container.appendChild(this.list); | ||
@@ -217,7 +222,6 @@ } | ||
| value: function _constructItem(content) { | ||
| var listItem = document.createElement("li"); | ||
| listItem.classList.add("dropmic-menu__listItem"); | ||
| this.list.setAttribute("role", "menuitem"); | ||
| listItem.appendChild(content); | ||
| return listItem; | ||
| var item = this._stringToDom("<li class=\"dropmic-menu__listItem\" role=\"menuitem\"></li>"); | ||
| item.appendChild(content); | ||
| return item; | ||
| } // Construct custom content | ||
@@ -229,5 +233,3 @@ | ||
| if (this.custom === null) { | ||
| this.custom = document.createElement("div"); | ||
| this.custom.classList.add("dropmic-menu__custom"); | ||
| this.custom.innerHTML = content; | ||
| this.custom = this._stringToDom("<div class=\"dropmic-menu__custom\">".concat(content, "</div>")); | ||
| this.container.appendChild(this.custom); | ||
@@ -297,7 +299,3 @@ } else { | ||
| var link = document.createElement("a"); | ||
| link.classList.add("dropmic-menu__listContent"); | ||
| link.setAttribute("href", url); | ||
| link.setAttribute("tabindex", "-1"); | ||
| link.innerHTML = label; | ||
| var link = this._stringToDom("<a class=\"dropmic-menu__listContent\" href=\"".concat(url, "\" tabindex=\"-1\">").concat(label, "</a>")); | ||
@@ -317,5 +315,4 @@ this._constructList().appendChild(this._constructItem(link)); | ||
| var btn = document.createElement("button"); | ||
| btn.classList.add("dropmic-menu__listContent"); | ||
| btn.setAttribute("tabindex", "-1"); | ||
| var btn = this._stringToDom("<button class=\"dropmic-menu__listContent\" tabindex=\"-1\"></button>"); | ||
| btn.innerHTML = label; | ||
@@ -336,5 +333,3 @@ | ||
| var label = document.createElement("span"); | ||
| label.classList.add("dropmic-menu__listContent"); | ||
| label.innerHTML = text; | ||
| var label = this._stringToDom("<span class=\"dropmic-menu__listContent\">".concat(text, "</span>")); | ||
@@ -363,3 +358,3 @@ this._constructList().appendChild(this._constructItem(label)); | ||
| this.target.classList.add(dropmicClassShow); | ||
| this.target.classList.add(this.showClass); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "false"); | ||
@@ -379,3 +374,3 @@ var listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| this.target.classList.remove(dropmicClassShow); | ||
| this.target.classList.remove(this.showClass); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "true"); | ||
@@ -382,0 +377,0 @@ var listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); |
| /*! | ||
| * Dropmic.js v0.3.2 | ||
| * Dropmic.js v0.3.3 | ||
| * (c) 2016-2020 Agence Webup | ||
@@ -50,4 +50,2 @@ * Released under the MIT License. | ||
| var dropmicClassShow = "dropmic--show"; | ||
| var Dropmic = | ||
@@ -62,2 +60,3 @@ /*#__PURE__*/ | ||
| this.container = null; | ||
| this.showClass = "dropmic--show"; | ||
| this.defaults = _defineProperty({ | ||
@@ -89,13 +88,21 @@ onOpen: null, | ||
| }, { | ||
| key: "_stringToDom", | ||
| value: function _stringToDom(htmlString) { | ||
| var div = document.createElement('div'); | ||
| div.innerHTML = htmlString.trim(); | ||
| return div.firstChild; | ||
| } | ||
| }, { | ||
| key: "_bindEvents", | ||
| value: function _bindEvents() { | ||
| var self = this; // Show menu | ||
| var _this = this; | ||
| // Show menu | ||
| this.btn.addEventListener("click", function (event) { | ||
| event.preventDefault(); | ||
| if (!self.target.classList.contains(dropmicClassShow)) { | ||
| self.open(); | ||
| if (!_this.target.classList.contains(_this.showClass)) { | ||
| _this.open(); | ||
| } else { | ||
| self.close(); | ||
| _this.close(); | ||
| } | ||
@@ -105,5 +112,5 @@ }); // Close menu when mouthclick outside menu | ||
| document.addEventListener("click", function (event) { | ||
| if (!(self._findAncestor(event.target, 'dropmic') === self.target)) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| self.close.call(self); | ||
| if (!(_this._findAncestor(event.target, 'dropmic') === _this.target)) { | ||
| if (_this.target.classList.contains(_this.showClass)) { | ||
| _this.close.call(_this); | ||
| } | ||
@@ -115,10 +122,12 @@ } | ||
| if (event.keyCode === 27) { | ||
| self.close(); | ||
| self.btn.focus(); | ||
| _this.close(); | ||
| _this.btn.focus(); | ||
| } | ||
| }); | ||
| this.target.addEventListener("keydown", function (event) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| if (_this.target.classList.contains(_this.showClass)) { | ||
| // Tab navigation | ||
| var elementList = self.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| var elementList = _this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| var elementLast = elementList.length - 1; | ||
@@ -135,3 +144,3 @@ | ||
| var currentItemIndex = self._getCurrentItemIndex(elementList, document.activeElement); | ||
| var currentItemIndex = _this._getCurrentItemIndex(elementList, document.activeElement); | ||
@@ -199,5 +208,3 @@ if (currentItemIndex === undefined) { | ||
| value: function _constructDropdown() { | ||
| this.container = document.createElement("div"); | ||
| this.container.classList.add("dropmic-menu"); | ||
| this.container.setAttribute("aria-hidden", "true"); | ||
| this.container = this._stringToDom("<div class=\"dropmic-menu\" aria-hidden=\"true\"></div>"); | ||
| this.target.appendChild(this.container); | ||
@@ -210,5 +217,3 @@ } // Construct list if it doesn't exist | ||
| if (this.list === null) { | ||
| this.list = document.createElement("ul"); | ||
| this.list.classList.add("dropmic-menu__list"); | ||
| this.list.setAttribute("role", "menu"); | ||
| this.list = this._stringToDom("<ul class=\"dropmic-menu__list\" role=\"menu\"></ul>"); | ||
| this.container.appendChild(this.list); | ||
@@ -223,7 +228,6 @@ } | ||
| value: function _constructItem(content) { | ||
| var listItem = document.createElement("li"); | ||
| listItem.classList.add("dropmic-menu__listItem"); | ||
| this.list.setAttribute("role", "menuitem"); | ||
| listItem.appendChild(content); | ||
| return listItem; | ||
| var item = this._stringToDom("<li class=\"dropmic-menu__listItem\" role=\"menuitem\"></li>"); | ||
| item.appendChild(content); | ||
| return item; | ||
| } // Construct custom content | ||
@@ -235,5 +239,3 @@ | ||
| if (this.custom === null) { | ||
| this.custom = document.createElement("div"); | ||
| this.custom.classList.add("dropmic-menu__custom"); | ||
| this.custom.innerHTML = content; | ||
| this.custom = this._stringToDom("<div class=\"dropmic-menu__custom\">".concat(content, "</div>")); | ||
| this.container.appendChild(this.custom); | ||
@@ -303,7 +305,3 @@ } else { | ||
| var link = document.createElement("a"); | ||
| link.classList.add("dropmic-menu__listContent"); | ||
| link.setAttribute("href", url); | ||
| link.setAttribute("tabindex", "-1"); | ||
| link.innerHTML = label; | ||
| var link = this._stringToDom("<a class=\"dropmic-menu__listContent\" href=\"".concat(url, "\" tabindex=\"-1\">").concat(label, "</a>")); | ||
@@ -323,5 +321,4 @@ this._constructList().appendChild(this._constructItem(link)); | ||
| var btn = document.createElement("button"); | ||
| btn.classList.add("dropmic-menu__listContent"); | ||
| btn.setAttribute("tabindex", "-1"); | ||
| var btn = this._stringToDom("<button class=\"dropmic-menu__listContent\" tabindex=\"-1\"></button>"); | ||
| btn.innerHTML = label; | ||
@@ -342,5 +339,3 @@ | ||
| var label = document.createElement("span"); | ||
| label.classList.add("dropmic-menu__listContent"); | ||
| label.innerHTML = text; | ||
| var label = this._stringToDom("<span class=\"dropmic-menu__listContent\">".concat(text, "</span>")); | ||
@@ -369,3 +364,3 @@ this._constructList().appendChild(this._constructItem(label)); | ||
| this.target.classList.add(dropmicClassShow); | ||
| this.target.classList.add(this.showClass); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "false"); | ||
@@ -385,3 +380,3 @@ var listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| this.target.classList.remove(dropmicClassShow); | ||
| this.target.classList.remove(this.showClass); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "true"); | ||
@@ -388,0 +383,0 @@ var listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); |
| /*! | ||
| * Dropmic.js v0.3.2 | ||
| * Dropmic.js v0.3.3 | ||
| * (c) 2016-2020 Agence Webup | ||
| * Released under the MIT License. | ||
| */ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Dropmic=e()}(this,function(){"use strict";function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}var r="dropmic--show";return function(){function o(t,e){var n,i,s;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o),this.target=t,this.btn=t.querySelector("[data-dropmic-btn]"),this.container=null,this.defaults=((i="beforeClose")in(n={onOpen:s=null,onClose:null,beforeClose:null})?Object.defineProperty(n,i,{value:s,enumerable:!0,configurable:!0,writable:!0}):n[i]=s,n),this.options=this.extendObject({},this.defaults,e),this.list=null,this.custom=null,this.initialized=!1,this.init()}var t,e,n;return t=o,(e=[{key:"init",value:function(){this._bindEvents()}},{key:"_findAncestor",value:function(t,e){for(;(t=t.parentElement)&&!t.classList.contains(e););return t}},{key:"_bindEvents",value:function(){var s=this;this.btn.addEventListener("click",function(t){t.preventDefault(),s.target.classList.contains(r)?s.close():s.open()}),document.addEventListener("click",function(t){s._findAncestor(t.target,"dropmic")!==s.target&&s.target.classList.contains(r)&&s.close.call(s)}),this.target.addEventListener("keydown",function(t){27===t.keyCode&&(s.close(),s.btn.focus())}),this.target.addEventListener("keydown",function(t){if(s.target.classList.contains(r)){var e=s.target.querySelectorAll(".dropmic-menu__listContent"),n=e.length-1;if(9===t.keyCode&&document.activeElement===e[n]&&(t.preventDefault(),e[0].focus()),38===t.keyCode||40===t.keyCode){t.preventDefault();var i=s._getCurrentItemIndex(e,document.activeElement);void 0===i?e[0].focus():38===t.keyCode?e[s._getPreviousItemIndex(e,i)].focus():e[s._getNextItemIndex(e,i)].focus()}}})}},{key:"_getCurrentItemIndex",value:function(t,e){for(var n=0;n<t.length;n++)if(e===t[n])return n}},{key:"_getPreviousItemIndex",value:function(t,e){return 0<e?e-1:t.length-1}},{key:"_getNextItemIndex",value:function(t,e){return e===t.length-1?0:e+1}},{key:"_isInitialized",value:function(){!1===this.initialized&&(this._constructDropdown(),this.initialized=!0)}},{key:"_constructDropdown",value:function(){this.container=document.createElement("div"),this.container.classList.add("dropmic-menu"),this.container.setAttribute("aria-hidden","true"),this.target.appendChild(this.container)}},{key:"_constructList",value:function(){return null===this.list&&(this.list=document.createElement("ul"),this.list.classList.add("dropmic-menu__list"),this.list.setAttribute("role","menu"),this.container.appendChild(this.list)),this.list}},{key:"_constructItem",value:function(t){var e=document.createElement("li");return e.classList.add("dropmic-menu__listItem"),this.list.setAttribute("role","menuitem"),e.appendChild(t),e}},{key:"_constructCustom",value:function(t){null===this.custom?(this.custom=document.createElement("div"),this.custom.classList.add("dropmic-menu__custom"),this.custom.innerHTML=t,this.container.appendChild(this.custom)):this.custom.innerHTML=t}},{key:"_onOpen",value:function(){this.options.onOpen&&this.options.onOpen()}},{key:"_onClose",value:function(){this.options.onClose&&this.options.onClose()}},{key:"_beforeOpen",value:function(){this.options.beforeOpen&&this.options.beforeOpen()}},{key:"_beforeClose",value:function(){this.options.beforeClose&&this.options.beforeClose()}},{key:"extendObject",value:function(t){for(var e=1;e<arguments.length;e++)for(var n in arguments[e])arguments[e].hasOwnProperty(n)&&(t[n]=arguments[e][n]);return t}},{key:"addLink",value:function(t,e){this._isInitialized();var n=document.createElement("a");n.classList.add("dropmic-menu__listContent"),n.setAttribute("href",e),n.setAttribute("tabindex","-1"),n.innerHTML=t,this._constructList().appendChild(this._constructItem(n))}},{key:"addBtn",value:function(t,e){if(this._isInitialized(),"function"==typeof e){var n=document.createElement("button");return n.classList.add("dropmic-menu__listContent"),n.setAttribute("tabindex","-1"),n.innerHTML=t,this._constructList().appendChild(this._constructItem(n)),n.addEventListener("click",function(t){e(t)}),n}}},{key:"addLabel",value:function(t){this._isInitialized();var e=document.createElement("span");e.classList.add("dropmic-menu__listContent"),e.innerHTML=t,this._constructList().appendChild(this._constructItem(e))}},{key:"setCustomContent",value:function(t){this._isInitialized(),this._constructCustom(t)}},{key:"updateTargetBtn",value:function(t){this.btn.innerHTML=t}},{key:"open",value:function(){this._beforeOpen(),this.target.classList.add(r),this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden","false");var t=this.target.querySelectorAll(".dropmic-menu__listContent");[].forEach.call(t,function(t){t.setAttribute("tabindex","0")}),this._onOpen()}},{key:"close",value:function(){this._beforeClose(),this.target.classList.remove(r),this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden","true");var t=this.target.querySelectorAll(".dropmic-menu__listContent");[].forEach.call(t,function(t){t.setAttribute("tabindex","-1")}),this._onClose()}}])&&i(t.prototype,e),n&&i(t,n),o}()}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Dropmic=e()}(this,function(){"use strict";function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(){function o(t,e){var n,i,s;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o),this.target=t,this.btn=t.querySelector("[data-dropmic-btn]"),this.container=null,this.showClass="dropmic--show",this.defaults=((i="beforeClose")in(n={onOpen:s=null,onClose:null,beforeClose:null})?Object.defineProperty(n,i,{value:s,enumerable:!0,configurable:!0,writable:!0}):n[i]=s,n),this.options=this.extendObject({},this.defaults,e),this.list=null,this.custom=null,this.initialized=!1,this.init()}var t,e,n;return t=o,(e=[{key:"init",value:function(){this._bindEvents()}},{key:"_findAncestor",value:function(t,e){for(;(t=t.parentElement)&&!t.classList.contains(e););return t}},{key:"_stringToDom",value:function(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstChild}},{key:"_bindEvents",value:function(){var s=this;this.btn.addEventListener("click",function(t){t.preventDefault(),s.target.classList.contains(s.showClass)?s.close():s.open()}),document.addEventListener("click",function(t){s._findAncestor(t.target,"dropmic")!==s.target&&s.target.classList.contains(s.showClass)&&s.close.call(s)}),this.target.addEventListener("keydown",function(t){27===t.keyCode&&(s.close(),s.btn.focus())}),this.target.addEventListener("keydown",function(t){if(s.target.classList.contains(s.showClass)){var e=s.target.querySelectorAll(".dropmic-menu__listContent"),n=e.length-1;if(9===t.keyCode&&document.activeElement===e[n]&&(t.preventDefault(),e[0].focus()),38===t.keyCode||40===t.keyCode){t.preventDefault();var i=s._getCurrentItemIndex(e,document.activeElement);void 0===i?e[0].focus():38===t.keyCode?e[self._getPreviousItemIndex(e,i)].focus():e[self._getNextItemIndex(e,i)].focus()}}})}},{key:"_getCurrentItemIndex",value:function(t,e){for(var n=0;n<t.length;n++)if(e===t[n])return n}},{key:"_getPreviousItemIndex",value:function(t,e){return 0<e?e-1:t.length-1}},{key:"_getNextItemIndex",value:function(t,e){return e===t.length-1?0:e+1}},{key:"_isInitialized",value:function(){!1===this.initialized&&(this._constructDropdown(),this.initialized=!0)}},{key:"_constructDropdown",value:function(){this.container=this._stringToDom('<div class="dropmic-menu" aria-hidden="true"></div>'),this.target.appendChild(this.container)}},{key:"_constructList",value:function(){return null===this.list&&(this.list=this._stringToDom('<ul class="dropmic-menu__list" role="menu"></ul>'),this.container.appendChild(this.list)),this.list}},{key:"_constructItem",value:function(t){var e=this._stringToDom('<li class="dropmic-menu__listItem" role="menuitem"></li>');return e.appendChild(t),e}},{key:"_constructCustom",value:function(t){null===this.custom?(this.custom=this._stringToDom('<div class="dropmic-menu__custom">'.concat(t,"</div>")),this.container.appendChild(this.custom)):this.custom.innerHTML=t}},{key:"_onOpen",value:function(){this.options.onOpen&&this.options.onOpen()}},{key:"_onClose",value:function(){this.options.onClose&&this.options.onClose()}},{key:"_beforeOpen",value:function(){this.options.beforeOpen&&this.options.beforeOpen()}},{key:"_beforeClose",value:function(){this.options.beforeClose&&this.options.beforeClose()}},{key:"extendObject",value:function(t){for(var e=1;e<arguments.length;e++)for(var n in arguments[e])arguments[e].hasOwnProperty(n)&&(t[n]=arguments[e][n]);return t}},{key:"addLink",value:function(t,e){this._isInitialized();var n=this._stringToDom('<a class="dropmic-menu__listContent" href="'.concat(e,'" tabindex="-1">').concat(t,"</a>"));this._constructList().appendChild(this._constructItem(n))}},{key:"addBtn",value:function(t,e){if(this._isInitialized(),"function"==typeof e){var n=this._stringToDom('<button class="dropmic-menu__listContent" tabindex="-1"></button>');return n.innerHTML=t,this._constructList().appendChild(this._constructItem(n)),n.addEventListener("click",function(t){e(t)}),n}}},{key:"addLabel",value:function(t){this._isInitialized();var e=this._stringToDom('<span class="dropmic-menu__listContent">'.concat(t,"</span>"));this._constructList().appendChild(this._constructItem(e))}},{key:"setCustomContent",value:function(t){this._isInitialized(),this._constructCustom(t)}},{key:"updateTargetBtn",value:function(t){this.btn.innerHTML=t}},{key:"open",value:function(){this._beforeOpen(),this.target.classList.add(this.showClass),this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden","false");var t=this.target.querySelectorAll(".dropmic-menu__listContent");[].forEach.call(t,function(t){t.setAttribute("tabindex","0")}),this._onOpen()}},{key:"close",value:function(){this._beforeClose(),this.target.classList.remove(this.showClass),this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden","true");var t=this.target.querySelectorAll(".dropmic-menu__listContent");[].forEach.call(t,function(t){t.setAttribute("tabindex","-1")}),this._onClose()}}])&&i(t.prototype,e),n&&i(t,n),o}()}); |
| { | ||
| "name": "dropmic", | ||
| "version": "0.3.2", | ||
| "version": "0.3.3", | ||
| "description": "A lightweight dropdown plugin", | ||
@@ -5,0 +5,0 @@ "main": "dist/dropmic.js", |
@@ -1,2 +0,1 @@ | ||
| const dropmicClassShow = "dropmic--show"; | ||
| export default class Dropmic { | ||
@@ -8,2 +7,3 @@ | ||
| this.container = null; | ||
| this.showClass = "dropmic--show"; | ||
@@ -37,11 +37,16 @@ this.defaults = { | ||
| _stringToDom (htmlString) { | ||
| let div = document.createElement('div'); | ||
| div.innerHTML = htmlString.trim(); | ||
| return div.firstChild; | ||
| } | ||
| _bindEvents() { | ||
| let self = this; | ||
| // Show menu | ||
| this.btn.addEventListener("click", function(event) { | ||
| this.btn.addEventListener("click", (event) => { | ||
| event.preventDefault(); | ||
| if (!self.target.classList.contains(dropmicClassShow)) { | ||
| self.open(); | ||
| if (!this.target.classList.contains(this.showClass)) { | ||
| this.open(); | ||
| } else { | ||
| self.close(); | ||
| this.close(); | ||
| } | ||
@@ -51,6 +56,6 @@ }); | ||
| // Close menu when mouthclick outside menu | ||
| document.addEventListener("click", function(event) { | ||
| if (!(self._findAncestor(event.target, 'dropmic') === self.target)) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| self.close.call(self); | ||
| document.addEventListener("click", (event) => { | ||
| if (!(this._findAncestor(event.target, 'dropmic') === this.target)) { | ||
| if (this.target.classList.contains(this.showClass)) { | ||
| this.close.call(this); | ||
| } | ||
@@ -61,6 +66,6 @@ } | ||
| // Close menu with escape key | ||
| this.target.addEventListener("keydown", function(event) { | ||
| this.target.addEventListener("keydown", (event) => { | ||
| if (event.keyCode === 27) { | ||
| self.close(); | ||
| self.btn.focus(); | ||
| this.close(); | ||
| this.btn.focus(); | ||
| } | ||
@@ -70,6 +75,6 @@ }); | ||
| this.target.addEventListener("keydown", function(event) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| this.target.addEventListener("keydown", (event) => { | ||
| if (this.target.classList.contains(this.showClass)) { | ||
| // Tab navigation | ||
| let elementList = self.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| let elementList = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| let elementLast = elementList.length - 1; | ||
@@ -84,3 +89,3 @@ if (event.keyCode === 9 && document.activeElement === elementList[elementLast]) { | ||
| event.preventDefault(); | ||
| let currentItemIndex = self._getCurrentItemIndex(elementList, document.activeElement); | ||
| let currentItemIndex = this._getCurrentItemIndex(elementList, document.activeElement); | ||
| if (currentItemIndex === undefined) { | ||
@@ -140,5 +145,3 @@ elementList[0].focus(); | ||
| _constructDropdown() { | ||
| this.container = document.createElement("div"); | ||
| this.container.classList.add("dropmic-menu"); | ||
| this.container.setAttribute("aria-hidden", "true"); | ||
| this.container = this._stringToDom(`<div class="dropmic-menu" aria-hidden="true"></div>`) | ||
| this.target.appendChild(this.container); | ||
@@ -150,5 +153,3 @@ } | ||
| if (this.list === null) { | ||
| this.list = document.createElement("ul"); | ||
| this.list.classList.add("dropmic-menu__list"); | ||
| this.list.setAttribute("role", "menu") | ||
| this.list = this._stringToDom(`<ul class="dropmic-menu__list" role="menu"></ul>`) | ||
| this.container.appendChild(this.list); | ||
@@ -161,7 +162,5 @@ } | ||
| _constructItem(content) { | ||
| let listItem = document.createElement("li"); | ||
| listItem.classList.add("dropmic-menu__listItem"); | ||
| this.list.setAttribute("role", "menuitem") | ||
| listItem.appendChild(content); | ||
| return listItem; | ||
| let item = this._stringToDom(`<li class="dropmic-menu__listItem" role="menuitem"></li>`) | ||
| item.appendChild(content); | ||
| return item; | ||
| } | ||
@@ -172,5 +171,3 @@ | ||
| if (this.custom === null) { | ||
| this.custom = document.createElement("div"); | ||
| this.custom.classList.add("dropmic-menu__custom"); | ||
| this.custom.innerHTML = content; | ||
| this.custom = this._stringToDom(`<div class="dropmic-menu__custom">${content}</div>`) | ||
| this.container.appendChild(this.custom); | ||
@@ -232,7 +229,3 @@ } else { | ||
| this._isInitialized(); | ||
| let link = document.createElement("a"); | ||
| link.classList.add("dropmic-menu__listContent"); | ||
| link.setAttribute("href", url); | ||
| link.setAttribute("tabindex", "-1"); | ||
| link.innerHTML = label; | ||
| let link = this._stringToDom(`<a class="dropmic-menu__listContent" href="${url}" tabindex="-1">${label}</a>`) | ||
| this._constructList().appendChild(this._constructItem(link)); | ||
@@ -248,6 +241,3 @@ } | ||
| } | ||
| let btn = document.createElement("button"); | ||
| btn.classList.add("dropmic-menu__listContent"); | ||
| btn.setAttribute("tabindex", "-1"); | ||
| let btn = this._stringToDom(`<button class="dropmic-menu__listContent" tabindex="-1"></button>`) | ||
| btn.innerHTML = label; | ||
@@ -264,5 +254,3 @@ this._constructList().appendChild(this._constructItem(btn)); | ||
| this._isInitialized(); | ||
| let label = document.createElement("span"); | ||
| label.classList.add("dropmic-menu__listContent"); | ||
| label.innerHTML = text; | ||
| let label = this._stringToDom(`<span class="dropmic-menu__listContent">${text}</span>`) | ||
| this._constructList().appendChild(this._constructItem(label)); | ||
@@ -286,3 +274,3 @@ } | ||
| this._beforeOpen(); | ||
| this.target.classList.add(dropmicClassShow); | ||
| this.target.classList.add(this.showClass); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "false"); | ||
@@ -299,3 +287,3 @@ let listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| this._beforeClose(); | ||
| this.target.classList.remove(dropmicClassShow); | ||
| this.target.classList.remove(this.showClass); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "true"); | ||
@@ -302,0 +290,0 @@ let listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); |
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Worsened metrics
- Total package byte prevSize
- decreased by-0.68%
104081
- Lines of code
- decreased by-1.61%
1706
No dependency changes