forked from adamlaska/circleci-docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnav.js
More file actions
135 lines (122 loc) · 4.38 KB
/
nav.js
File metadata and controls
135 lines (122 loc) · 4.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
// Modal search on mobile
$(document).ready(
(function () {
const body = $('body');
const mobileSearchIcon = $('.global-nav--search-button');
const mobileMenuBtn = $('.global-nav--toggle');
mobileSearchIcon.on('click', function (e) {
e.preventDefault();
body.addClass('search-open');
$('.global-nav--search-bar .instantsearch-search').focus();
if (body.hasClass('search-open')) {
mobileSearchIcon.addClass('no-display');
mobileMenuBtn.addClass('no-display');
}
});
})(),
);
// Show/hide search button on menu collapse
$(document).ready(function () {
$('#global-nav').on('show.bs.collapse', function () {
$('body').addClass('global-nav-open');
});
$('#global-nav').on('hide.bs.collapse', function () {
$('body').removeClass('global-nav-open');
});
});
// Collapsing submenus on mobile nav
(function () {
// grabbing all expandable submenus
var expandableSubMenus = Array.from(
document.querySelectorAll('nav li.arrow'),
);
expandableSubMenus.forEach(function (submenu) {
submenu.addEventListener('click', function () {
if (this.classList.contains('collapsed')) {
this.classList.remove('collapsed');
} else {
this.classList.add('collapsed');
}
});
});
// Remove search open when mobile menu is open
const mobileMenu = $('.global-nav--toggle');
const mobileSearchIcon = $('.global-nav--search-button');
mobileMenu.on('click', () => {
mobileSearchIcon.toggleClass('no-display');
});
// Open dropdowns on keyboard focus
$(document).ready(function () {
$('.nav-item').each(function () {
var wrapper = $(this);
wrapper.find('a').on('focus', function () {
wrapper.addClass('submenu-open');
wrapper.attr('aria-expanded', true);
});
wrapper.on('focusout', function () {
wrapper.removeClass('submenu-open');
wrapper.attr('aria-expanded', false);
});
});
});
})();
/**
* openLangDropdown handles setting up the toggling of our language picker
* on mobile and on desktop.
* */
const openLangDropdown = () => {
const globeBtn = document.getElementById('globe-lang-btn');
const langPicker = document.getElementById('lang-picker');
const underlyingMobileMenu = document.querySelector('.mobile-sidebar');
// These vars are specific to the mobile picker.
const dimmer = document.querySelector('.lang-picker-mobile-dimmer');
const mobileBackBtn = document.getElementById('lang-picker-back-button');
const mobileCloseBtn = document.getElementById('lang-picker-close-button');
const globalNav = document.querySelector('.global-nav--nav');
// open the menu
globeBtn.addEventListener('click', () => {
langPicker.classList.add('lang-active');
underlyingMobileMenu.classList.add('hidden-md');
dimmer.style.display = 'inherit';
globalNav.classList.add('lang-picker-open');
mobileCloseBtn.classList.add('clickable');
});
// enable going 'back' to the mobile menu.
mobileBackBtn &&
mobileBackBtn.addEventListener('click', () => {
langPicker.classList.remove('lang-active');
underlyingMobileMenu.classList.remove('hidden-md');
dimmer.style.display = 'none';
globalNav.classList.remove('lang-picker-open');
});
// closes the lang picker, restoring the mobile menu.
mobileCloseBtn &&
mobileCloseBtn.addEventListener('click', () => {
underlyingMobileMenu;
langPicker.classList.remove('lang-active');
underlyingMobileMenu.classList.remove('hidden-md');
dimmer.style.display = 'none';
// simulate a click to close the menu.
document.querySelector('.global-nav--toggle').click();
globalNav.classList.remove('lang-picker-open');
mobileCloseBtn.classList.remove('clickable');
});
// close out the menu if you click anywhere outside of it.
let submitBtn = document.getElementById('submit-lang-btn');
document.addEventListener('click', (e) => {
if (
!globeBtn.contains(e.target) &&
!langPicker.contains(e.target) &&
!submitBtn.contains(e.target)
) {
underlyingMobileMenu.classList.remove('hidden-md');
globalNav.classList.remove('lang-picker-open');
langPicker.classList.remove('lang-active');
dimmer.style.display = 'none';
}
});
};
// Another PR will address refactoring rest of functions to be added to this callback
$(document).ready(() => {
openLangDropdown();
});