https://truebluesalon.com/wp-content/themes/ph-base-tailwind/assets/js/mobile-hamburger-menu.js?ver=1.0.0

1/**
2 * Initializes mobile menu.
3 */
4function initMobileMenu() {
5  const subnavs = document.querySelectorAll('#mobile-menu .menu-item-has-children .sub-menu');
6  const hamburger = document.querySelector('#menuicon');
7  const closeBtn = document.querySelector('.close-offcanvas-menu');
8  const mobileMenu = document.querySelector('#mobile-menu');
9  const mobileOverlay = document.querySelector('#mobile-overlay');
10
11
12  // Toggle mobile menu.
13  function toggleMobileMenu() {
14    document.body.classList.toggle('mobile-menu-open');
15  }
16
17  // Prevent scrolling in all facets when mobile menu is open.
18  const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
19
20  function preventDefault(e) {
21    e.preventDefault();
22  }
23
24  function preventDefaultForScrollKeys(e) {
25    if (keys[e.keyCode]) {
26      preventDefault(e);
27      return false;
28    }
29  }
30
31  let supportsPassive = false;
32  try {
33    window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
34      get: function () { supportsPassive = true; } 
35    }));
36  } catch(e) { console.log('idk...'); }
37
38  const wheelOpt = supportsPassive ? { passive: false } : false;
39  const wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
40
41  function disableScroll() {
42    window.addEventListener('DOMMouseScroll', preventDefault, false); // Older Firefox
43    window.addEventListener(wheelEvent, preventDefault, wheelOpt); // Modern desktop
44    window.addEventListener('touchmove', preventDefault, wheelOpt); // Mobile
45    window.addEventListener('keydown', preventDefaultForScrollKeys, false);
46  }
47
48  function enableScroll() {
49    window.removeEventListener('DOMMouseScroll', preventDefault, false);
50    window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
51    window.removeEventListener('touchmove', preventDefault, wheelOpt);
52    window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
53  }
54
55  // Add event listeners to toggle and close mobile menu.
56  hamburger?.addEventListener('click', () => {
57    mobileMenu.style.display = 'flex';
58    toggleMobileMenu();
59    disableScroll();
60  });
61
62  mobileOverlay?.addEventListener('click', () => {
63    subnavs.forEach(sub => {
64      sub.closest('.menu-item')?.classList.remove('is_open');
65      sub.style.maxHeight = '0';
66    });
67    toggleMobileMenu();
68    enableScroll();
69  });
70
71  closeBtn?.addEventListener('click', () => {
72    toggleMobileMenu();
73    enableScroll();
74    document.querySelectorAll('#mobile-menu .menu-item-has-children')?.forEach(item => {
75      item.classList.remove('is_open');
76      item.querySelector('ul.sub-menu').style.maxHeight = `0`;
77    });
78  });
79}
80
81window.addEventListener('DOMContentLoaded', initMobileMenu);
82
83
84
85
86
87
88
89/* (function() {
90  // declare all the things
91  const subnavs = document.querySelectorAll('#mobile-menu .menu-item-has-children .is_subnav');
92  
93  

94  // *** gotta update menu size for header.6 ***
95  function initMobileMenu() {
96    const hamburger = document.querySelector('#menuicon');
97    // const closeBtn = document.querySelector('.fa-xmark'); // old fontawesome btn
98    const closeBtn = document.querySelector('.close-offcanvas-menu');
99  
100    // mmmmmm, hamburger
101    hamburger?.addEventListener('click', () => {
102      // Standard style
103      // document.querySelector('#mobile-menu').style.display = 'block';
104  
105      // Styling for circle reveal menu
106      document.querySelector('#mobile-menu').style.display = 'flex';
107      toggleMobileMenu();
108      disableScroll();
109    })
110  
111    // deploy the iron curtain and open side menu
112    document.querySelector('#mobile-overlay')?.addEventListener('click', () => {
113      subnavs.forEach(sub => {
114        sub.closest('.menu-item')?.classList.remove('is_open');
115        sub.style.maxHeight = '0';
116      })
117      toggleMobileMenu();
118      enableScroll();
119    })
120  
121    // close mobile menu
122    closeBtn?.addEventListener('click', () => {
123      toggleMobileMenu();
124      enableScroll();
125      document.querySelectorAll('#mobile-menu .menu-item-has-children')?.forEach( item => {
126        item.classList.remove('is_open');
127        item.querySelector('ul.is_subnav').style.maxHeight = `0`;
128      })
129    })
130  }
131  
132  // this is where the fun begins
133  function toggleMobileMenu() {
134    document.body.classList.toggle('mobile-menu-open');
135  }
136  
137  // prevent scrolling in all facets when mobile menu is open
138  // left: 37, up: 38, right: 39, down: 40,
139  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
140  var keys = {37: 1, 38: 1, 39: 1, 40: 1};
141  
142  function preventDefault(e) {
143    e.preventDefault();
144  }
145  
146  function preventDefaultForScrollKeys(e) {
147    if (keys[e.keyCode]) {
148      preventDefault(e);
149      return false;
150    }
151  }
152  
153  // modern Chrome requires { passive: false } when adding event
154  var supportsPassive = false;
155  try {
156    window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
157      get: function () { supportsPassive = true; } 
158    }));
159  } catch(e) { console.log('idk...'); }
160  
161  var wheelOpt = supportsPassive ? { passive: false } : false;
162  var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
163  
164  
165  // call this to Disable scroll
166  function disableScroll() {
167    window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
168    window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
169    window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
170    window.addEventListener('keydown', preventDefaultForScrollKeys, false);
171  }
172  
173  // call this to Enable scroll
174  function enableScroll() {
175    window.removeEventListener('DOMMouseScroll', preventDefault, false);
176    window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
177    window.removeEventListener('touchmove', preventDefault, wheelOpt);
178    window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
179  }
180  
181  // when page loads, do the things
182  window.addEventListener('DOMContentLoaded', initMobileMenu);
183})() */