https://www.infoflora.ch/assets/js/menu.js

1const mediaMobile = window.matchMedia('(max-width: 768px)');
2var mobileMenuBtn = document.getElementById("mobile-menu-btn");
3var sidebar = document.getElementById("sidebar");
4var mobileMenu = document.querySelector(".mobile-menu");
5var toolsMenu = document.querySelector('.tools-menu.mobile');
6var subMenuDiv = document.querySelector(".subMenu");
7var subMenuTitle = document.querySelector(".subMenu-title");
8var subMenuReturn = document.querySelector(".subMenu-return");
9var searchBar = document.getElementById("search_link");
10var searchbarIsOpen = false;
11
12/*
13  Search bar
14*/
15searchBar.addEventListener("click", (e) => {
16  e.stopPropagation();
17  e.preventDefault();
18
19  if (e.target == searchBar) {
20
21    if (searchbarIsOpen == false) {
22      searchBar.childNodes[ 0 ].style.display = "unset";
23      searchbarIsOpen = true;
24    } else {
25      searchBar.childNodes[ 0 ].style.display = "none";
26      searchbarIsOpen = false;
27    }
28  }
29});
30
31/* 
32  Menu selected item
33*/
34
35$('.desktop-menu .menu-nav > ul > li').click(function () {
36  $('.desktop-menu .menu-nav > ul > li').removeClass('selected');
37  $(this).addClass('selected');
38});
39
40$('.subMenu').on('mouseover', '.level2 > a', function () {
41  $('.level2').removeClass('active');
42  $(this).parent().addClass('active');
43});
44
45// For Mobile
46$('.mobile-menu li').click(function (e) {
47  e.stopPropagation();
48  if ($(this).hasClass('fly') && $(this).hasClass('level1')) {
49    e.preventDefault();
50    var ullist = $(this).children('ul:first');
51    $(this).toggleClass('opened');
52    ullist.slideToggle();
53  }
54});
55
56
57/* 
58Sidebar opening and closing
59*/
60
61sidebar.addEventListener("mouseover", () => {
62  if (!mediaMobile.matches) {
63    $('#sidebar').toggleClass('active', true);
64  }
65});
66
67sidebar.addEventListener("mouseleave", () => {
68  if (!(mediaMobile.matches || $('#extended-sidebar').hasClass('active'))) {
69    $('#sidebar').toggleClass('active', false);
70  }
71});
72
73//For mobile
74
75function hideContent () {
76  $('#page-content').toggleClass('hide', true);
77  $('footer').toggleClass('hide', true);
78}
79
80function showContent () {
81  $('#page-content').toggleClass('hide', false);
82  $('footer').toggleClass('hide', false);
83}
84
85function closeMobileMenu () {
86  mobileMenu.style.display = "none";
87  mobileMenuBtn.classList.toggle('closed', true);
88  mobileMenuBtn.classList.toggle('opened', false);
89  $('#autoLatin-home').blur();
90  showContent();
91}
92
93function openMobileMenu () {
94  closeMobileToolsMenu();
95  mobileMenu.style.display = "flex";
96  mobileMenuBtn.classList.toggle('closed', false);
97  mobileMenuBtn.classList.toggle('opened', true);
98  hideContent();
99}
100
101mobileMenuBtn.addEventListener("click", () => {
102  if (mobileMenu.style.display === "none" || mobileMenu.style.display === '') {
103    openMobileMenu();
104  } else {
105    closeMobileMenu();
106  }
107});
108
109
110/* 
111extended sidebar for submenu opening and closing
112*/
113
114// Called from breadcrumb(PagePath)
115function openMenuToElement (e, classname, link, linktext) {
116  if (!mediaMobile.matches) {
117    showSubMenu(e, classname, link, linktext);
118  }
119  else {
120    openMobileMenu();
121    var elementToOpen = $('.mobile-menu li.' + classname)
122    if (elementToOpen.hasClass('fly') && elementToOpen.hasClass('level1')) {
123      e.preventDefault();
124      var ullist = elementToOpen.children('ul:first');
125      elementToOpen.toggleClass('opened');
126      if (ullist.is(":hidden")) {
127        ullist.slideToggle();
128      }
129    }
130  }
131}
132
133
134// Called in mainNav menuRow 
135function showSubMenu (e, classname, link, linktext) {
136  e.preventDefault();
137  if (!mediaMobile.matches) {
138    if (subMenuDiv.lastElementChild) {
139      subMenuDiv.removeChild(subMenuDiv.lastElementChild)
140    }
141    var subMenu = document.getElementsByClassName(classname)[ 0 ].lastChild;
142    var clone = subMenu.cloneNode(true);
143    subMenuDiv.appendChild(clone);
144    subMenuTitle.innerHTML = linktext;
145    $('#sidebar').toggleClass('active', true);
146    $('.' + classname).toggleClass('selected', true);
147    $('#extended-sidebar').toggleClass('active', true);
148
149    $('body').toggleClass('no-scroll', true);
150  }
151}
152
153
154function closeSubMenu () {
155  $('#extended-sidebar').toggleClass('active', false);
156  $('#sidebar').toggleClass('active', false);
157  $('.desktop-menu .menu-nav > ul > li').removeClass('selected');
158  $('body').toggleClass('no-scroll', false);
159  if (subMenuDiv.lastElementChild) {
160    subMenuDiv.removeChild(subMenuDiv.lastElementChild);
161  }
162}
163
164subMenuReturn.addEventListener("click", closeSubMenu);
165document.querySelector("#extended-sidebar .transparent").addEventListener("click", closeSubMenu);
166
167/* 
168  Footer management
169*/
170
171$('footer .col > h4').click(function () {
172  if (mediaMobile.matches) {
173    $(this)[ 0 ].parentNode.lastElementChild.classList.toggle('active');
174  }
175});
176
177/* 
178  Tools menu management
179*/
180
181function closeMobileToolsMenu () {
182  if (toolsMenu) {
183    toolsMenu.classList.toggle('hide', true);
184    showContent();
185  }
186}
187
188$('.tools.mobile button').click(function () {
189  toolsMenu.classList.toggle('hide', false);
190  $(':focus').blur();
191  hideContent();
192  $('.tools-menu-return').click(closeMobileToolsMenu);
193  $('#autoLatin-home').focus();
194});
195
196/* 
197  Media size management
198*/
199
200function handleMediaChange (e) {
201  // Check if the media query is true
202  if (e.matches) {
203    // Then log the following message to the console
204    $('#sidebar').toggleClass('active', false);
205    closeSubMenu();
206  }
207  else {
208    closeMobileMenu();
209    closeMobileToolsMenu();
210  }
211}
212
213// Register event listener
214mediaMobile.addEventListener("change", handleMediaChange);
215
216// Initial check
217handleMediaChange(mediaMobile);
218
219
220$(document).ready(function () {
221  var anchor = document.getElementById(decodeURI(window.location.hash.substr(1)));
222  if (anchor && anchor.classList.contains('collapsed')) {
223    anchor.classList.remove('collapsed');
224    $(anchor.attributes.getNamedItem("data-target").nodeValue).addClass('show in');
225  }
226});
227
228window.addEventListener('hashchange', function () {
229  closeSubMenu();
230  var hashElement = document.getElementById(window.location.hash.substr(1));
231  if (hashElement) {
232    hashElement.scrollIntoView();
233  }
234});