Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
dropmic - npm Package Compare versions
Comparing version 0.1.6 to 0.2.0
@@ -51,3 +51,3 @@ "use strict"; | ||
| // Remove menu | ||
| // Close menu when mouthclick outside menu | ||
| document.addEventListener("click", function (event) { | ||
@@ -60,4 +60,69 @@ if (!(self._findAncestor(event.target, 'dropmic') === self.target)) { | ||
| }); | ||
| // Close menu with escape key | ||
| this.target.addEventListener("keydown", function (event) { | ||
| if (event.key === "Escape") { | ||
| self.close(); | ||
| self.btn.focus(); | ||
| } | ||
| }); | ||
| this.target.addEventListener("keydown", function (event) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| // Tab navigation | ||
| var elementList = self.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| var elementLast = elementList.length - 1; | ||
| if (event.key === "Tab" && document.activeElement === elementList[elementLast]) { | ||
| event.preventDefault(); | ||
| elementList[0].focus(); | ||
| } | ||
| // Arrow Up/Down navigation | ||
| if (event.key === "ArrowUp" || event.key === "ArrowDown") { | ||
| event.preventDefault(); | ||
| var currentItemIndex = self._getCurrentItemIndex(elementList, document.activeElement); | ||
| if (currentItemIndex === undefined) { | ||
| elementList[0].focus(); | ||
| } else { | ||
| if (event.key === "ArrowUp") { | ||
| elementList[self._getPreviousItemIndex(elementList, currentItemIndex)].focus(); | ||
| } else { | ||
| elementList[self._getNextItemIndex(elementList, currentItemIndex)].focus(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| // Navigation function | ||
| }, { | ||
| key: "_getCurrentItemIndex", | ||
| value: function _getCurrentItemIndex(list, element) { | ||
| for (var i = 0; i < list.length; i++) { | ||
| if (element === list[i]) { | ||
| return i; | ||
| } | ||
| } | ||
| return undefined; | ||
| } | ||
| }, { | ||
| key: "_getPreviousItemIndex", | ||
| value: function _getPreviousItemIndex(list, currentItemIndex) { | ||
| if (currentItemIndex > 0) { | ||
| return currentItemIndex - 1; | ||
| } else { | ||
| return list.length - 1; | ||
| } | ||
| } | ||
| }, { | ||
| key: "_getNextItemIndex", | ||
| value: function _getNextItemIndex(list, currentItemIndex) { | ||
| if (currentItemIndex === list.length - 1) { | ||
| return 0; | ||
| } else { | ||
| return currentItemIndex + 1; | ||
| } | ||
| } | ||
| /** | ||
@@ -85,2 +150,3 @@ * Constructors | ||
| this.container.classList.add("dropmic-menu"); | ||
| this.container.setAttribute("aria-hidden", "true"); | ||
| this.target.appendChild(this.container); | ||
@@ -97,2 +163,3 @@ } | ||
| this.list.classList.add("dropmic-menu__list"); | ||
| this.list.setAttribute("role", "menu"); | ||
| this.container.appendChild(this.list); | ||
@@ -110,2 +177,3 @@ } | ||
| listItem.classList.add("dropmic-menu__listItem"); | ||
| this.list.setAttribute("role", "menuitem"); | ||
| listItem.appendChild(content); | ||
@@ -143,2 +211,3 @@ return listItem; | ||
| link.setAttribute("href", url); | ||
| link.setAttribute("tabindex", "-1"); | ||
| link.innerHTML = label; | ||
@@ -161,2 +230,3 @@ this._constructList().appendChild(this._constructItem(link)); | ||
| btn.classList.add("dropmic-menu__listContent"); | ||
| btn.setAttribute("tabindex", "-1"); | ||
| btn.innerHTML = label; | ||
@@ -197,2 +267,7 @@ this._constructList().appendChild(this._constructItem(btn)); | ||
| this.target.classList.add(dropmicClassShow); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "false"); | ||
| var listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| [].forEach.call(listItems, function (el) { | ||
| el.setAttribute("tabindex", "0"); | ||
| }); | ||
| } | ||
@@ -206,2 +281,7 @@ | ||
| this.target.classList.remove(dropmicClassShow); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "true"); | ||
| var listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| [].forEach.call(listItems, function (el) { | ||
| el.setAttribute("tabindex", "-1"); | ||
| }); | ||
| } | ||
@@ -208,0 +288,0 @@ }]); |
| { | ||
| "name": "dropmic", | ||
| "version": "0.1.6", | ||
| "version": "0.2.0", | ||
| "description": "A lightweight dropdown plugin", | ||
@@ -5,0 +5,0 @@ "main": "dist/dropmic.js", |
@@ -68,12 +68,12 @@ # dropmic | ||
| ``` | ||
| <span class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right"> | ||
| <span class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right" role="navigation"> | ||
| <button data-dropmic-btn>click me</button> | ||
| <div class="dropmic-menu"> | ||
| <div class="dropmic-menu" aria-hidden="true"> | ||
| <div class="dropmic-menu__custom">Custom content</div> | ||
| <ul class="dropmic-menu__list"> | ||
| <li class="dropmic-menu__listItem"> | ||
| <a class="dropmic-menu__listContent" href="http://example.com">label link</a> | ||
| <ul class="dropmic-menu__list" role="menu"> | ||
| <li class="dropmic-menu__listItem" role="menuitem"> | ||
| <a class="dropmic-menu__listContent" href="http://example.com" tabindex="-1">label link</a> | ||
| </li> | ||
| <li class="dropmic-menu__listItem"> | ||
| <button class="dropmic-menu__listContent">label button</button> | ||
| <li class="dropmic-menu__listItem" role="menuitem"> | ||
| <button class="dropmic-menu__listContent" tabindex="-1">label button</button> | ||
| </li> | ||
@@ -108,2 +108,3 @@ </ul> | ||
| - [x] Add top-middle and bottom-middle direction | ||
| - [x] A11y friendly (with keyboard navigation) | ||
| - [ ] Instanciate severals dropmic with one initialization command | ||
@@ -110,0 +111,0 @@ - [ ] Permit to update a list item value |
@@ -39,3 +39,3 @@ const dropmicClassShow = "dropmic--show"; | ||
| // Remove menu | ||
| // Close menu when mouthclick outside menu | ||
| document.addEventListener("click", function(event) { | ||
@@ -48,4 +48,66 @@ if (!(self._findAncestor(event.target, 'dropmic') === self.target)) { | ||
| }); | ||
| // Close menu with escape key | ||
| this.target.addEventListener("keydown", function(event) { | ||
| if(event.key === "Escape") { | ||
| self.close(); | ||
| self.btn.focus(); | ||
| } | ||
| }); | ||
| this.target.addEventListener("keydown", function(event) { | ||
| if (self.target.classList.contains(dropmicClassShow)) { | ||
| // Tab navigation | ||
| let elementList = self.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| let elementLast = elementList.length - 1; | ||
| if(event.key === "Tab" && document.activeElement === elementList[elementLast]) { | ||
| event.preventDefault(); | ||
| elementList[0].focus(); | ||
| } | ||
| // Arrow Up/Down navigation | ||
| if(event.key === "ArrowUp" || event.key === "ArrowDown") { | ||
| event.preventDefault(); | ||
| let currentItemIndex = self._getCurrentItemIndex(elementList, document.activeElement); | ||
| if(currentItemIndex === undefined) { | ||
| elementList[0].focus(); | ||
| } else { | ||
| if(event.key === "ArrowUp") { | ||
| elementList[self._getPreviousItemIndex(elementList, currentItemIndex)].focus(); | ||
| } else { | ||
| elementList[self._getNextItemIndex(elementList, currentItemIndex)].focus(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| // Navigation function | ||
| _getCurrentItemIndex(list, element) { | ||
| for (var i = 0; i < list.length; i++) { | ||
| if(element === list[i]) { | ||
| return i; | ||
| } | ||
| } | ||
| return undefined; | ||
| } | ||
| _getPreviousItemIndex(list, currentItemIndex) { | ||
| if(currentItemIndex > 0) { | ||
| return currentItemIndex - 1; | ||
| } else { | ||
| return list.length - 1; | ||
| } | ||
| } | ||
| _getNextItemIndex(list, currentItemIndex) { | ||
| if(currentItemIndex === list.length - 1) { | ||
| return 0; | ||
| } else { | ||
| return currentItemIndex + 1; | ||
| } | ||
| } | ||
| /** | ||
@@ -67,2 +129,3 @@ * Constructors | ||
| this.container.classList.add("dropmic-menu"); | ||
| this.container.setAttribute("aria-hidden", "true"); | ||
| this.target.appendChild(this.container); | ||
@@ -76,2 +139,3 @@ } | ||
| this.list.classList.add("dropmic-menu__list"); | ||
| this.list.setAttribute("role", "menu") | ||
| this.container.appendChild(this.list); | ||
@@ -86,2 +150,3 @@ } | ||
| listItem.classList.add("dropmic-menu__listItem"); | ||
| this.list.setAttribute("role", "menuitem") | ||
| listItem.appendChild(content); | ||
@@ -113,2 +178,3 @@ return listItem; | ||
| link.setAttribute("href", url); | ||
| link.setAttribute("tabindex", "-1"); | ||
| link.innerHTML = label; | ||
@@ -128,2 +194,3 @@ this._constructList().appendChild(this._constructItem(link)); | ||
| btn.classList.add("dropmic-menu__listContent"); | ||
| btn.setAttribute("tabindex", "-1"); | ||
| btn.innerHTML = label; | ||
@@ -155,2 +222,7 @@ this._constructList().appendChild(this._constructItem(btn)); | ||
| this.target.classList.add(dropmicClassShow); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "false"); | ||
| let listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| [].forEach.call(listItems, (el) => { | ||
| el.setAttribute("tabindex", "0"); | ||
| }) | ||
| } | ||
@@ -161,3 +233,8 @@ | ||
| this.target.classList.remove(dropmicClassShow); | ||
| this.target.querySelector("[aria-hidden]").setAttribute("aria-hidden", "true"); | ||
| let listItems = this.target.querySelectorAll(".dropmic-menu__listContent"); | ||
| [].forEach.call(listItems, (el) => { | ||
| el.setAttribute("tabindex", "-1"); | ||
| }) | ||
| } | ||
| } |
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
Improved metrics
- Total package byte prevSize
- increased by21.6%
38215
- Lines of code
- increased by25.61%
716
- Number of lines in readme file
- increased by0.88%
115
No dependency changes