https://www.dunnedwards.com/wp-content/themes/dunnedwards/assets/js/map-filter.js

1let filterObj = document.getElementById("map-filter");
2let type = filterObj && filterObj.dataset.type ? '&filter_type=' + filterObj.dataset.type : '';
3let storesSource = '/wp/api/stores?detoken=oCZ4xt09MVjKmFZ' + type;
4let filtersSource = '/wp/api/stores/filters?detoken=wBfS5tU9iVoKmgX' + type;
5let mapType = 'find a store';
6
7if (filterObj && filterObj.dataset.type == 'booking') {
8  mapType = 'professional color advisor';
9}
10
11$(function () {
12  var opts = {
13    pageMax: 4,
14    postsDiv: $("#location-details"),
15    paginationDiv: $(".carousel-page-buttons-inner"),
16    dataUrl: storesSource,
17  };
18
19  var storesNumber = 0, 
20      startPage = 0, 
21      endPage = 0;
22
23  $(document).on('click', '.not-empty .button', function(e) {
24    if ($('.not-empty #location').val() == '') {
25      e.preventDefault();
26    }
27  });
28
29
30  $(document).on('click', '.location-search-form button', function(e) {
31    e.preventDefault();
32    if ($('#location-search').val() != '') {
33      var source = storesSource;
34
35      opts.dataUrl = source + '&search=' + $('#location-search').val();
36      $('.button.filter-submit').trigger('click'); 
37    }
38  });
39
40  // By default, get all Stores
41  $(document).ready(function() {
42    opts.dataUrl = storesSource + '&storeType=stores';
43    getStoresList();
44  });
45
46  // Filter start
47  $(document).on('click', '.filter-submit', function(event) {
48    event.preventDefault();
49    
50    var source = storesSource;
51    var filter = {};
52    var key = '';
53    var data = [];
54    var value;
55    var items = 0;
56
57    $('.location-search-filters-item').each(function() {
58      key = $(this).attr('id');
59      data = [];
60
61      $(this).find('li').each(function() {
62        value = $(this).find('input:checked').val();
63
64        if (typeof value !== 'undefined')
65          data.push(value);
66
67        filter[key] = data;
68      })
69    });
70
71    for (key in filter) {
72        if (filter.hasOwnProperty(key)) {
73            value = filter[key];
74
75            // Datalayer: Map Filter
76            if (value != '') {
77              window.dataLayer = window.dataLayer || [];
78              window.dataLayer.push({ 
79                'event': 'ce_mapFilter',
80                'map': mapType,
81                'filterType': key,
82                'filterValue': value
83              }); 
84            }
85
86            if (filter[key] != '') {
87              items++;
88              source += '&' + key + '=' + value + '';
89            }
90        }
91    } 
92
93    if ($('#location-search').val() != '') {
94      source += '&search=' + $('#location-search').val();
95    }
96
97    opts.dataUrl = source;
98    getStoresList();
99    $(".location-search-filter-close, .location-search-filters").removeClass("active");
100  });
101  
102  function showError() {
103    $('.location-details').empty().append('<p class="error-msg">No Stores Found</p>');
104  }
105
106  function loadPosts(posts) {
107    opts.postsDiv.empty();
108    if (posts.length == 0) {
109      showError();
110    } else {
111      posts.each(function () {
112        var source = $("#location-details-compile").html();
113        var template = Handlebars.compile(source);
114
115        var context = {
116          title: this.title,
117          link: this.link,
118          image: this.image,
119          isOpen: this.isOpen,
120          coordinatesLat: this.coordinatesLat,
121          coordinatesLong: this.coordinatesLong,
122          workingHrs: this.workingHrs,
123          _id: this._id,
124          distance: this.distance,
125          isFavorite: this.isFavorite,
126          name: this.name,
127          address: this.address.line1,
128          city: this.city,
129          state: this.state,
130          zipCode: this.zipCode,
131          phone: this.contact.phone,
132          languages: this.languages,
133          services: this.services,
134          number: this.number,
135          storeType: this.storeType,
136          conditionStoreType: this.storeType == 'stores' ? 'stores' : '',
137          directions: directions(this.storeType, this.coordinatesLat, this.coordinatesLong, this.title, this.address.line1),
138          bookAppointment: this.bookAppointment
139        };
140
141        function directions(storeType, lat, long, name, address) {
142          let directionsLink = '';
143          let baseUrl = 'https://www.google.com/maps/search/';
144          let storeName = name.split('-')[0].trim().replace(/\s/g, '+');
145          
146          if (storeType == 'dealers') {
147            directionsLink = baseUrl + storeName + '/@' + lat + ',' + long + ',17z';
148          } else {
149            let storeAddress = address ? '+-+' + address.trim().replace(/\s/g, '+') : '';
150            directionsLink = baseUrl + 'Dunn-Edwards+Paints+-+' + storeName + storeAddress + '/@' + lat + ',' + long + ',17z';
151          }
152          
153          return directionsLink;
154        }
155
156        var html = template(context);
157        opts.postsDiv.append(html);
158      });
159    }
160  }
161
162  function removePaginate() {
163    $(".carousel-page-buttons-inner").empty();
164  }
165
166  function paginate(page, pageCount) {
167    startPage = page * opts.pageMax - opts.pageMax + 1;
168    if (page * opts.pageMax > storesNumber) {
169      endPage = storesNumber;
170    } else {
171      endPage = page * opts.pageMax;
172    }
173    locationSearchResults();
174    
175    var source = $("#pagination-template").html();
176    var template = Handlebars.compile(source);
177    var context = {
178      pages: range(page, pageCount),
179    };
180    var html = template(context);
181    var paginationTag = opts.paginationDiv.parent().find(".carousel-page-buttons-inner ul");
182    paginationTag.length > 0 ? paginationTag.replaceWith(html) : opts.paginationDiv.append(html);
183    var gotoPageNumber = 0;
184
185    function updateShowing() {
186      $('.location-search-results.common-text').addClass('active');
187    }
188
189    function changePage(page) {
190      pageItems.removeClass("active");
191      pageItems.filter('[data-page="' + page + '"]').addClass("active");
192      loadPosts(
193        data.slice(page * opts.pageMax - opts.pageMax, page * opts.pageMax)
194      );
195      paginate(page, pageCount);
196      
197    }
198
199    var pageItems = $(".carousel-page-buttons-inner ul > li.pagination-page");
200    var pageItemsLastPage = $(".carousel-page-buttons-inner ul li").length - 2;
201    pageItems.removeClass("active");
202    pageItems.filter('[data-page="' + page + '"]').addClass("active");
203
204    updateShowing();
205
206    pageItems.on("click", function () {
207      event.preventDefault();
208      getDataPageNo = this.getAttribute("data-page");
209
210      if (!$.isNumeric(getDataPageNo)) getDataPageNo = $(this).prev().data("page") + 1;
211      
212      changePage(getDataPageNo);
213    });
214
215    $(".carousel-page-buttons-inner ul > li.carousel-page-buttons--prev").on(
216      "click",
217      function () {
218        event.preventDefault();
219        gotoPageNumber = parseInt($(".carousel-page-buttons-inner ul > li.active").attr("data-page")) - 1;
220        if (gotoPageNumber < 1) {
221          gotoPageNumber = pageCount;
222        }
223        changePage(gotoPageNumber);
224      }
225    );
226
227    $(".carousel-page-buttons-inner ul > li.carousel-page-buttons--next").on(
228      "click",
229      function () {
230        event.preventDefault();
231        gotoPageNumber = parseInt($(".carousel-page-buttons-inner ul>li.active").attr("data-page")) + 1;
232        if (gotoPageNumber > pageCount) {
233          gotoPageNumber = 1;
234        }
235        changePage(gotoPageNumber);
236      }
237    );
238  }
239
240  function locationSearchResults() {
241    $('.startPage').html(startPage);
242    $('.endPage').html(endPage);
243    $('.storesNumber').html(storesNumber);
244  }
245
246  function clearMap() {
247    var map = new google.maps.Map(document.getElementById('map'), {
248        center: { lat: 39.06015282990803, lng: -101.24465800563617 },
249        zoom: 4
250    });
251  }
252
253
254  function setMapPoints(mapPointData){
255    var map = new google.maps.Map(document.getElementById('map'), {
256        center: { lat: 39.06015282990803, lng: -101.24465800563617 },
257        zoom: 4
258    });
259
260    var marker;
261    var infowindow = new google.maps.InfoWindow();
262
263    var bounds = new google.maps.LatLngBounds();
264
265    if (mapPointData.length > 0) {
266      for (i = 0; i < mapPointData.length; i++) {
267          var contentId = mapPointData[i]._id;
268          var contentLink = mapPointData[i].link;
269          var storeDirections = mapPointData[i].direction;
270          var contentName = mapPointData[i].name;
271          var contentTitle = mapPointData[i].title
272            .replace(/\d{3,}/g, '')  // Remove any occurrence of 3 or more digits

273            .replace(/\s*-\s*/g, '')  // Remove ' - ' (space-hyphen-space)
274            .trim();  // Remove any leading or trailing spaces
275          var contentNumber = mapPointData[i].number;
276          var contentDistance = mapPointData[i].distance;
277          var contentType = mapPointData[i].storeType;
278          var contentIsFavorite = mapPointData[i].isFavorite;
279          var contentAddressLine1 = mapPointData[i].address.line1;
280          var contentCity = mapPointData[i].city;
281          var contentState = mapPointData[i].state;
282          var contentZipCode = mapPointData[i].zipCode;
283          var contentContactPhone = mapPointData[i].contact.phone;
284          var active = '';
285
286          var coords = {
287              lat: Number(mapPointData[i].coordinatesLat),
288              lng: Number(mapPointData[i].coordinatesLong)
289          };
290
291          if (contentIsFavorite) 
292              active = 'active';
293
294          var addToFavoriteLink = '';
295          if (contentType == 'stores') {
296            addToFavoriteLink = '<a href="javascript:;" title="' + contentTitle + '" data-type="' + contentType + '" class="map-favorite-store is-favorite favorite-link ' + active + '" data-key="' + contentNumber + '"></a>';
297          } 
298
299          content = 
300              '<div class="location-details location-details--tooltip">' +
301                '<div class="second-column">' +
302                  '<div class="layout-row justify-content-between location-details--tooltip-head">' +
303                    '<div class="title-block">' +
304                      '<p>' + contentTitle + '</p>' +
305                    '</div>' +
306                    '<div class="layout-row align-items-center distance-block">' +
307                      (contentDistance ? '<p>' + contentDistance + ' miles</p>' : '') +
308                      addToFavoriteLink +
309                    '</div>' +
310                  '</div>' +
311                  '<div class="cta-link mt-1">' +
312                    '<a href="' + contentLink + '" class="link-item link-item--s">' + contentTitle + ' - ' + contentNumber + '</a>' +
313                  '</div>' +
314
315                  '<div class="layout-row layout-column--sm">' +
316                    '<div class="address-block mb-2">' +
317                      '<p>' + contentAddressLine1 + '</p>' +
318                      '<p>' + contentCity + ', ' + contentState + ' ' + contentZipCode + '</p>' +
319                    '</div>' +
320
321                    '<div class="locations-contacts">' +
322                      '<ul>' +
323                        '<li>' +
324                          '<div>' +
325                            '<img src="/wp-content/themes/dunnedwards/assets/img/icons/phone.svg" alt="" width="100%" height="auto">' +
326                          '</div>' +
327                          '<div>' +
328                            '<a href="tel:' + contentContactPhone + '">' + contentContactPhone + '</a>' +
329                          '</div>' +
330                        '</li>' +
331                        '<li>' +
332                          '<div>' +
333                            '<img src="/wp-content/themes/dunnedwards/assets/img/icons/pin.svg" alt="" width="100%" height="auto">' +
334                          '</div>' +
335                          '<div>' +
336                            '<a href="https://www.google.com/maps/search/' + storeDirections + '" target="_blank">Get Directions</a>' +
337                          '</div>' +
338                        '</li>' +
339                      '</ul>' +
340                    '</div>' +
341                  '</div>' +
342                '</div>' +
343              '</div>';
344
345          //var position = new google.maps.LatLng(lat, long);
346          marker = new google.maps.Marker({
347              position: coords,
348              map: map,
349              store_id: contentId,
350              icon: {
351                  // url: "img/core/marker.svg",
352                  url: "/wp-content/themes/dunnedwards/assets/img/core/marker.svg",
353                  scaledSize: new google.maps.Size(24, 24),
354                  size: new google.maps.Size(24, 24),
355              },
356              MarkerLabel: {
357                className: 'single-pin',
358              }
359          });
360
361          markers.push(marker);
362
363          bounds.extend(marker.position);
364
365
366          google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
367              return function () {
368                  map.setZoom(13);
369                  map.panTo(marker.getPosition());
370                  infowindow.setContent(content);
371                  infowindow.open(map, marker);
372              };
373          })(marker, content, infowindow));
374      };
375      map.fitBounds(bounds);
376    } else {
377      var map = new google.maps.Map(document.getElementById('map'), {
378          center: { lat: 39.06015282990803, lng: -101.24465800563617 },
379          zoom: 4
380      }); 
381    }
382  }
383
384  function getStoresList() {
385    $.ajax({
386      dataType: "json",
387      url: opts.dataUrl,
388      success: function (response_json) {
389        data = $(response_json.data);
390        dataCount = data.length;
391        storesNumber = dataCount;
392

393        pageCount = Math.ceil(dataCount / opts.pageMax);
394
395        // Datalayer: Map Search
396        if ( $('#location-search').val() != '' ) {
397          window.dataLayer = window.dataLayer || [];
398          window.dataLayer.push({ 
399            'event': 'ce_mapSearch',
400            'search_term': $('#location-search').val(),
401            'map': mapType,
402            'results': storesNumber
403          }); 
404        }
405
406        if (dataCount > opts.pageMax) {
407          paginate(1, pageCount);
408          posts = data.slice(0, opts.pageMax);
409        } else {
410          posts = data;
411          removePaginate()
412          $('.startPage').html('1');
413          $('.endPage').html(storesNumber);
414          $('.storesNumber').html(storesNumber);
415        }
416
417        setMapPoints(data);
418        loadPosts(posts);
419        
420      },
421      error: function() {
422        showError();
423        clearMap();
424      }
425    });
426  }
427
428  setTimeout(function(){
429    if ( $("#location-search").attr('data-recycling')) {
430      $("#recycling-program").attr('checked', 'checked');
431      $('.button.filter-submit').trigger('click');
432    }
433  }, 1000)
434});
435
436
437$(document).ready(function() {
438
439  // Filters list start
440
441  // var urlFilters = 'data/filters.json';
442  var urlFilters = filtersSource;
443
444  var slingshotFilters = function (url, tplId, anchor) {
445    $.getJSON(urlFilters, function(data) {
446      var template = $(tplId).html();
447      Handlebars.registerHelper('splitTitle', function(title) {
448        return title.split(" - ")[0].split(" #")[0];
449      });
450      Handlebars.registerHelper('moreInfoLabel', function(label) {
451        return "More information about " + label;
452      });
453      var stone = Handlebars.compile(template)(data);
454      $(anchor).append(stone);
455    });
456  }
457    if ($('#location-search-filters-list').length) slingshotFilters(urlFilters, '#location-search-filters-compile', '#location-search-filters-list');
458  // Filters list end
459
460  // Open map marker start
461  $(document).on( 'click', '.details-block', function(e) {
462        var idToFind = $(this).find('.title-block').attr('id');
463        var markerToClick;
464        for(var i = 0; i < markers.length; i++) {
465            if(markers[i].store_id === idToFind) {
466              markerToClick = markers[i];
467            }
468        }
469        new google.maps.event.trigger( markerToClick, 'click' );
470    });  
471  // Open map marker end
472
473  $(document).on('click', '.gm-ui-hover-effect', function() {
474    $('.ui-tooltip').remove()
475  })
476});
477
478
479// Google Map start
480var markers = [];
481// var url_json = 'data/stores.json';
482var url_json = storesSource;
483
484function initMap() {
485    var map = new google.maps.Map(document.getElementById('map'), {
486        center: { lat: 39.06015282990803, lng: -101.24465800563617 },
487        zoom: 4
488    });  
489}
490// Google Map end
491
492
493
494// Pagination start
495function getLastDigit(t) {
496 return parseInt(t.toString().slice(-1))
497}
498
499function getFirstDigits(t) {
500 return parseInt(t.toString().slice(0, -1))
501}
502
503function isMultipleOf5(t) {
504 return [0,5].reduce(function(res, curr) {
505   return res = res || curr === getLastDigit(t);
506 }, false);
507}
508
509function isBetween0and5(t) {
510  const _t = getLastDigit(t);
511  return  _t < 5;
512}
513
514function isBetween5and9(t) {
515  const _t = getLastDigit(t);
516  return function(_t) {5 && _t <= 9};
517}
518
519function appendDigit(t, d) {
520  return parseInt(getFirstDigits(t).toString() + d.toString())
521}
522
523function getLeft(t) {
524  if (t >= 10) {
525    if (isBetween0and5(t)) return appendDigit(t, 0);
526    else return appendDigit(t, 5);
527  } else {
528    if (t < 5) return 0;
529    else return 5;
530  }
531}
532
533function getSecondRightMostDigit(t) {
534  return parseInt(t.toString().slice(-2, -1))
535}
536
537function incrementSecondDigit(t) {
538  return t + 10;
539}
540
541function getRight(t) {
542  if (t < 5) return 5;
543  else if (t < 10) return 10;
544  else if (isBetween0and5(t)) return appendDigit(t, 5)
545  else return appendDigit(incrementSecondDigit(t), 0);
546}
547
548function range(c, m) {
549  c = parseInt(c);
550  var current = c || 1,
551      last = m,
552      delta = 2,
553      left = getLeft(c),
554      right = getRight(c),
555      range = [],
556      rangeWithEllipsis = [],
557      l,
558      t;
559
560      var rightBoundary = right < 5 ? 5 : right;
561      for (var i = left; i < rightBoundary; ++i) {
562        if (i < m && i > 0) range.push(i);
563      }  
564      range.push(m);
565
566      for (var i = 0; i < range.length; i++) {
567        if (l) {
568          if (range[i] - l === 2) {
569            t = l + 1;
570            rangeWithEllipsis.push(t);
571          } else if (range[i] - l !== 1) {
572            rangeWithEllipsis.push("...");
573          }
574        }
575        rangeWithEllipsis.push(range[i]);
576        l = range[i];
577      }
578    return rangeWithEllipsis;
579}
580// Pagination end