1class UeGoogleMapWidget { 2 constructor(options) { 3 4 try{ 5 6 7 this.dom = options.dom; 8 this.assetsURL = options.assetsURL; 9 this.geocoder = new google.maps.Geocoder(); 10 this.mapType = options.mapType; 11 this.mapOptions = options.mapOptions; 12 this.mapControls = options.mapControls; 13 this.markers = options.markers; 14 this.infoWindowOptions = options.infoWindowOptions; 15 this.infoWindowContent = options.infoWindowContent; 16 this.finderTool = options.finderTool; 17 this.defaultMarker = options.defaultMarker; 18 this.options = options; 19 this.markersObjects = []; 20 this.clustering = options.clustering; 21 this.navigation = options.navigation; 22 this.places = []; 23 this.finderLocalStorage = { 24 latitude: '', 25 longitude: '', 26 address: '', 27 notes: '', 28 zoom: '' 29 } 30 this.errorOverlay = options.errorOverlay 31 this.loader = options.loader 32 this.breakpoint = options.breakpoint 33 this.container = options.container 34 this.isEditMode = options.isEditMode 35 this.isRefreshed = options.isRefreshed 36 37 if ( this.finderTool.show ) { 38 39 if (this.navigation && this.navigation.placesWrapper) { 40 this.navigation.placesWrapper.style.opacity = 1 41 } 42 } 43 44 switch (options.mapStyleCategory) { 45 case 'custom': 46 this.mapStyle = options.mapStyle; 47 this.init() 48 break; 49 case 'google': 50 if (options.mapStyle) { 51 this.setStyle(options.mapStyle) 52 } else { 53 this.mapStyle = options.mapStyle; 54 this.init() 55 } 56 break; 57 default: 58 this.mapStyle = options.mapStyle; 59 this.init() 60 break; 61 } 62 63 }catch(error){ 64 65 this.showErrorMessage(error); 66 } 67 68 } 69 70 /** 71 * console.log some string 72 */ 73 trace(){ 74 75 console.log(str); 76 } 77 78 /** 79 * set map style 80 */ 81 showErrorMessage(message){ 82 83 console.log(message); 84 85 var objWrapper = jQuery(this.dom); 86 var objParent = objWrapper.parents(".ue-google-map"); 87 88 var objError = objParent.find(".uc-map-error-message"); 89 90 if(objError.length == 0){ 91 objParent.append("<div class='uc-map-error-message'></div>"); 92 var objError = objParent.find(".uc-map-error-message"); 93 } 94 95 if(typeof message != "string") 96 message = message.toString(); 97 98 objError.html(message); 99 100 } 101 102 103 /** 104 * set map style 105 */ 106 setStyle(){ 107 fetch(options.mapStyle) 108 .then((response) => { 109 return response.json(); 110 }) 111 .then((data) => { 112 this.mapStyle = data 113 this.init() 114 }) 115 .catch((err) => { 116 console.log("Unable to fetch map style!", err); 117 }); 118 } 119 120 121 /* 122 ** Init 123 */ 124 init(){ 125 126 if(this.isRefreshed) { 127 128 this.mapOptions.center.lat = parseFloat(this.markers[0].marker_latitude) 129 this.mapOptions.center.lng = parseFloat(this.markers[0].marker_longitude) 130 } 131 132 if (!this.mapOptions.center.lat || !this.mapOptions.center.lng ) { 133 134 this.geocodeAddress(this.mapOptions.address, (location) => { 135 this.mapOptions.center.lat = location.position.lat(); 136 this.mapOptions.center.lng = location.position.lng(); 137 this.createMap(); 138 //this.initOptionals(); 139 }); 140 141 } else { 142 this.createMap(); 143 //this.initOptionals(); 144 } 145 146 if (this.navigation && this.navigation.showPlaces) { 147 this.initPlacesNavigation(); 148 } 149 150 this.initEvents() 151 } 152 153 initOptionals(){ 154 155 try{ 156 157 if (this.clustering.show) { 158 this.initMarkerClusters() 159 } 160 161 if (this.finderTool.show ) { 162 163 if ( this.isEditMode ) { 164 165 this.getFinderToolLocalStorage(); 166 167 if (this.finderLocalStorage.latitude) { 168 this.updateFinderToolFields(this.finderLocalStorage.latitude, this.finderLocalStorage.longitude, this.finderLocalStorage.address, this.finderLocalStorage.notes, this.finderLocalStorage.zoom); 169 this.setDebugMarker( parseFloat(this.finderLocalStorage.latitude), parseFloat(this.finderLocalStorage.longitude) ); 170 this.map.setCenter({ lat: parseFloat(this.finderLocalStorage.latitude), lng: parseFloat(this.finderLocalStorage.longitude) }); 171 this.map.setZoom(parseInt(this.finderLocalStorage.zoom, 10)) 172 } else { 173 this.finderTool.zoomEl.value = this.mapOptions.zoom 174 } 175 } 176 177 this.updateFinderToolCurrentLocationFields() 178 this.initFinderToolEvents(); 179 } 180 181 182 }catch(error){ 183 this.showErrorMessage(error); 184 } 185 186 } 187 188 /* 189 ** Geocode Address 190 */ 191 geocodeAddress(address, callback){ 192 this.geocoder.geocode({ 'address': address }, (results, status) => { 193 if (status == 'OK') { 194 const location = { 195 position: results[0].geometry.location, 196 address 197 } 198 callback(location); 199 } else { 200 this.errorOverlay.geocodedValueEl.textContent = address; 201 this.errorOverlay.statusEl.textContent = status; 202 this.errorOverlay.wrapper.style.display = 'flex'; 203 this.errorOverlay.closeButton.addEventListener('click', (e) => { 204 e.preventDefault() 205 this.errorOverlay.wrapper.style.display = 'none' 206 }) 207 } 208 209 }); 210 211 } 212 213
214 /* 215 ** Geocode position 216 */ 217 geocodePosition(position, callback){ 218 this.geocoder.geocode({ latLng: position }, (results, status) => { 219 if (status == 'OK') { 220 const location = { 221 position: results[0].geometry.location, 222 address: results[0].formatted_address 223 } 224 callback(location); 225 } else { 226 this.errorOverlay.geocodedValueEl.textContent = position; 227 this.errorOverlay.statusEl.textContent = status; 228 this.errorOverlay.wrapper.style.display = 'flex'; 229 this.errorOverlay.closeButton.addEventListener('click', (e) => { 230 e.preventDefault() 231 this.errorOverlay.wrapper.style.display = 'none' 232 }) 233 } 234 }); 235 } 236 237 /* 238 ** Create Map 239 */ 240 createMap(){ 241 242 try{ 243 var mapZoom = this.mapOptions.zoom; 244 245 if(!mapZoom){ 246 throw new Error("Please set initial map zoom"); 247 } 248 249 if (this.mapControls.mapTypeControlOptions.style === 'dropdown') { 250 this.mapControls.mapTypeControlOptions.style = google.maps.MapTypeControlStyle.DROPDOWN_MENU; 251 } else { 252 this.mapControls.mapTypeControlOptions.style = google.maps.MapTypeControlStyle.HORIZONTAL_BAR; 253 } 254 255 var mapOptions = { 256 zoom: mapZoom, 257 center: this.mapOptions.center, 258 zoomControl: this.mapControls.zoomControl, 259 mapTypeControl: this.mapControls.mapTypeControl, 260 mapTypeControlOptions: this.mapControls.mapTypeControlOptions, 261 mapTypeId: this.mapType, 262 scaleControl: this.mapControls.scaleControl, 263 streetViewControl: this.mapControls.streetViewControl, 264 rotateControl: this.mapControls.rotateControl, 265 fullscreenControl: this.mapControls.fullscreenControl, 266 styles: this.mapStyle, 267 scrollwheel: this.mapControls.scrollwheel, 268 tilt: 45, 269 }; 270 271 272 this.map = new google.maps.Map(this.dom, mapOptions); 273 274 275 google.maps.event.addListenerOnce(this.map, 'tilesloaded', () => { 276 277 this.initOptionals(); 278 this.resizeMap() 279 this.loader.style.transform = 'scaleX(0)'; 280 281 }); 282 283 this.initMarkers() 284 285 286 287 if ( this.infoWindowOptions.openByDefault) { 288 const item = this.places.find( ( { item_type } ) => item_type == 'place') 289 new google.maps.event.trigger(item.marker, 'click'); 290 this.map.setZoom(parseInt(item.zoom), 10); 291 } 292 293 294 }catch(error){ 295 296 this.showErrorMessage(error); 297 298 } 299 300 } 301 302 /** 303 * init all markers 304 */ 305 initMarkers(){ 306 307 this.markers.forEach((marker, index) => { 308 309 try{ 310 311 this.addMarker(marker, index); 312 313 }catch(Error){ 314 this.showErrorMessage(Error); 315 } 316 317 }); 318 } 319 320 setMarkerIcon(marker){ 321 322 switch (marker.icon_type) { 323 default: 324 case 'default': { 325 326 return this.setMarkerIcon(this.defaultMarker); 327 } 328 329 case 'from_list': { 330 return this.constructMarkerListIconUrl(marker); 331 } 332 333 case 'custom_image': { 334 return marker.marker_custom_icon; 335 } 336 337 case 'ue_svg': { 338 return this.assetsURL + marker.ue_svg_marker; 339 } 340 } 341 342 } 343 344 constructMarkerListIconUrl(marker){ 345 346 const urlBase = "https://maps.gstatic.com/mapfiles/"; 347 348 349 switch (marker.marker_list_icon) { 350 351 case "red_with_letter": 352 353 return `${urlBase}marker${marker.icon_letter}.png`; 354 355 case "green_with_letter": 356 357 return `${urlBase}markers/marker_green${marker.icon_letter}.png`; 358 359 case "circle_with_letter": 360 361 return `${urlBase}circle${marker.icon_letter}.png`; 362 363 case "yellow_with_letter": 364 365 return `${urlBase}markers/marker_yellow${marker.icon_letter}.png`; 366 367 default: 368 369 return `${urlBase + marker.marker_list_icon}.png`; 370 371 } 372 } 373 374 375 /** 376 * add marker 377 */ 378 addMarker(marker, index){ 379 380 marker.item_index = index + 1 381 var markerTitle = marker.title; 382 383 //set marker position 384 385 var isCategory = (marker.item_type == 'category'); 386 var error; 387 388 if (marker.coordinates_type == 'map_center') { 389 var position = this.mapOptions.center; 390 }else{ 391 392 var markerLat = parseFloat(marker.marker_latitude); 393 var markerLong = parseFloat(marker.marker_longitude); 394 395 if(isNaN(markerLat)){ 396 error = "Missing longitude in "+markerTitle+" marker"; 397 } 398 399 if(isNaN(markerLong)){ 400 error = "Missing longitude in "+markerTitle+" marker"; 401 } 402
403 var position = { lat: markerLat, lng: markerLong }; 404 } 405 406 if(error && isCategory == false) 407 throw new Error(error); 408 409 if(error && isCategory == true) 410 return(false); 411 412 let markerOptions = { 413 position: position, 414 map: this.map, 415 title: markerTitle 416 } 417 418 if (this.defaultMarker.animate_marker) { 419 markerOptions.animation = google.maps.Animation.DROP 420 } 421 422 423 if ( marker.item_type == 'place' ) { 424 const iconURL = this.setMarkerIcon(marker); 425 426 if (iconURL) { 427 let icon = { 428 url: iconURL, 429 origin: new google.maps.Point(0, 0), 430 } 431 432 markerOptions.icon = icon 433 434 const iconWidth = parseInt(this.defaultMarker.marker_width_nounit, 10) 435 const iconHeight = parseInt(this.defaultMarker.marker_height_nounit, 10) 436 437 if ((marker.icon_type == 'custom_image' || marker.icon_type == 'ue_svg') || (marker.icon_type == 'default' && this.defaultMarker.icon_type == 'custom_image' || this.defaultMarker.icon_type == 'ue_svg')) { 438 icon.scaledSize = new google.maps.Size(iconWidth, iconHeight) 439 } else if ((this.defaultMarker.icon_type == 'from_list' && this.defaultMarker.default_marker_icon == 'default') || (marker.icon_type == 'from_list' && marker.marker_list_icon == 'default')) { 440 icon.scaledSize = new google.maps.Size(19, 25) 441 } 442 443 } 444 } 445 446 if (marker.item_type == 'category') { 447 markerOptions.visible = false 448 markerOptions.opacity = 0 449 } 450 451 const lclMarker = new google.maps.Marker(markerOptions); 452 453 454 if ( marker.item_type == 'place' ) { 455 /* set Info Window */ 456 457 this.setMarkerInfoWindow(lclMarker, index); 458 459 this.markersObjects.push(lclMarker); 460 } 461 462 463 /* set Navigator data */ 464 const place = { 465 item_index: marker.item_index, 466 category_index: marker.category_index, 467 marker: lclMarker, 468 zoom: marker.zoom_level, 469 item_type: marker.item_type 470 } 471 472 this.places.push(place); 473 474 } 475 476 /* 477 ** set marker info window 478 */ 479 setMarkerInfoWindow(lclMarker, index){ 480 481 //set onclick event 482 lclMarker.addListener('click', () => { 483 484 const infoWindow = new google.maps.InfoWindow({ 485 content: this.infoWindowContent[index], 486 maxWidth: this.infoWindowOptions.maxWidth, 487 maxHeight: this.infoWindowOptions.maxHeight, 488 position: lclMarker.getPosition() 489 }); 490 491 if (this.openedInfoWindow) { this.openedInfoWindow.close(); } 492 493 if (this.infoWindowOptions.showInfoWindow == false) 494 this.map.setCenter(lclMarker.position) 495 496 if (this.infoWindowOptions.showInfoWindow == true){ 497 infoWindow.open({ 498 anchor: lclMarker, 499 map: this.map 500 }); 501 } 502 503 if (this.infoWindowOptions.centerInfoWindow) { this.map.setCenter(lclMarker.position) } 504 505 this.openedInfoWindow = infoWindow; 506 507 if(this.navigation){ 508 this.navigation.places.forEach((element) => { 509 510 511 if ( element.getAttribute('data-item_index') != index + 1) { 512 element.classList.remove('ue_active') 513 } 514 if (element.getAttribute('data-item_index') == index + 1) { 515 element.classList.add('ue_active') 516 } 517 }) 518 } 519 }); 520 } 521 522 523 /* 524 ** copy to clipboard 525 */ 526 copyToClipboard(el){ 527 el.select(); 528 document.execCommand("copy"); 529 } 530 531 updateFinderToolFields(latitude, longitude, address, notes, zoom) { 532 this.finderTool.latitudeEl.value = latitude; 533 this.finderTool.longitudeEl.value = longitude; 534 this.finderTool.addressEl.value = address; 535 this.finderTool.notesEl.value = notes; 536 this.finderTool.zoomEl.value = zoom; 537 538 if ( this.isEditMode ) { 539 this.updateFinderToolLocalStorage({ 540 latitude, 541 longitude, 542 address, 543 notes, 544 zoom 545 }); 546 } 547 548 } 549 550 /* 551 ** set the debug marker 552 */ 553 setDebugMarker(lat, lng){ 554 555 if (this.debugMarker) this.debugMarker.setMap(null); 556 this.debugMarker = new google.maps.Marker({ 557 map: this.map, 558 size: new google.maps.Size(30, 30), 559 draggable: true, 560 position: { lat, lng }, 561 icon: this.finderTool.debugMarkerIcon 562 }); 563 564 google.maps.event.addListener(this.debugMarker, 'dragend', () => { 565 this.geocodePosition(this.debugMarker.getPosition(), (location) => { 566 this.updateFinderToolFields(location.position.lat(), location.position.lng(), location.address, this.finderTool.notesEl.value, this.finderTool.zoomEl.value); 567 this.map.setCenter(location.position) 568 }); 569 }); 570 571 // set toggle events 572 this.finderTool.markerToggleEl.addEventListener('click', e => { 573 574 if( this.finderTool.markerToggleEl.classList.contains('uc_active') ) { 575 this.finderTool.markerToggleEl.classList.remove('uc_active') 576 this.debugMarker.setVisible(true) 577 } else { 578 this.finderTool.markerToggleEl.classList.add('uc_active') 579 this.debugMarker.setVisible(false) 580 } 581 }) 582 } 583 584 onFinderToolAddressSearch(address, notes, zoom){ 585 this.geocodeAddress(address, (location) => { 586 this.updateFinderToolFields(location.position.lat(), location.position.lng(), location.address, notes, zoom); 587 this.setDebugMarker(location.position.lat(), location.position.lng()); 588 this.map.setCenter(location.position); 589 }); 590 } 591 592 onFinderToolPositionSearch(position, notes, zoom){ 593 this.geocodePosition(position, (location) => { 594 595 this.updateFinderToolFields(location.position.lat(), location.position.lng(), location.address, notes, zoom); 596 this.setDebugMarker(location.position.lat(), location.position.lng()); 597 this.map.setCenter(location.position); 598 }); 599 } 600 601 initFinderToolEvents(){ 602 603 this.finderTool.copyIcons.forEach((copyIcon) => { 604 605 copyIcon.addEventListener('click', (e) => { 606 switch (e.target.getAttribute('data-copy')) { 607 case 'latitude': 608 this.copyToClipboard(this.finderTool.latitudeEl); 609 break; 610 case 'longitude': 611 this.copyToClipboard(this.finderTool.longitudeEl); 612 break; 613 case 'adrress': 614 this.copyToClipboard(this.finderTool.addressEl); 615 break; 616 case 'current-latitude': 617 this.copyToClipboard(this.finderTool.currentLatitudeEl); 618 break; 619 case 'current-longitude': 620 this.copyToClipboard(this.finderTool.currentLongitudeEl); 621 break; 622 default: 623 break; 624 } 625 }); 626 627 }); 628 629 this.finderTool.addressBtnEl.addEventListener('click', (e) => { 630 631 this.onFinderToolAddressSearch(this.finderTool.addressEl.value, this.finderTool.notesEl.value, this.finderTool.zoomEl.value); 632 633 }); 634 635 this.finderTool.addressBtnEl.addEventListener('keyup', (e) => { 636 637 if (e.key == 'Enter') { 638 this.onFinderToolAddressSearch(this.finderTool.addressEl.value, this.finderTool.notesEl.value, this.finderTool.zoomEl.value); 639 } 640 641 }); 642 643 this.finderTool.addressEl.addEventListener('keyup', (e) => { 644 if (e.key == 'Enter') { 645 this.onFinderToolAddressSearch(this.finderTool.addressEl.value, this.finderTool.notesEl.value, this.finderTool.zoomEl.value); 646 } 647 }); 648 649 this.finderTool.geocodeCoordinatesIcon.addEventListener('click', (e) => { 650 this.onFinderToolPositionSearch({ 651 lat: parseFloat(this.finderTool.latitudeEl.value), 652 lng: parseFloat(this.finderTool.longitudeEl.value) 653 }, 654 this.finderTool.notesEl.value, 655 this.finderTool.zoomEl.value) 656 }); 657 658 this.finderTool.notesEl.addEventListener('keyup', (e) => { 659 this.updateFinderToolFields( 660 this.finderTool.latitudeEl.value, 661 this.finderTool.longitudeEl.value, 662 this.finderTool.addressEl.value, 663 e.target.value, 664 this.finderTool.zoomEl.value, 665 ) 666 }) 667 668 this.finderTool.zoomEl.addEventListener('change', (e) => { 669 this.map.setZoom(parseInt(e.target.value, 10)) 670 671 this.updateFinderToolFields( 672 this.finderTool.latitudeEl.value, 673 this.finderTool.longitudeEl.value, 674 this.finderTool.addressEl.value, 675 this.finderTool.notesEl.value, 676 e.target.value 677 ) 678 }) 679 680 this.finderTool.currentWrapperToggle.addEventListener('click', () => { 681 var toggleElem = this.finderTool.currentWrapperToggle; 682 683 if(toggleElem.classList.contains("ue-clicked") == true) 684 return(false) 685 686 if ( this.finderTool.currentWrapper.style.display != 'flex' ) { 687 this.finderTool.currentWrapper.style.display = 'flex' 688 //this.updateWrappersHeight() 689 } else { 690 this.finderTool.currentWrapper.style.display = 'none' 691 //this.updateWrappersHeight() 692 } 693 toggleElem.classList.add("ue-clicked") 694 695 setTimeout(function(){ 696 toggleElem.classList.remove("ue-clicked") 697 },500) 698 }) 699 700 this.map.addListener("center_changed", () => { 701 this.updateFinderToolCurrentLocationFields() 702 }) 703 704 this.map.addListener("zoom_changed", () => { 705 706 this.updateFinderToolCurrentLocationFields(); 707 708 }) 709 710 } 711 712 updateFinderToolCurrentLocationFields(){ 713 714 const center = this.map.getCenter(); 715 this.finderTool.currentLatitudeEl.value = center.lat() 716 this.finderTool.currentLongitudeEl.value = center.lng() 717 718 var currentZoom = this.map.getZoom(); 719 720 if(!currentZoom) 721 currentZoom = this.mapOptions.zoom; 722 723 this.finderTool.zoomEl.value = currentZoom; 724 725 } 726 727 initMarkerClusters(){ 728 729 this.markerCluster = new MarkerClusterer(this.map, this.markersObjects, 730 { 731 imagePath: `${this.clustering.imagesPath}/m`, 732 ignoreHidden: true, 733 gridSize: this.clustering.gridSize, 734 maxZoom: this.clustering.maxZoom 735 } 736 ); 737 738 } 739 740 initPlacesNavigation(){ 741 742 if ( this.navigation.showSearch) { 743 this.initSearchPlacesEvent() 744 } 745 746 if ( this.navigation.showReset ) { 747 this.navigation.resetButton.addEventListener('click', () => { 748 this.map.setZoom(parseInt(this.mapOptions.zoom, 10)) 749 this.map.setCenter({lat: parseFloat(this.mapOptions.center.lat), lng: parseFloat(this.mapOptions.center.lng)}) 750 }) 751 } 752 753 if ( this.navigation.showPlaces) {
754 this.navigation.places.forEach((place) => { 755 this.initPlacesEvents(place) 756 }) 757 } 758 759 // this.initShowPlacesToggle() 760 761 762 } 763 764 removePlacesToggleHandler() { 765 if(!this.navigation) 766 return(false); 767 768 if(!this.navigation.placesToggle) 769 return(false); 770 771 this.navigation.placesToggle.removeEventListener('click', this.togglePlacesHandler) 772 } 773 774 initShowPlacesToggle(){ 775 if(!this.navigation) 776 return(false); 777 778 if(!this.navigation.placesToggle) 779 return(false); 780 781 const toggleDisplay = window.getComputedStyle(this.navigation.placesToggle).getPropertyValue('display') 782 783 if ( this.isRefreshed || toggleDisplay == 'flex' ) { 784 this.togglePlacesHandler = this.togglePlacesWrapper.bind(this) 785 786 this.removePlacesToggleHandler() ; 787 this.navigation.placesToggle.addEventListener('click', this.togglePlacesHandler) 788 789 } 790 } 791 792 togglePlacesWrapper(){ 793 794 if ( window.innerWidth <= this.breakpoint ) { 795 796 if (this.navigation && this.navigation.placesWrapper && this.navigation.placesWrapper.classList.contains('uc_active') ) { 797 this.navigation.placesWrapper.classList.remove('uc_active'); 798 this.navigation.placesToggle.classList.remove('uc_active'); 799 const closeText = this.navigation.placesToggle.getAttribute('data-open-text'); 800 this.navigation.placesToggleText.textContent = closeText; 801 } else { 802 this.navigation.placesWrapper.classList.add('uc_active'); 803 this.navigation.placesToggle.classList.add('uc_active'); 804 const openText = this.navigation.placesToggle.getAttribute('data-close-text'); 805 this.navigation.placesToggleText.textContent = openText; 806 } 807 } 808 809 } 810 811 resizeMap() { 812 813 if ( window.innerWidth <= this.breakpoint && this.navigation.showPlaces) { 814 const parentHeight = this.dom.parentNode.getBoundingClientRect().height 815 const mapHeight = this.dom.getBoundingClientRect().height 816 const toggleHeight = this.navigation.placesToggle.getBoundingClientRect().height 817 const togglePosition = this.navigation.placesToggle.getAttribute('data-pos'); 818 if ( mapHeight == parentHeight ) { 819 this.dom.style.height = `${mapHeight-toggleHeight}px` 820 if(togglePosition == "top") 821 this.dom.style.marginTop = "auto" 822 } 823 } else { 824 this.dom.style.height = '100%' 825 } 826 } 827 828 initSearchPlacesEvent(){ 829 830 if(!this.navigation) 831 return(false); 832 833 this.navigation.searchInput.addEventListener('keyup', (e) => { 834 this.filterPlaces(e.target.value); 835 }) 836 837 this.navigation.searchIcon.addEventListener('click', (e) => { 838 this.filterPlaces(this.navigation.searchInput.value); 839 }) 840 } 841 842 initPlacesEvents(place){ 843 844 const type = place.getAttribute('data-item-type'); 845 846 if ( type == 'category' ) { 847 848 const titleWrapper = place.querySelector(this.navigation.categoryTitleWrapperClass); 849 const title = place.querySelector(this.navigation.categoryTitleClass); 850 const checkbox = place.querySelector(this.navigation.categoryCheckboxClass); 851 const toggles = place.querySelectorAll(this.navigation.categoryToggleClass); 852 const placeIndex = place.getAttribute('data-item_index'); 853 const placeMarker = this.places.find( ( { item_index } ) => item_index == placeIndex) 854 855 if ( placeMarker ) { 856 placeMarker.marker.visible = false 857 } 858 859 title.addEventListener('click', () => { 860 861 this.togglePlacesWrapper() 862 863 const index = place.getAttribute('data-item_index'); 864 const item = this.places.find( ( { item_index } ) => item_index == index) 865 866 if ( item != undefined && item.marker.position.lat() ) { 867 868 this.map.setCenter(item.marker.position) 869 this.map.setZoom(parseInt(item.zoom), 10); 870 871 } 872 }) 873 874 toggles.forEach( toggle => { 875 876 const toggleDisplay = window.getComputedStyle(this.navigation.placesToggle).getPropertyValue('display') 877 878 if ( toggleDisplay == 'flex' ) { 879 this.togglePlacesWrapper() 880 } 881 882 // init collapse state 883 const placeItems = place.querySelector(this.navigation.placeItemsClass); 884 if ( toggle.parentElement.classList.contains('ue_active') ) { 885 placeItems.style.maxHeight = `${placeItems.scrollHeight}px` 886 } else { 887 placeItems.style.maxHeight = 0 888 } 889 890 toggle.addEventListener('click', () => { 891 892 const items = place.querySelector(this.navigation.placeItemsClass); 893 894 if ( toggle.parentElement.classList.contains('ue_active') ) { 895 toggle.parentElement.classList.remove('ue_active') 896 items.style.maxHeight = 0 897 } else { 898 items.style.maxHeight = `${items.scrollHeight}px` 899 toggle.parentElement.classList.add('ue_active') 900 } 901 }) 902 903 if ( toggleDisplay == 'flex' ) { 904 this.togglePlacesWrapper() 905 } 906 907 }) 908 909 var toggleElement = checkbox; 910 911 //if checkbox is hidded then toggle element is the whole item (disable it so far) 912 if(toggleElement == null) 913 toggleElement = titleWrapper; 914 915 if(!checkbox || checkbox == null){ 916 }else{ 917 918 toggleElement.addEventListener('click', () => { 919 920 const categoryIndex = place.getAttribute('data-category-index'); 921 const items = this.places.filter( ( { category_index } ) => category_index == categoryIndex) 922 923
924 items.forEach( item => { 925 if ( item.item_type == 'category' ) { 926 return 927 } 928 if ( item.marker.getVisible() ) { 929 item.marker.setVisible(false) 930 } else { 931 item.marker.setVisible(true) 932 } 933 }) 934 935 }) 936 } 937 938 939 } else { 940 941 place.addEventListener('click', (e) => { 942 943 this.togglePlacesWrapper() 944 945 const index = place.getAttribute('data-item_index') 946 947 this.navigation.places.forEach((element) => { 948 949 if (place.classList.contains('ue_active') || element.getAttribute('data-item_index') != index) { 950 element.classList.remove('ue_active') 951 } 952 if (element.getAttribute('data-item_index') === index) { 953 element.classList.add('ue_active') 954 } 955 }) 956 957 const item = this.places.find(p => p.item_index == index) 958 959 960 if ( item.marker.getVisible() ) { 961 new google.maps.event.trigger(item.marker, 'click'); 962 this.map.setZoom(parseInt(item.zoom), 10); 963 } 964 }) 965 966 place.addEventListener('mouseenter', (e) => { 967 968 const index = place.getAttribute('data-item_index') 969 const marker = this.places.find(p => p.item_index == index).marker 970 971 if ( marker.getVisible() ) { 972 marker.setAnimation(4) 973 } 974 }) 975 976 place.addEventListener('mouseleave', (e) => { 977 978 const index = place.getAttribute('data-item_index') 979 const marker = this.places.find(p => p.item_index == index).marker 980 981 if ( marker.getVisible() ) { 982 marker.setAnimation(null) 983 } 984 }) 985 } 986 } 987 988 filterPlaces(filter){ 989 990 991 992 this.navigation.places.forEach((place) => { 993 994 const title = place.querySelector('.ue-maps-navigator-item-label').textContent; 995 const subtitle = place.querySelector('.ue-maps-navigator-item-sub-title').textContent; 996 997 if ( (title.toLowerCase().search(filter.toLowerCase()) != -1) || (subtitle.toLowerCase().search(filter.toLowerCase()) != -1) ) { 998 999 place.style.display = 'flex' 1000 /* if ( place.getAttribute('data-item-type') == 'place' ) { 1001 place.parentNode.parentNode.style.display = 'flex' 1002 } */ 1003 // if (place.getAttribute('data-category-index') != 'null') { 1004 // place.parentNode.parentNode.style.display = 'flex' 1005 // } 1006 } else { 1007 place.style.display = 'none' 1008 } 1009 }) 1010 } 1011 1012 updateFinderToolLocalStorage(finderData) { 1013 localStorage.setItem('UeGoogleMapFinderData', JSON.stringify(finderData)) 1014 this.finderLocalStorage = JSON.parse(localStorage.getItem('UeGoogleMapFinderData')); 1015 } 1016 1017 getFinderToolLocalStorage() { 1018 if (!this.finderLocalStorage.latitude) { 1019 const cookie = JSON.parse(localStorage.getItem('UeGoogleMapFinderData')); 1020 if (cookie != null) { 1021 this.finderLocalStorage = JSON.parse(localStorage.getItem('UeGoogleMapFinderData')); 1022 } 1023 } 1024 } 1025 1026 initEvents() { 1027 this.initShowPlacesToggle() 1028 window.addEventListener('resize', () => { 1029 this.resizeMap() 1030 1031 }) 1032 } 1033 1034}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.