Skip to content

Commit b796d8b

Browse files
samikeijonensamikeijonen
committed
Update changelog.
1 parent 3c90fea commit b796d8b

File tree

8 files changed

+4344
-9413
lines changed

8 files changed

+4344
-9413
lines changed

‎changelog.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
# Changelog
2+
## Version 1.1.0 released April 3, 2023
3+
- Fixed: show only one sub sub menu open at once.
4+
- Updated NPM packages.
25
## Version 1.0.5 released May 7, 2022
36
- Added `:hover` to sub menus in hover demo.
47
- Updated NPM packages.

‎demo/dist/navigation-multiple.js‎

Lines changed: 61 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,23 @@
55
return;
66
}
77
elem.classList.add(animation);
8-
elem.addEventListener("animationend", function endAnimation() {
9-
elem.classList.remove(animation);
10-
if (hide) {
11-
elem.classList.remove(hide);
12-
}
13-
elem.removeEventListener("animationend", endAnimation, false);
14-
}, false);
8+
elem.addEventListener(
9+
"animationend",
10+
function endAnimation() {
11+
elem.classList.remove(animation);
12+
if (hide) {
13+
elem.classList.remove(hide);
14+
}
15+
elem.removeEventListener("animationend", endAnimation, false);
16+
},
17+
false
18+
);
1519
}
1620
function updateAria(el, aria) {
17-
if (typeof el === "undefined" || 0 >= aria.length) {
21+
if ("undefined" === typeof el || 0 >= aria.length) {
1822
return;
1923
}
20-
const hiddenEl = el.getAttribute(`aria-${aria}`) === "true" ? "false" : "true";
24+
const hiddenEl = "true" === el.getAttribute(`aria-${aria}`) ? "false" : "true";
2125
el.setAttribute(`aria-${aria}`, hiddenEl);
2226
}
2327
var TAB_KEY = 9;
@@ -63,7 +67,9 @@
6367
this.settings = settings;
6468
this.navOpened = false;
6569
this.$subNavs = this.$element.querySelectorAll(this.settings.subNavAnchors);
66-
this.$subSubNavs = this.$element.querySelectorAll(this.settings.subSubNavAnchors);
70+
this.$subSubNavs = this.$element.querySelectorAll(
71+
this.settings.subSubNavAnchors
72+
);
6773
this.create();
6874
}
6975
Navigation.prototype.create = function() {
@@ -140,15 +146,21 @@
140146
Navigation.prototype.handleSubNav = function(event) {
141147
const target = event.target;
142148
const closestSubButton = target.closest('[data-meom-nav="sub-toggle"]');
143-
const closestSubSubButton = target.closest('[data-meom-nav="sub-sub-toggle"]');
149+
const closestSubSubButton = target.closest(
150+
'[data-meom-nav="sub-sub-toggle"]'
151+
);
144152
if (!closestSubButton && !closestSubSubButton) {
145153
return this;
146154
}
147-
if (!target.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue) && !target.matches('[data-meom-nav="sub-sub-toggle"]')) {
155+
if (!target.nextElementSibling.classList.contains(
156+
this.settings.toggleSubNavClassValue
157+
) && !target.matches('[data-meom-nav="sub-sub-toggle"]')) {
148158
this._closeAllSubMenus();
149159
this._closeAllSubMenuToggles();
150160
}
151-
if (!target.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue) && target.matches('[data-meom-nav="sub-sub-toggle"]')) {
161+
if (!target.nextElementSibling.classList.contains(
162+
this.settings.toggleSubNavClassValue
163+
) && target.matches('[data-meom-nav="sub-sub-toggle"]')) {
152164
this._closeAllSubSubMenus();
153165
this._closeAllSubSubMenuToggles();
154166
}
@@ -165,7 +177,9 @@
165177
return this;
166178
};
167179
Navigation.prototype.handleCloseSubNav = function(event) {
168-
const openSubMenu = document.querySelector(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
180+
const openSubMenu = document.querySelector(
181+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
182+
);
169183
if (openSubMenu) {
170184
const focusableElements = openSubMenu.querySelectorAll([
171185
"a[href]",
@@ -187,13 +201,17 @@
187201
}
188202
}
189203
if (ESCAPE_KEY === event.keyCode) {
190-
if (event.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]')) {
204+
if (event.target.matches(
205+
'[data-meom-nav="sub-toggle"][aria-expanded="true"]'
206+
)) {
191207
this._handleSubNav(event);
192208
this._closeAllSubMenus();
193209
this._closeAllSubMenuToggles();
194210
return this;
195211
}
196-
const parentSubMenu = event.target.closest(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
212+
const parentSubMenu = event.target.closest(
213+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
214+
);
197215
if (parentSubMenu) {
198216
const subMenuToggle = parentSubMenu.previousElementSibling;
199217
if (subMenuToggle) {
@@ -236,14 +254,18 @@
236254
return this;
237255
};
238256
Navigation.prototype.closeAllSubMenus = function() {
239-
const openSubMenus = document.querySelectorAll(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
257+
const openSubMenus = document.querySelectorAll(
258+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
259+
);
240260
openSubMenus.forEach(function(openSubMenu) {
241261
this._setSubMenu(openSubMenu);
242262
}, this);
243263
return this;
244264
};
245265
Navigation.prototype.closeAllSubSubMenus = function() {
246-
const openSubSubMenus = document.querySelectorAll(`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
266+
const openSubSubMenus = document.querySelectorAll(
267+
`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
268+
);
247269
openSubSubMenus.forEach(function(openSubSubMenu) {
248270
this._setSubMenu(openSubSubMenu);
249271
}, this);
@@ -259,29 +281,45 @@
259281
animate(submenu, this.settings.animateSubNavClass);
260282
}
261283
if (this.settings.onOpenSubNav && typeof this.settings.onOpenSubNav === "function") {
262-
this.settings.onOpenSubNav(this.$element, this.$toggle, submenu, event);
284+
this.settings.onOpenSubNav(
285+
this.$element,
286+
this.$toggle,
287+
submenu,
288+
event
289+
);
263290
}
264291
} else {
265292
submenu.classList.remove(this.settings.toggleSubNavClassValue);
266293
if (this.settings.onCloseSubNav && typeof this.settings.onCloseSubNav === "function") {
267-
this.settings.onCloseSubNav(this.$element, this.$toggle, submenu, event);
294+
this.settings.onCloseSubNav(
295+
this.$element,
296+
this.$toggle,
297+
submenu,
298+
event
299+
);
268300
}
269301
}
270302
return this;
271303
};
272304
Navigation.prototype.closeAllSubMenuToggles = function() {
273-
const openSubMenuToggles = document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]');
305+
const openSubMenuToggles = document.querySelectorAll(
306+
'[data-meom-nav="sub-toggle"][aria-expanded="true"]'
307+
);
274308
openSubMenuToggles.forEach(function(openSubMenuToggle) {
275309
updateAria(openSubMenuToggle, "expanded");
276310
});
277-
const openSubSubMenuToggles = document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]');
311+
const openSubSubMenuToggles = document.querySelectorAll(
312+
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
313+
);
278314
openSubSubMenuToggles.forEach(function(openSubSubMenuToggle) {
279315
updateAria(openSubSubMenuToggle, "expanded");
280316
});
281317
return this;
282318
};
283319
Navigation.prototype.closeAllSubSubMenuToggles = function() {
284-
const openSubSubMenuToggles = document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]');
320+
const openSubSubMenuToggles = document.querySelectorAll(
321+
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
322+
);
285323
openSubSubMenuToggles.forEach(function(openSubSubMenuToggle) {
286324
updateAria(openSubSubMenuToggle, "expanded");
287325
});

‎demo/dist/navigation.js‎

Lines changed: 61 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,23 @@
55
return;
66
}
77
elem.classList.add(animation);
8-
elem.addEventListener("animationend", function endAnimation() {
9-
elem.classList.remove(animation);
10-
if (hide) {
11-
elem.classList.remove(hide);
12-
}
13-
elem.removeEventListener("animationend", endAnimation, false);
14-
}, false);
8+
elem.addEventListener(
9+
"animationend",
10+
function endAnimation() {
11+
elem.classList.remove(animation);
12+
if (hide) {
13+
elem.classList.remove(hide);
14+
}
15+
elem.removeEventListener("animationend", endAnimation, false);
16+
},
17+
false
18+
);
1519
}
1620
function updateAria(el, aria) {
17-
if (typeof el === "undefined" || 0 >= aria.length) {
21+
if ("undefined" === typeof el || 0 >= aria.length) {
1822
return;
1923
}
20-
const hiddenEl = el.getAttribute(`aria-${aria}`) === "true" ? "false" : "true";
24+
const hiddenEl = "true" === el.getAttribute(`aria-${aria}`) ? "false" : "true";
2125
el.setAttribute(`aria-${aria}`, hiddenEl);
2226
}
2327
var TAB_KEY = 9;
@@ -63,7 +67,9 @@
6367
this.settings = settings;
6468
this.navOpened = false;
6569
this.$subNavs = this.$element.querySelectorAll(this.settings.subNavAnchors);
66-
this.$subSubNavs = this.$element.querySelectorAll(this.settings.subSubNavAnchors);
70+
this.$subSubNavs = this.$element.querySelectorAll(
71+
this.settings.subSubNavAnchors
72+
);
6773
this.create();
6874
}
6975
Navigation.prototype.create = function() {
@@ -140,15 +146,21 @@
140146
Navigation.prototype.handleSubNav = function(event) {
141147
const target = event.target;
142148
const closestSubButton = target.closest('[data-meom-nav="sub-toggle"]');
143-
const closestSubSubButton = target.closest('[data-meom-nav="sub-sub-toggle"]');
149+
const closestSubSubButton = target.closest(
150+
'[data-meom-nav="sub-sub-toggle"]'
151+
);
144152
if (!closestSubButton && !closestSubSubButton) {
145153
return this;
146154
}
147-
if (!target.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue) && !target.matches('[data-meom-nav="sub-sub-toggle"]')) {
155+
if (!target.nextElementSibling.classList.contains(
156+
this.settings.toggleSubNavClassValue
157+
) && !target.matches('[data-meom-nav="sub-sub-toggle"]')) {
148158
this._closeAllSubMenus();
149159
this._closeAllSubMenuToggles();
150160
}
151-
if (!target.nextElementSibling.classList.contains(this.settings.toggleSubNavClassValue) && target.matches('[data-meom-nav="sub-sub-toggle"]')) {
161+
if (!target.nextElementSibling.classList.contains(
162+
this.settings.toggleSubNavClassValue
163+
) && target.matches('[data-meom-nav="sub-sub-toggle"]')) {
152164
this._closeAllSubSubMenus();
153165
this._closeAllSubSubMenuToggles();
154166
}
@@ -165,7 +177,9 @@
165177
return this;
166178
};
167179
Navigation.prototype.handleCloseSubNav = function(event) {
168-
const openSubMenu = document.querySelector(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
180+
const openSubMenu = document.querySelector(
181+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
182+
);
169183
if (openSubMenu) {
170184
const focusableElements = openSubMenu.querySelectorAll([
171185
"a[href]",
@@ -187,13 +201,17 @@
187201
}
188202
}
189203
if (ESCAPE_KEY === event.keyCode) {
190-
if (event.target.matches('[data-meom-nav="sub-toggle"][aria-expanded="true"]')) {
204+
if (event.target.matches(
205+
'[data-meom-nav="sub-toggle"][aria-expanded="true"]'
206+
)) {
191207
this._handleSubNav(event);
192208
this._closeAllSubMenus();
193209
this._closeAllSubMenuToggles();
194210
return this;
195211
}
196-
const parentSubMenu = event.target.closest(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
212+
const parentSubMenu = event.target.closest(
213+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
214+
);
197215
if (parentSubMenu) {
198216
const subMenuToggle = parentSubMenu.previousElementSibling;
199217
if (subMenuToggle) {
@@ -236,14 +254,18 @@
236254
return this;
237255
};
238256
Navigation.prototype.closeAllSubMenus = function() {
239-
const openSubMenus = document.querySelectorAll(`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
257+
const openSubMenus = document.querySelectorAll(
258+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
259+
);
240260
openSubMenus.forEach(function(openSubMenu) {
241261
this._setSubMenu(openSubMenu);
242262
}, this);
243263
return this;
244264
};
245265
Navigation.prototype.closeAllSubSubMenus = function() {
246-
const openSubSubMenus = document.querySelectorAll(`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`);
266+
const openSubSubMenus = document.querySelectorAll(
267+
`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
268+
);
247269
openSubSubMenus.forEach(function(openSubSubMenu) {
248270
this._setSubMenu(openSubSubMenu);
249271
}, this);
@@ -259,29 +281,45 @@
259281
animate(submenu, this.settings.animateSubNavClass);
260282
}
261283
if (this.settings.onOpenSubNav && typeof this.settings.onOpenSubNav === "function") {
262-
this.settings.onOpenSubNav(this.$element, this.$toggle, submenu, event);
284+
this.settings.onOpenSubNav(
285+
this.$element,
286+
this.$toggle,
287+
submenu,
288+
event
289+
);
263290
}
264291
} else {
265292
submenu.classList.remove(this.settings.toggleSubNavClassValue);
266293
if (this.settings.onCloseSubNav && typeof this.settings.onCloseSubNav === "function") {
267-
this.settings.onCloseSubNav(this.$element, this.$toggle, submenu, event);
294+
this.settings.onCloseSubNav(
295+
this.$element,
296+
this.$toggle,
297+
submenu,
298+
event
299+
);
268300
}
269301
}
270302
return this;
271303
};
272304
Navigation.prototype.closeAllSubMenuToggles = function() {
273-
const openSubMenuToggles = document.querySelectorAll('[data-meom-nav="sub-toggle"][aria-expanded="true"]');
305+
const openSubMenuToggles = document.querySelectorAll(
306+
'[data-meom-nav="sub-toggle"][aria-expanded="true"]'
307+
);
274308
openSubMenuToggles.forEach(function(openSubMenuToggle) {
275309
updateAria(openSubMenuToggle, "expanded");
276310
});
277-
const openSubSubMenuToggles = document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]');
311+
const openSubSubMenuToggles = document.querySelectorAll(
312+
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
313+
);
278314
openSubSubMenuToggles.forEach(function(openSubSubMenuToggle) {
279315
updateAria(openSubSubMenuToggle, "expanded");
280316
});
281317
return this;
282318
};
283319
Navigation.prototype.closeAllSubSubMenuToggles = function() {
284-
const openSubSubMenuToggles = document.querySelectorAll('[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]');
320+
const openSubSubMenuToggles = document.querySelectorAll(
321+
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
322+
);
285323
openSubSubMenuToggles.forEach(function(openSubSubMenuToggle) {
286324
updateAria(openSubSubMenuToggle, "expanded");
287325
});

0 commit comments

Comments
 (0)