https://www.tauberbischofsheim.de/site/Tauberbischofsheim-2025/resourceCached/10.4.2.3/js/mobilemenu.js

1// ############################################################
2//  MMenu (Main)
3// ############################################################
4
5document.addEventListener("DOMContentLoaded", () => {
6
7  // Logo
8  var logoBrand = document.querySelector(".l-header__brand img");
9  var logoBrandClone = logoBrand.cloneNode(true).outerHTML;
10  var quicklinks = ""
11  var homepage = ""
12  if(document.querySelector('.link-social') && jQuery('body.main').length > 0){
13    quicklinks = document.querySelector('.link-social').cloneNode(true).outerHTML
14  }
15  if(document.querySelector('.l-header .link-homepage') && jQuery('body.tourismus').length > 0){
16    homepage = document.querySelector('.l-header .link-homepage').cloneNode(true).outerHTML
17  }
18  // Quicksearch link
19  // var quuicksearch = document.querySelector("#search-layer .c-quicksearch").outerHTML;
20  // Quicklinks
21  // var quicklinksInfo = document.querySelector(".l-header__quicklinks-func .qf-info a").href;
22  // var quicklinksFacebook= document.querySelector(".l-header__quicklinks-func .qf-facebook a").href;
23  // var quicklinksInstagram = document.querySelector(".l-header__quicklinks-func .qf-instagram a").href;
24
25  // jQuery("#fusszeilennavigation").appendTo( $("#menu") );
26
27  const menu = new Mmenu(".l-navigation", {
28    // == OPTIONS
29    // CORE: hooks / navbar / slidingSubmenus / theme
30    // ADDONS: backButton / counters / iconbar / iconPanels / navbars / pageScroll / searchfield / sectionIndexer / setSelected / sidebar
31
32    // CORE: Hooks
33    "hooks": {
34      "openPanel:before": (panel) => {
35        //console.log( "Before opening pane: " + panel.id );
36        jQuery('nav.mm-menu').removeClass('l-navigation');
37      },
38      "openPanel:start": (panel) => {
39        //console.log( "Started opening pane: " + panel.id );
40        //jQuery('nav.mm-menu').removeClass('l-navigation');
41      },
42      "openPanel:finish": (panel) => {
43        //console.log( "Finished opening panel: " + panel.id );
44      }
45    },
46
47    // CORE: Navbar
48    "navbar": {
49      "add": true, // boolen: true / false
50      "title": 'Startseite', // String: XYZ
51      "titleLink": "parent" // String: parent / anchor / none
52    },
53
54    // CORE: slidingSubmenus
55    
56
57    // CORE: Theme
58    "theme": "light", // Possible values: "light", "dark", "white", "blac", "light-contrast", "dark-contrast", "white-contrast" and "black-contrast".
59
60    // ADDON: backButton
61    "backButton": {
62      // back button options
63    },
64    // ADDON: counters
65    "counters": {
66      "add": false
67    },
68    
69
70    // ADDON: iconPanels
71    "iconPanels": {
72      "add": false,
73      "visible": 1
74    },
75
76    // ADDON: navbars
77    "navbars": [{
78      "position": "top",
79      "content": [
80        "<div class='mobile-header'><div class='mobile-header__brand'>" + logoBrandClone + "</div><div class='mobile-header__close'><a id='close-mm' aria-label='Mobiles Menü schliessen' title='Mobiles Menü schliessen' class='close-mm' href='#/'><i class='fal fa-times'></i></a></div>" + homepage + "</div>"
81      ]},
82      {"position": "bottom",
83      "content": [
84        "<div class='mobile-footer'><div class='mobile-funklinks'>" + quicklinks + "</div></div>"
85      ]
86    }
87    ],
88
89    // ADDON: setSelected
90    "setSelected": {
91      "hover": true,
92      "parent": true
93    },
94
95    // ADDON: sectionIndexer
96    "sectionIndexer": {
97      "add": false
98    },
99
100    // ADDON: offCanvas
101    "offCanvas": {
102      "use": true,
103      "position": "right-front",
104    },
105  }, {
106    // === Configuration
107    setSelected: true,
108    clone: true,
109    classNames: {
110      selected: "current", //Change this class to match the default li you want
111      fixedElements: {
112        fixed: "l-header_navigation-row"
113      }
114    },
115
116    language: "de",
117
118    offCanvas: {
119      clone: true,
120      pageNodetype: "div",
121    },
122
123  });
124
125  const api = menu.API;
126
127
128  // Funktion zum Entfernen der display:none Eigenschaft bei der ID navigation
129  function removeDisplayNoneFromNavigation() {
130    // Das Element mit der ID navigation auswählen
131    var navigationElement = document.getElementById('navigation');
132  
133    // Überprüfen, ob das Element existiert und die display:none Eigenschaft hat
134    if (navigationElement && getComputedStyle(navigationElement).display === 'none') {
135        // Entferne die display Eigenschaft
136        navigationElement.style.display = '';
137    }
138  }
139  
140  // Funktion aufrufen
141  removeDisplayNoneFromNavigation();
142
143  // ---------- Zusätzliche Menü-Buttons
144
145  // Find the panel and listview.
146  var panel = document.querySelector(".mb-menu");
147  var listview = document.querySelector(".mm-listview");
148  // console.log(listview);
149
150
151  //var quuicksearchDiv = document.querySelector(".c-quicksearch-mobile").outerHTML;
152
153  // Create the new listitem.
154  //var listitem = document.createElement("li");
155  //console.log(listitem);
156  //listitem.className = "mm-listitem secondlist";
157  //listitem.innerHTML = '<div class="mm-listitem__search">' + quuicksearchDiv + '</div>';
158
159  var listitemImpressum = document.createElement("li");
160  //  var listitemImpressumHref = document.getElementsByClassName(".fl-impressum a").href;
161  listitemImpressum.className = "mm-listitem secondlist child-0";
162  listitemImpressum.innerHTML = '<a class="mm-listitem__text" href="#">Impressum</a>';
163
164  var listitemDatenschutz = document.createElement("li");
165  //console.log(listitemDatenschutz);
166  listitemDatenschutz.className = "mm-listitem secondlist";
167  listitemDatenschutz.innerHTML = '<a class="mm-listitem__text" href="#">Datenschutz</a>';
168
169  var listitemBarrierefreiheit = document.createElement("li");
170  //console.log(listitemBarrierefreiheit);
171  listitemBarrierefreiheit.className = "mm-listitem secondlist";
172  listitemBarrierefreiheit.innerHTML = '<a class="mm-listitem__text" href="#">Barrierefreiheit</a>';
173
174  // Add the listitem to the listview.
175  // listview.append(listitemImpressum);
176  // listview.append(listitemDatenschutz);
177  // listview.append(listitemBarrierefreiheit);
178
179  // ---------- MMenu (Hamburger Close-Funktion in der Navbar)
180  document.querySelector("#close-mm").addEventListener(
181    "click", (evnt) => {
182      evnt.preventDefault();
183      api.close();
184    }
185  );
186
187})