Skip to content

Commit fea4f5e

Browse files
samikeijonensamikeijonen
authored
Merge pull request #31 from MEOM/fix/sub-sub-sub-toggle
Fixed: Close only same level sub sub menus. This way we can support m…
2 parents 88776c2 + 772f81e commit fea4f5e

File tree

13 files changed

+108
-51
lines changed

13 files changed

+108
-51
lines changed

‎changelog.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
# Changelog
2+
## Version 1.2.0 released April 17, 2024
3+
- Fixed: Close only same level sub sub menus. This way we can support more sub sub menu levels.
24
## Version 1.1.0 released April 3, 2023
35
- Fixed: show only one sub sub menu open at once.
46
- Updated NPM packages.

‎demo/dist/navigation-multiple.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,8 @@
161161
if (!target.nextElementSibling.classList.contains(
162162
this.settings.toggleSubNavClassValue
163163
) && target.matches('[data-meom-nav="sub-sub-toggle"]')) {
164-
this._closeAllSubSubMenus();
165-
this._closeAllSubSubMenuToggles();
164+
this._closeAllSubSubMenus(target);
165+
this._closeAllSubSubMenuToggles(target);
166166
}
167167
updateAria(target, "expanded");
168168
if (target.nextElementSibling) {
@@ -262,9 +262,12 @@
262262
}, this);
263263
return this;
264264
};
265-
Navigation.prototype.closeAllSubSubMenus = function() {
266-
const openSubSubMenus = document.querySelectorAll(
267-
`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
265+
Navigation.prototype.closeAllSubSubMenus = function(target) {
266+
const sameLevelParentSubMenu = target.closest(
267+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
268+
);
269+
const openSubSubMenus = sameLevelParentSubMenu.querySelectorAll(
270+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
268271
);
269272
openSubSubMenus.forEach(function(openSubSubMenu) {
270273
this._setSubMenu(openSubSubMenu);
@@ -316,8 +319,11 @@
316319
});
317320
return this;
318321
};
319-
Navigation.prototype.closeAllSubSubMenuToggles = function() {
320-
const openSubSubMenuToggles = document.querySelectorAll(
322+
Navigation.prototype.closeAllSubSubMenuToggles = function(target) {
323+
const sameLevelParentSubMenu = target.closest(
324+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
325+
);
326+
const openSubSubMenuToggles = sameLevelParentSubMenu.querySelectorAll(
321327
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
322328
);
323329
openSubSubMenuToggles.forEach(function(openSubSubMenuToggle) {

‎demo/dist/navigation.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,8 @@
161161
if (!target.nextElementSibling.classList.contains(
162162
this.settings.toggleSubNavClassValue
163163
) && target.matches('[data-meom-nav="sub-sub-toggle"]')) {
164-
this._closeAllSubSubMenus();
165-
this._closeAllSubSubMenuToggles();
164+
this._closeAllSubSubMenus(target);
165+
this._closeAllSubSubMenuToggles(target);
166166
}
167167
updateAria(target, "expanded");
168168
if (target.nextElementSibling) {
@@ -262,9 +262,12 @@
262262
}, this);
263263
return this;
264264
};
265-
Navigation.prototype.closeAllSubSubMenus = function() {
266-
const openSubSubMenus = document.querySelectorAll(
267-
`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
265+
Navigation.prototype.closeAllSubSubMenus = function(target) {
266+
const sameLevelParentSubMenu = target.closest(
267+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
268+
);
269+
const openSubSubMenus = sameLevelParentSubMenu.querySelectorAll(
270+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
268271
);
269272
openSubSubMenus.forEach(function(openSubSubMenu) {
270273
this._setSubMenu(openSubSubMenu);
@@ -316,8 +319,11 @@
316319
});
317320
return this;
318321
};
319-
Navigation.prototype.closeAllSubSubMenuToggles = function() {
320-
const openSubSubMenuToggles = document.querySelectorAll(
322+
Navigation.prototype.closeAllSubSubMenuToggles = function(target) {
323+
const sameLevelParentSubMenu = target.closest(
324+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
325+
);
326+
const openSubSubMenuToggles = sameLevelParentSubMenu.querySelectorAll(
321327
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
322328
);
323329
openSubSubMenuToggles.forEach(function(openSubSubMenuToggle) {

‎demo/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,15 @@
4848
<li><a href="#">Design</a></li>
4949
<li><a href="#">WordPress</a></li>
5050
<li><a href="#">Accessibility</a>
51+
<li class="menu-item-has-children">
52+
<a href="#">About</a>
53+
<ul class="sub-menu">
54+
<li><a href="#">Contact us</a></li>
55+
<li><a href="#">Company values</a></li>
56+
<li><a href="#">Staff</a></li>
57+
<li><a href="#">More info</a></li>
58+
</ul>
59+
</li>
5160
</ul>
5261
</li>
5362
</ul>

‎demo/package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.esm.js‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,8 @@ Navigation.prototype.handleSubNav = function (event) {
305305
) &&
306306
target.matches('[data-meom-nav="sub-sub-toggle"]')
307307
) {
308-
this._closeAllSubSubMenus();
309-
this._closeAllSubSubMenuToggles();
308+
this._closeAllSubSubMenus(target);
309+
this._closeAllSubSubMenuToggles(target);
310310
}
311311

312312
// Update sub toggle ARIA.
@@ -506,13 +506,19 @@ Navigation.prototype.closeAllSubMenus = function () {
506506
};
507507

508508
/**
509-
* Close all sub sub menus.
509+
* Close only same level sub sub menus.
510510
*
511+
* @param {Object} target Target triggered.
511512
* @return {this} this
512513
*/
513-
Navigation.prototype.closeAllSubSubMenus = function () {
514-
const openSubSubMenus = document.querySelectorAll(
515-
`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
514+
Navigation.prototype.closeAllSubSubMenus = function (target) {
515+
const sameLevelParentSubMenu = target.closest(
516+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
517+
);
518+
519+
// Get same level sub sub menus
520+
const openSubSubMenus = sameLevelParentSubMenu.querySelectorAll(
521+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
516522
);
517523

518524
openSubSubMenus.forEach(function (openSubSubMenu) {
@@ -608,12 +614,17 @@ Navigation.prototype.closeAllSubMenuToggles = function () {
608614
};
609615

610616
/**
611-
* Close all sub sub menu toggles.
617+
* Close all same level sub sub menu toggles.
612618
*
619+
* @param {Object} target Target.
613620
* @return {this} this
614621
*/
615-
Navigation.prototype.closeAllSubSubMenuToggles = function () {
616-
const openSubSubMenuToggles = document.querySelectorAll(
622+
Navigation.prototype.closeAllSubSubMenuToggles = function (target) {
623+
const sameLevelParentSubMenu = target.closest(
624+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
625+
);
626+
627+
const openSubSubMenuToggles = sameLevelParentSubMenu.querySelectorAll(
617628
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
618629
);
619630

‎dist/index.esm.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -311,8 +311,8 @@
311311
) &&
312312
target.matches('[data-meom-nav="sub-sub-toggle"]')
313313
) {
314-
this._closeAllSubSubMenus();
315-
this._closeAllSubSubMenuToggles();
314+
this._closeAllSubSubMenus(target);
315+
this._closeAllSubSubMenuToggles(target);
316316
}
317317

318318
// Update sub toggle ARIA.
@@ -512,13 +512,19 @@
512512
};
513513

514514
/**
515-
* Close all sub sub menus.
515+
* Close only same level sub sub menus.
516516
*
517+
* @param {Object} target Target triggered.
517518
* @return {this} this
518519
*/
519-
Navigation.prototype.closeAllSubSubMenus = function () {
520-
const openSubSubMenus = document.querySelectorAll(
521-
`${this.settings.subNavClass} ${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
520+
Navigation.prototype.closeAllSubSubMenus = function (target) {
521+
const sameLevelParentSubMenu = target.closest(
522+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
523+
);
524+
525+
// Get same level sub sub menus
526+
const openSubSubMenus = sameLevelParentSubMenu.querySelectorAll(
527+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
522528
);
523529

524530
openSubSubMenus.forEach(function (openSubSubMenu) {
@@ -614,12 +620,17 @@
614620
};
615621

616622
/**
617-
* Close all sub sub menu toggles.
623+
* Close all same level sub sub menu toggles.
618624
*
625+
* @param {Object} target Target.
619626
* @return {this} this
620627
*/
621-
Navigation.prototype.closeAllSubSubMenuToggles = function () {
622-
const openSubSubMenuToggles = document.querySelectorAll(
628+
Navigation.prototype.closeAllSubSubMenuToggles = function (target) {
629+
const sameLevelParentSubMenu = target.closest(
630+
`${this.settings.subNavClass}.${this.settings.toggleSubNavClassValue}`
631+
);
632+
633+
const openSubSubMenuToggles = sameLevelParentSubMenu.querySelectorAll(
623634
'[data-meom-nav="sub-sub-toggle"][aria-expanded="true"]'
624635
);
625636

‎dist/index.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)