Skip to content

Commit b0588a6

Browse files
samikeijonensamikeijonen
authored
Merge pull request #33 from MEOM/feature/closeNavOnDocClick
Add closeNavOnDocClick setting.
2 parents 6f88a4a + 291ef0f commit b0588a6

File tree

14 files changed

+2171
-6795
lines changed

14 files changed

+2171
-6795
lines changed

‎.nvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
16
1+
20

‎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.3.0 released Nov 26, 2024
3+
- Added `closeNavOnDocClick` setting.
24
## Version 1.2.1 released May 14, 2024
35
- Update: Allow HTML in the buttons.
46
## Version 1.2.0 released April 17, 2024

‎demo/dist/navigation-multiple.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
toggleSubNavClassValue: "is-opened",
3737
closeNavOnEscKey: true,
3838
closeNavOnLastTab: false,
39+
closeNavOnDocClick: true,
3940
subNavClass: ".sub-menu",
4041
subToggleButtonClasses: "",
4142
subSubToggleButtonClasses: "",
@@ -249,6 +250,9 @@
249250
if (event.target.closest('[data-meom-nav="navigation"]')) {
250251
return this;
251252
}
253+
if (!this.settings.closeNavOnDocClick) {
254+
return this;
255+
}
252256
this._closeAllSubMenus();
253257
this._closeAllSubMenuToggles();
254258
return this;
@@ -342,13 +346,13 @@
342346
subSubToggleButtonClasses: "site-nav__sub-sub-toggle",
343347
toggleNavClass: false,
344348
closeNavOnLastTab: true,
345-
onOpenNav: function(element) {
349+
onOpenNav(element) {
346350
document.documentElement.classList.add("overflow-hidden");
347351
document.documentElement.classList.add("is-site-nav-opened");
348352
element.classList.add("is-opened");
349353
animate(element, "fade-in");
350354
},
351-
onCloseNav: function(element) {
355+
onCloseNav(element) {
352356
document.documentElement.classList.remove("overflow-hidden");
353357
document.documentElement.classList.remove("is-site-nav-opened");
354358
animate(element, "fade-out", "is-opened");

‎demo/dist/navigation.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
toggleSubNavClassValue: "is-opened",
3737
closeNavOnEscKey: true,
3838
closeNavOnLastTab: false,
39+
closeNavOnDocClick: true,
3940
subNavClass: ".sub-menu",
4041
subToggleButtonClasses: "",
4142
subSubToggleButtonClasses: "",
@@ -249,6 +250,9 @@
249250
if (event.target.closest('[data-meom-nav="navigation"]')) {
250251
return this;
251252
}
253+
if (!this.settings.closeNavOnDocClick) {
254+
return this;
255+
}
252256
this._closeAllSubMenus();
253257
this._closeAllSubMenuToggles();
254258
return this;
@@ -344,13 +348,13 @@
344348
subSubToggleButtonClasses: "site-nav__sub-sub-toggle",
345349
toggleNavClass: false,
346350
closeNavOnLastTab: true,
347-
onOpenNav: function(element) {
351+
onOpenNav(element) {
348352
document.documentElement.classList.add("overflow-hidden");
349353
document.documentElement.classList.add("is-site-nav-opened");
350354
element.classList.add("is-opened");
351355
animate(element, "fade-in");
352356
},
353-
onCloseNav: function(element) {
357+
onCloseNav(element) {
354358
document.documentElement.classList.remove("overflow-hidden");
355359
document.documentElement.classList.remove("is-site-nav-opened");
356360
animate(element, "fade-out", "is-opened");

‎demo/src/navigation-multiple.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import { Navigation, animate } from "@meom/navigation";
1+
import { Navigation, animate } from '@meom/navigation';
22

33
// Mandatory elements.
4-
const navElement = document.querySelector(".js-site-nav-wrapper");
5-
const navToggle = document.querySelector(".js-site-nav-toggle");
4+
const navElement = document.querySelector('.js-site-nav-wrapper');
5+
const navToggle = document.querySelector('.js-site-nav-toggle');
66

77
new Navigation(navElement, navToggle, {
8-
subNavAnchors: ".js-site-nav-wrapper > ul > .menu-item-has-children > a",
8+
subNavAnchors: '.js-site-nav-wrapper > ul > .menu-item-has-children > a',
99
subSubNavAnchors:
10-
".js-site-nav-wrapper .sub-menu > .menu-item-has-children > a",
11-
subToggleButtonClasses: "site-nav__sub-toggle",
12-
subSubToggleButtonClasses: "site-nav__sub-sub-toggle",
10+
'.js-site-nav-wrapper .sub-menu > .menu-item-has-children > a',
11+
subToggleButtonClasses: 'site-nav__sub-toggle',
12+
subSubToggleButtonClasses: 'site-nav__sub-sub-toggle',
1313
toggleNavClass: false,
1414
closeNavOnLastTab: true,
1515

16-
onOpenNav: function (element) {
16+
onOpenNav(element) {
1717
// Prevent scrolling on page.
18-
document.documentElement.classList.add("overflow-hidden");
19-
document.documentElement.classList.add("is-site-nav-opened");
18+
document.documentElement.classList.add('overflow-hidden');
19+
document.documentElement.classList.add('is-site-nav-opened');
2020

21-
element.classList.add("is-opened");
22-
animate(element, "fade-in");
21+
element.classList.add('is-opened');
22+
animate(element, 'fade-in');
2323
},
24-
onCloseNav: function (element) {
24+
onCloseNav(element) {
2525
// Allow scrolling on page.
26-
document.documentElement.classList.remove("overflow-hidden");
27-
document.documentElement.classList.remove("is-site-nav-opened");
26+
document.documentElement.classList.remove('overflow-hidden');
27+
document.documentElement.classList.remove('is-site-nav-opened');
2828

29-
animate(element, "fade-out", "is-opened");
30-
}
29+
animate(element, 'fade-out', 'is-opened');
30+
},
3131
});

‎demo/src/navigation.js‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,53 @@
1-
import { Navigation, animate } from "@meom/navigation";
1+
import { Navigation, animate } from '@meom/navigation';
22

33
// Mandatory elements.
4-
const navElement = document.querySelector(".js-site-nav-items");
5-
const navToggle = document.querySelector(".js-site-nav-toggle");
4+
const navElement = document.querySelector('.js-site-nav-items');
5+
const navToggle = document.querySelector('.js-site-nav-toggle');
66

77
// For demo.
8-
const isHoverDemo = document.querySelector(".js-site-nav-hover");
8+
const isHoverDemo = document.querySelector('.js-site-nav-hover');
99

1010
new Navigation(navElement, navToggle, {
1111
action: isHoverDemo ? 'hover' : 'click',
12-
subNavAnchors: ".js-site-nav-items > .menu-item-has-children > a",
12+
subNavAnchors: '.js-site-nav-items > .menu-item-has-children > a',
1313
subSubNavAnchors:
14-
".js-site-nav-items .sub-menu > .menu-item-has-children > a",
15-
subToggleButtonClasses: "site-nav__sub-toggle",
16-
subSubToggleButtonClasses: "site-nav__sub-sub-toggle",
14+
'.js-site-nav-items .sub-menu > .menu-item-has-children > a',
15+
subToggleButtonClasses: 'site-nav__sub-toggle',
16+
subSubToggleButtonClasses: 'site-nav__sub-sub-toggle',
1717
toggleNavClass: false,
1818
closeNavOnLastTab: true,
1919

20-
onOpenNav: function (element) {
20+
onOpenNav(element) {
2121
// Prevent scrolling on page.
22-
document.documentElement.classList.add("overflow-hidden");
23-
document.documentElement.classList.add("is-site-nav-opened");
22+
document.documentElement.classList.add('overflow-hidden');
23+
document.documentElement.classList.add('is-site-nav-opened');
2424

25-
element.classList.add("is-opened");
26-
animate(element, "fade-in");
25+
element.classList.add('is-opened');
26+
animate(element, 'fade-in');
2727
},
28-
onCloseNav: function (element) {
28+
onCloseNav(element) {
2929
// Allow scrolling on page.
30-
document.documentElement.classList.remove("overflow-hidden");
31-
document.documentElement.classList.remove("is-site-nav-opened");
30+
document.documentElement.classList.remove('overflow-hidden');
31+
document.documentElement.classList.remove('is-site-nav-opened');
3232

33-
animate(element, "fade-out", "is-opened");
34-
}
33+
animate(element, 'fade-out', 'is-opened');
34+
},
3535
});
3636

37-
3837
/**
3938
* Footer demo when multiple navs on the page.
4039
*/
4140

4241
// Mandatory elements.
43-
const footerElement = document.querySelector(".js-secondary-nav-items");
44-
const footerToggle = document.querySelector(".js-secondary-nav-toggle");
42+
const footerElement = document.querySelector('.js-secondary-nav-items');
43+
const footerToggle = document.querySelector('.js-secondary-nav-toggle');
4544

46-
if ( footerElement && footerToggle ) {
45+
if (footerElement && footerToggle) {
4746
new Navigation(footerElement, footerToggle, {
48-
subNavAnchors: ".js-secondary-nav-items > .menu-item-has-children > a",
47+
subNavAnchors: '.js-secondary-nav-items > .menu-item-has-children > a',
4948
subSubNavAnchors:
50-
".js-secondary-nav-items .sub-menu > .menu-item-has-children > a",
51-
subToggleButtonClasses: "site-nav__sub-toggle",
52-
subSubToggleButtonClasses: "site-nav__sub-sub-toggle",
49+
'.js-secondary-nav-items .sub-menu > .menu-item-has-children > a',
50+
subToggleButtonClasses: 'site-nav__sub-toggle',
51+
subSubToggleButtonClasses: 'site-nav__sub-sub-toggle',
5352
});
5453
}

‎dist/index.esm.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ function Navigation(element, toggle, options = {}) {
7474
toggleSubNavClassValue: 'is-opened',
7575
closeNavOnEscKey: true,
7676
closeNavOnLastTab: false,
77+
closeNavOnDocClick: true,
7778
subNavClass: '.sub-menu',
7879
subToggleButtonClasses: '',
7980
subSubToggleButtonClasses: '',
@@ -483,6 +484,11 @@ Navigation.prototype.handleDocClick = function (event) {
483484
return this;
484485
}
485486

487+
// Bail if `closeNavOnDocClick` setting is not set to true.
488+
if (!this.settings.closeNavOnDocClick) {
489+
return this;
490+
}
491+
486492
this._closeAllSubMenus();
487493
this._closeAllSubMenuToggles();
488494

‎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: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
toggleSubNavClassValue: 'is-opened',
8181
closeNavOnEscKey: true,
8282
closeNavOnLastTab: false,
83+
closeNavOnDocClick: true,
8384
subNavClass: '.sub-menu',
8485
subToggleButtonClasses: '',
8586
subSubToggleButtonClasses: '',
@@ -489,6 +490,11 @@
489490
return this;
490491
}
491492

493+
// Bail if `closeNavOnDocClick` setting is not set to true.
494+
if (!this.settings.closeNavOnDocClick) {
495+
return this;
496+
}
497+
492498
this._closeAllSubMenus();
493499
this._closeAllSubMenuToggles();
494500

‎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.

0 commit comments

Comments
 (0)