https://changeonsdemenu.lu/wp-content/plugins/lunivers-map/dist/assets/js/theme.js?ver=1688721946

1"use strict";
2var plugin = {
3  gmarkers1: [],
4  searchInput: jQuery("#incentive_search"),
5  resetButton: document.getElementById("reset-btn"),
6  categoriesInput: document.getElementById("incentive_cats"),
7  map: null,
8  infoWindow: null,
9  resultsElement: document.getElementById("results"),
10  init: function () {
11    plugin.googleMap();
12    plugin.selectFilter();
13    plugin.inputFilter();
14    plugin.resetFilter();
15    // plugin.scrollToMap("init");
16    plugin.setRootVars();
17    // plugin.delay(callback, ms);
18  },
19  googleMap: () => {
20    var mapOptions = {
21      center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
22      // zoom: 8, //Not required.
23      mapTypeId: google.maps.MapTypeId.ROADMAP,
24      disableDefaultUI: true,
25      styles: [
26        {
27          featureType: "poi",
28          stylers: [{ visibility: "off" }],
29        },
30        {
31          featureType: "transit",
32          elementType: "labels.icon",
33          stylers: [{ visibility: "off" }],
34        },
35      ],
36    };
37    plugin.infoWindow = new google.maps.InfoWindow();
38    plugin.map = new google.maps.Map(
39      document.getElementById("map-canvas"),
40      mapOptions
41    );
42
43    // Create LatLngBounds object.
44    var latlngbounds = new google.maps.LatLngBounds();
45
46    const parser = new DOMParser();
47    const pinSvgString =
48      '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="96px" height="96px" baseProfile="basic"><circle cx="24" cy="10" r="9" fill="#fc9c9c"/><path fill="#324561" d="M24,47c-0.379,0-0.725-0.214-0.895-0.553C21.729,43.692,21,40.608,21,37.528V19c0-0.553,0.447-1,1-1	s1,0.447,1,1v18.528c0,2.003,0.343,4.008,1,5.901c0.657-1.894,1-3.898,1-5.901V19c0-0.553,0.447-1,1-1s1,0.447,1,1v18.528	c0,3.08-0.729,6.164-2.105,8.919C24.725,46.786,24.379,47,24,47z"/></svg>';
49    const pinSvgElement = parser.parseFromString(
50      pinSvgString,
51      "image/svg+xml"
52    ).documentElement;
53
54    // A marker with a with a URL pointing to a PNG.
55    const beachFlagImg = document.createElement("img");
56
57    beachFlagImg.src =
58      "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
59
60    for (var i = 0; i < markers.length; i++) {
61      var data = markers[i];
62      var myLatlng = new google.maps.LatLng(data.lat, data.lng);
63      var marker = new google.maps.Marker({
64        map: plugin.map,
65        title: data.title,
66        position: myLatlng,
67        content: beachFlagImg,
68        description: data.description,
69        address: data.address,
70        category: data.category,
71        link: data.link,
72      });
73
74      plugin.gmarkers1.push(marker);
75
76      (function (marker, data) {
77        google.maps.event.addListener(marker, "click", function (e) {
78          plugin.infoWindow.setContent(
79            "<div style='max-width:280px;min-height:40px'><p class='mb-2'><strong>" +
80              data.title +
81              "</strong></p><p class='mb-2'>" +
82              data.description +
83              "</p><p class='mb-2'>" +
84              data.address +
85              "</p><p class='mb-0'><a href='" +
86              data.link +
87              "' target='_blank'>En savoir plus</a></p></div>"
88          );
89          plugin.infoWindow.open(plugin.map, marker);
90          plugin.map.panTo(this.getPosition());
91          plugin.map.setZoom(15);
92        });
93      })(marker, data);
94
95      // Extend each marker's position in LatLngBounds object.
96      latlngbounds.extend(marker.position);
97    }
98
99    document.getElementById("count-results").textContent =
100      markers.length + " résultat(s)";
101
102    //Get the boundaries of the Map.
103    var bounds = new google.maps.LatLngBounds();
104
105    //Center map and adjust Zoom based on the position of all markers.
106    plugin.map.setCenter(latlngbounds.getCenter());
107    plugin.map.fitBounds(latlngbounds);
108
109    // $('.card').click(function(event){
110    //     event.cancelBubble=true;
111    //     console.log(event.target);
112    // });
113
114    const alllLink = document.querySelectorAll(".card");
115    alllLink.forEach((e) => {
116      e.addEventListener("click", (event) => {
117        // event.stopPropagation()
118        event.preventDefault();
119        // console.log();
120        google.maps.event.trigger(
121          plugin.gmarkers1[event.target.dataset.id],
122          "click"
123        );
124        plugin.scrollToMap("clic");
125      });
126    });
127  },
128  selectFilter: () => {
129    document
130      .getElementById("incentive_cats")
131      .addEventListener("change", function () {
132        // console.log("You selected: ", this.value);
133
134        var latlngbounds = new google.maps.LatLngBounds();
135        var category = this.value;
136
137        // searchInput.reset();
138        for (var i = 0; i < markers.length; i++) {
139          var marker = plugin.gmarkers1[i];
140          // console.log(marker);
141          // If is same category or category not picked
142          if (marker.category.includes(category) || category.length === 0) {
143            // if (marker.category == category || category.length === 0) {
144            marker.setVisible(true);
145
146            latlngbounds.extend(marker.position);
147          }
148          // Categories don't match
149          else {
150            marker.setVisible(false);
151          }
152        }
153
154        const elements = document.querySelectorAll("[data-category]");

155        Array.from(elements).forEach((element) => {
156          if (
157            element.dataset.category
158              .toLowerCase()
159              .includes(category.toLowerCase())
160          ) {
161            element.classList.add("d-block");
162            element.classList.remove("d-none");
163          } else {
164            element.classList.add("d-none");
165            element.classList.remove("d-block");
166          }
167        });
168
169        document.getElementById("count-results").textContent =
170          document.querySelectorAll(".card.d-block").length + " résultat(s)";
171        document
172          .getElementById("results")
173          .scrollTo({ top: 0, behavior: "smooth" });
174
175        var bounds = new google.maps.LatLngBounds();
176
177        if (plugin.infoWindow) {
178          plugin.infoWindow.close();
179        }
180
181        //Center map and adjust Zoom based on the position of all markers.
182        plugin.map.setCenter(latlngbounds.getCenter());
183        plugin.map.fitBounds(latlngbounds);
184
185        // plugin.scrollToMap("selectFilter");
186      });
187
188    // console.log(countVisibleMarkers(map));
189  },
190  inputFilter: () => {
191    plugin.searchInput.keyup(
192      plugin.delay(function (e) {
193        // console.log("Time elapsed!", this.value);
194        var latlngbounds = new google.maps.LatLngBounds();
195        // categoriesInput.reset();
196
197        for (var i = 0; i < markers.length; i++) {
198          var marker = plugin.gmarkers1[i];
199
200          // If is same category or category not picked
201          if (
202            marker.title.toLowerCase().includes(this.value.toLowerCase()) ||
203            marker.description
204              .toLowerCase()
205              .includes(this.value.toLowerCase()) ||
206            marker.address.toLowerCase().includes(this.value.toLowerCase())
207          ) {
208            console.log(marker.title);
209            // if (marker.category == category || category.length === 0) {
210            marker.setVisible(true);
211            latlngbounds.extend(marker.position);
212          }
213          // Categories don't match
214          else {
215            marker.setVisible(false);
216          }
217        }
218
219        const elements = document.querySelectorAll(
220          "[data-title], [data-description], [data-address]"
221        );
222        Array.from(elements).forEach((element) => {
223          if (
224            (element.dataset.title &&
225              element.dataset.title
226                .toLowerCase()
227                .includes(this.value.toLowerCase())) ||
228            (element.dataset.description &&
229              element.dataset.description
230                .toLowerCase()
231                .includes(this.value.toLowerCase())) ||
232            (element.dataset.address &&
233              element.dataset.address
234                .toLowerCase()
235                .includes(this.value.toLowerCase()))
236          ) {
237            element.classList.add("d-block");
238            element.classList.remove("d-none");
239            console.log(element);
240          } else {
241            element.classList.add("d-none");
242            element.classList.remove("d-block");
243          }
244        });
245
246        document.getElementById("count-results").textContent =
247          document.querySelectorAll(".card.d-block").length + " résultat(s)";
248        document
249          .getElementById("results")
250          .scrollTo({ top: 0, behavior: "smooth" });
251
252        var bounds = new google.maps.LatLngBounds();
253
254        if (plugin.infoWindow) {
255          plugin.infoWindow.close();
256        }
257        //Center map and adjust Zoom based on the position of all markers.
258        plugin.map.setCenter(latlngbounds.getCenter());
259        plugin.map.fitBounds(latlngbounds);
260        // plugin.map.setZoom(15);
261
262        // plugin.scrollToMap("inputFilter");
263      }, 500)
264    );
265  },
266  resetFilter: () => {
267    plugin.resetButton.addEventListener(
268      "click",
269      function (event) {
270        // alert("HOOO");
271        plugin.searchInput.val("");
272        plugin.categoriesInput.selectedIndex = 0;
273
274        var latlngbounds = new google.maps.LatLngBounds();
275
276        for (var i = 0; i < markers.length; i++) {
277          var marker = plugin.gmarkers1[i];
278          marker.setVisible(true);
279          latlngbounds.extend(marker.position);
280        }
281
282        const elements = document.querySelectorAll(
283          "[data-title], [data-description], [data-address]"
284        );

285        Array.from(elements).forEach((element) => {
286          element.classList.add("d-block");
287          element.classList.remove("d-none");
288        });
289
290        document.getElementById("count-results").textContent =
291          markers.length + " résultat(s)";
292
293        //Get the boundaries of the Map.
294        var bounds = new google.maps.LatLngBounds();
295
296        if (plugin.infoWindow) {
297          plugin.infoWindow.close();
298        }
299
300        //Center map and adjust Zoom based on the position of all markers.
301        plugin.map.setCenter(latlngbounds.getCenter());
302        plugin.map.fitBounds(latlngbounds);
303
304        // plugin.scrollToMap("resetFilter");
305        event.preventDefault();
306      },
307      false
308    );
309  },
310  scrollToMap: (from) => {
311    console.log("plugin.scrollToMap(); " + from);
312    var scrollMap = document.getElementById("map-canvas").offsetTop;
313    const nav = document.getElementById("site-header");
314
315    window.scrollTo({ top: scrollMap - nav.offsetHeight, behavior: "smooth" });
316    console.log(scrollMap - nav.offsetHeight);
317  },
318  delay: (callback, ms) => {
319    var timer = 0;
320    return function () {
321      var context = this,
322        args = arguments;
323      clearTimeout(timer);
324      timer = setTimeout(function () {
325        callback.apply(context, args);
326      }, ms || 0);
327    };
328  },
329  setRootVars: () => {
330    // console.log("ho oui!ç!");
331    let vh = window.innerHeight * 0.01;
332    const root = document.documentElement;
333    const nav = document.getElementById("site-header");
334    const herovh =
335      Math.round(
336        (document.documentElement.clientHeight || 0, window.innerHeight || 0) -
337          nav.offsetHeight
338      ) / 100;
339    root.style.setProperty("--herovh", herovh + "px");
340  },
341  /**
342   * Sub Menus
343   * Enables multilevel dropdown
344   */
345};
346
347window.addEventListener(
348  "resize",
349  function () {
350    plugin.setRootVars();
351  },
352  false
353);
354function initMap() {}
355plugin.init();