https://www.stadt-waldkirch.de/site/Waldkirch/resourceCached/26a/js/mobilemenu.js

1
2// ############################################################
3//  MMenu (Main)
4// ############################################################
5
6document.addEventListener("DOMContentLoaded", () => {
7
8  // Logo
9  var logoBrand = document.querySelector(".navLogo img");
10  var logoBrandClone = logoBrand.cloneNode(true).outerHTML;
11
12  // Quicksearch (muss doppelt vorhanden sein, sonst gleiche ID)
13  // var quuicksearchDiv = document.querySelector(".c-quicksearch-mobile").outerHTML;
14
15  // Quicklinks
16  // var quicklinksInfo = document.querySelector(".l-header__quicklinks-func .qf-info a").href;
17  // var quicklinksFacebook= document.querySelector(".l-header__quicklinks-func .qf-facebook a").href;
18  // var quicklinksInstagram = document.querySelector(".l-header__quicklinks-func .qf-instagram a").href;
19
20  //  jQuery("#fusszeilennavigation").appendTo( $("#menu") );
21
22  const menu = new Mmenu("#mobile-menu", {
23    navbar: {
24      title: 'Menü',
25    },
26
27    // counters: true,
28    language: "de",
29
30    keyboardNavigation: {
31      enable: true,
32      enhance: true
33    },
34    "setSelected": {
35      "hover": true,
36      "parent": true
37
38    },
39
40    // options
41    "navbars": [{
42      "position": "top",
43      "content": [
44        "<div class='mobile-header__brand'></div'>" + logoBrandClone + "<div class='mobile-header__close'><a id='close-mm' aria-label='Mobiles Menü schliessen' title='Mobiles Menü schliessen' class='close-mm' href='#/'><i class='fa fa-times'></i></a></div>"
45      ]
46    },
47    // ,
48    //  {
49    //    "position": "top",
50    //  "type": "tabs",
51    //  "content": [
52    //    "<div class='mobile-header__search'>"+quuicksearchDiv +"</div>"
53    //  ]
54    //  },
55    {
56      "position": "bottom",
57      //  "type": "tabs",
58      "content": [
59        //"<div class='mobile-footer'><a href='" + quicklinksInfo + "/'><i class='fal fa-info'></i></a><a href='" + quicklinksFacebook + "/'><i class='fab fa-facebook-f'></i></a><a href='" + quicklinksInstagram + "/'><i class='fab fa-instagram'></i></a></div>"
60      ]
61    }
62    ],
63
64    // "iconbar": {
65    //   "use": true,
66    //   "top": [
67    //     "<a href='" + quicklinksInfo + "/'><i class='fal fa-info'></i></a>",
68    //     "<a href='" + quicklinksFacebook + "/'><i class='fab fa-facebook-f'></i></a>",
69    //     "<a href='" + quicklinksWebcam + "/'><i class='fal fa-webcam'></i></a>",
70    //     "<a href='" + quicklinksLeichteSprache + "/'><i class='fal fa-book-reader'></i></a>",
71    //     "<a href='" + quicklinksGebeardensprache + "/'><i class='fal fa-sign-language'></i></a>",
72    //     "<a href='" + quicklinksAchtung + "/'><i class='fal fa-exclamation-triangle'></i></a>",
73    //     "<a href='" + quicklinksInstagram + "/'><i class='fab fa-instagram'></i></a>"
74    //   ]
75    // },
76
77    // Extensions
78    extensions: {
79      "all": ["multiline", "border-full", "fx-menu-slide", "fx-panels-slide-80", "pagedim-black", "position-backs", "position-left", "shadow-page"],
80      "(max-width: 476px)": ["xxfullscreen"]
81    },
82
83    // Iconbar
84    //   "iconbar": {
85    //     "use": true,
86    //     "type": 'tabs',
87    //     "top": [
88    //        //"<a href="+quicklinksBekanntmachungen+"><i class='fa fa-home'></i></a>",
89    //        "<a href='#/'><i class='fa fa-user'></i></a>",
90    //        "<a href='#/'><i class='fa fa-user'></i></a>",
91    //        "<a href='#/'><i class='fa fa-user'></i></a>",
92    //        "<a href='#/'><i class='fa fa-user'></i></a>",
93    //        "<a href='#/'><i class='fa fa-user'></i></a>",
94    //        "<a href='#/'><i class='fa fa-user'></i></a>"
95    //     ],
96    //     "bottom": [
97    //       quicklinksFuncTextgroesseClone,
98    //       quicklinksFuncKontrastClone,
99    //        "<a href='#/'><i class='fa fa-linkedin'></i></a>"
100    //     ]
101    //  },
102
103    // Hooks
104    hooks: {
105      "openPanel:before": (panel) => {
106        //   console.log( "Before opening pane: " + panel.id );
107        jQuery('nav.mm-menu').removeClass('l-navigation');
108
109      },
110      "openPanel:start": (panel) => {
111        //   console.log( "Started opening pane: " + panel.id );
112        //jQuery('nav.mm-menu').removeClass('l-navigation');
113      },
114      "openPanel:finish": (panel) => {
115        //   console.log( "Finished opening panel: " + panel.id );
116      }
117    },
118
119  }, {
120    // Configuration
121    setSelected: true,
122    clone: true,
123    classNames: {
124      selected: "current", //Change this class to match the default li you want
125      fixedElements: {
126        fixed: "fixed-header_navigation-row"
127      }
128    },
129

130    keyboardNavigation: {
131      enable: true,
132      enhance: true
133    },
134
135    offCanvas: {
136      clone: false,
137      pageNodetype: "body",
138    },
139
140  });
141
142  const api = menu.API;
143
144  // API global verfügbar machen
145  window.mmenuAPI = menu.API;
146
147  
148    const burger = document.querySelector("m-burger");
149
150    // Tastatur-Event hinzufügen
151    burger.addEventListener("keydown", (event) => {
152      if (event.key === "Enter" || event.keyCode === 13) {
153        api.open(); // Menü öffnen
154      }
155    });
156
157  // ---------- MMenu (Hamburger Clickfunktion)
158  /* document.querySelector("#mobile-nav-button").addEventListener(
159     "click", (evnt) => {
160       evnt.preventDefault();
161       api.open();
162     }
163   ); */
164  document.querySelector("#close-mm").addEventListener(
165    "click", (evnt) => {
166      evnt.preventDefault();
167      api.close();
168    }
169  );
170
171  // ---------- Zusätzliche Menü-Buttons
172
173  // Find the panel and listview.
174  var panel = document.querySelector(".mb-menu");
175  var listview = document.querySelector(".mm-listview");
176  // console.log(listview);
177
178  //var quuicksearchDiv = document.querySelector(".c-quicksearch-mobile").outerHTML;
179
180  // Create the new listitem.
181  //var listitem = document.createElement("li");
182  //console.log(listitem);
183  //listitem.className = "mm-listitem secondlist";
184  //listitem.innerHTML = '<div class="mm-listitem__search">' + quuicksearchDiv + '</div>';
185
186  // Create the new listitem.
187  //var listitem = document.createElement("li");
188  //console.log(listitem);
189  //listitem.className = "mm-listitem secondlist";
190  //listitem.innerHTML = '<a class="mm-listitem__text" href="/impressum">Impressum</a>';
191
192  var listitemImpressum = document.createElement("li");
193  //  var listitemImpressumHref = document.getElementsByClassName(".fl-impressum a").href;
194  listitemImpressum.className = "mm-listitem secondlist secondlist-first";
195  //listitemImpressum.innerHTML = '<a class="mm-listitem__text" href="#">Impressum</a>';
196
197  var listitemDatenschutz = document.createElement("li");
198  //console.log(listitemDatenschutz);
199  listitemDatenschutz.className = "mm-listitem secondlist";
200  //listitemDatenschutz.innerHTML = '<a class="mm-listitem__text" href="#">Datenschutz</a>';
201
202  var listitemBarrierefreiheit = document.createElement("li");
203  //console.log(listitemBarrierefreiheit);
204  listitemBarrierefreiheit.className = "mm-listitem secondlist";
205  //listitemBarrierefreiheit.innerHTML = '<a class="mm-listitem__text" href="#">Barrierefreiheit</a>';
206
207  // Add the listitem to the listview.
208  // listview.append(listitem);
209  listview.append(listitemImpressum);
210  listview.append(listitemDatenschutz);
211  listview.append(listitemBarrierefreiheit);
212
213  // Update the listview.
214  api.initListview(listview);
215
216})
217
218
219
220