xtendui/dist/51.min.js

Xtend UI is a powerful frontend library of Tailwind CSS components enhanced by vanilla js. It helps you build interfaces with advanced interactions and animations.

/*! For license information please see 51.min.js.LICENSE.txt */
"use strict";(globalThis.webpackChunkxtendui=globalThis.webpackChunkxtendui||[]).push([[51],{1051:(e,t,o)=>{o.r(t),o.d(t,{GooglelocatorInit:()=>s});o(1484),o(6961),o(4615),o(9370),o(2807);var n=o(5498),a=o(2510);class s{_init(){this._initVars(),this._initLogic()}_initVars(){const e=this;e._optionsDefault=n.Xt.merge([e.constructor.optionsDefault,n.Xt.options[e.componentName]]),e._optionsInitial=e.options=n.Xt.merge([e._optionsDefault,e._optionsCustom])}_initLogic(){const e=this,t=e.options;e.ns=e.ns??n.Xt.uniqueId(),e.enable(),n.Xt._initMatches({self:e,optionsInitial:e._optionsInitial}),e.initial=!0,e.loaderElement=e.container.querySelector(t.elements.loader),e.itemsTemplate=e.container.querySelector(t.elements.itemsTemplate),e.itemsContainer=e.container.querySelector(t.elements.itemsContainer),e.foundElement=e.container.querySelector(t.elements.resultsFound),e.mapElement=e.container.querySelector(t.elements.map),e.map=new google.maps.Map(e.mapElement,t.map),e.autosuggestContainer=e.container.querySelector(t.elements.autosuggestContainer),e.autosuggestTemplate=e.container.querySelector(t.elements.autosuggestTemplate),e.searchInput=e.container.querySelector(t.elements.searchInput);const o=n.Xt.dataStorage.put(e.searchInput,`keypress/${e.ns}`,e._searchKeyboardEvent.bind(e));e.searchInput.addEventListener("keypress",o);const a=n.Xt.dataStorage.put(e.searchInput,`input focus/${e.ns}`,e._searchAutocompleteOn.bind(e));if(e.searchInput.addEventListener("input",a),e.searchInput.addEventListener("focus",a),e.autosuggestContainer){const t=n.Xt.dataStorage.put(e.container,`focusout/${e.ns}`,e._searchClose.bind(e));e.container.addEventListener("focusout",t)}e.searchBtn=e.container.querySelector(t.elements.searchBtn);const s=n.Xt.dataStorage.put(e.searchBtn,`click/${e.ns}`,e._searchClickEvent.bind(e));if(e.searchBtn.addEventListener("click",s),t.map.zoomMin&&google.maps.event.addListener(e.map,"zoom_changed",(()=>{google.maps.event.addListener(e.map,"bounds_changed",(()=>{e.map.getZoom()>t.map.zoomMin&&e.map.setZoom(t.map.zoomMin)}))})),t.infoWindow&&(e.info=new google.maps.InfoWindow(t.infoWindow),google.maps.event.addListener(e.info,"closeclick",e._infoClose.bind(e))),t.elements.repeatBtn&&(e.repeatElement=e.container.querySelector(t.elements.repeatBtn),e.repeatElement)){const t=n.Xt.dataStorage.put(e.repeatElement,`click/${e.ns}`,e._submitCurrent.bind(e));e.repeatElement.addEventListener("click",t)}if(t.elements.locateBtn&&(e.locateElement=e.container.querySelector(t.elements.locateBtn),e.locateElement))if("https:"===location.protocol)if(navigator.geolocation){t.initialLocate&&e._locate({initial:!0});const o=n.Xt.dataStorage.put(e.locateElement,`click/${e.ns}`,e._locate.bind(e));e.locateElement.addEventListener("click",o)}else e.locateElement.style.display="none";else e.locateElement.style.display="none";e._initStart(),e.container.dispatchEvent(new CustomEvent(`setup.${e._componentNs}`)),n.Xt.frameDouble({el:e.container,ns:`${e.ns}Init`,func:()=>{e.container.setAttribute(`data-${e.componentName}-init`,""),e.container.dispatchEvent(new CustomEvent(`init.${e._componentNs}`)),e.initial=!1,t.debug&&console.debug(`${e.componentName} init`,e)}}),e.options.disabled&&e.disable()}_initStart(){const e=this,t=e.options;e.disabled||t.initialSearch&&google.maps.event.addListenerOnce(e.map,"idle",(()=>{e.map.setCenter(t.map.center),e.map.setZoom(t.map.zoom),e._submitCurrent()}))}async _searchAutocompleteOn(){const e=this,t=e.options;if(e._controller&&e._controller.abort(),e._controller=new AbortController,e._sessionToken||(e._sessionToken=new google.maps.places.AutocompleteSessionToken),""===e.searchInput.value.trim())return void e._searchAutocompleteOff();const{suggestions:o}=await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions({input:e.searchInput.value,sessionToken:e._sessionToken,...e.options.autocompleteOptions});o.length?(e.autosuggestContainer.innerHTML="",e._searchAutocompleteOff(),n.Xt.on({el:e.autosuggestContainer}),o.forEach((o=>{if(o.placePrediction){const a=n.Xt.node({str:e.autosuggestTemplate.innerHTML});t.formatData.autosuggest(e,o,a),e.autosuggestContainer.append(a),a.querySelector(t.elements.autosuggestAction).addEventListener("click",(()=>{e._searchAutocompleteOff(),e._searchSubmit({suggestion:o})}));const s=n.Xt.dataStorage.put(document,`keydown/ariakeyboard/document/${e.ns}`,e._eventA11yDocumentKeydown.bind(e));document.removeEventListener("keydown",s),document.addEventListener("keydown",s)}}))):e._searchAutocompleteOff()}_searchAutocompleteOff(){n.Xt.off({el:this.autosuggestContainer});const e=n.Xt.dataStorage.get(document,`keydown/ariakeyboard/document/${this.ns}`);document.removeEventListener("keydown",e)}async _searchSubmit(){let{suggestion:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const t=this,o=t.options;if(t.disabled)return;const{place:n}=await e.placePrediction.toPlace().fetchFields({fields:["displayName","location","viewport","formattedAddress"]});t.searchInput.value=e.placePrediction.text.text,n&&n.displayName&&""!==n.displayName&&n.location&&(t.position=n.location,t.viewport=n.viewport,t.radius=o.searchRadius,t.submit())}_searchClose(e){const t=this;setTimeout((()=>{null!=e&&e.relatedTarget&&t.container.contains(e.relatedTarget)||t._searchAutocompleteOff()}),0)}_searchKeyboardEvent(e){const t=this,o=t.options;if(t.disabled)return;"Enter"===e.key&&(e.preventDefault(),t.searchInput.blur(),""===t.searchInput.value?(t.map.setCenter(o.map.center),t.map.setZoom(o.map.zoom),t._submitCurrent({empty:!0})):t._searchFirst())}_searchClickEvent(e){const t=this,o=t.options;t.disabled||(e.preventDefault(),""===t.searchInput.value?(t.map.setCenter(o.map.center),t.map.setZoom(o.map.zoom),t._submitCurrent({empty:!0})):t._searchFirst())}_searchFirst(){const e=this,t=e.options;e._searchClose();const o=e.autosuggestContainer.querySelector(t.elements.autosuggestAction);if(o)o.click();else{if(e._locateCache&&e._locateCache.value===e.searchInput.value)return e.position=e._locateCache.position,e.viewport=null,e.radius=t.searchRadius,void e.submit();e.locations=[],e._populateItems(),e.container.classList.add("noplace"),e.container.classList.remove("empty"),e.container.classList.remove("found"),e.container.classList.remove("error")}}submit(){const e=this,t=e.options;e.disabled||(e._loaderShow(),setTimeout(e.submitDeferred.bind(e),t.submitDelay))}submitDeferred(){const e=this,t=e.options;if(!e.map.getBounds())return google.maps.event.addListenerOnce(e.map,"bounds_changed",(()=>{e.submit()})),!1;e.filters=e.container.querySelectorAll(t.elements.filter),e.locations=[];let o=0;const s=t.markers,i=new google.maps.LatLngBounds;for(const n of s)if(!e.filters.length||e._filterMarker({marker:n})){const a=new google.maps.LatLng(t.formatData.lat?t.formatData.lat(e,n):n.lat,t.formatData.lng?t.formatData.lng(e,n):n.lng),s=google.maps.geometry.spherical.computeDistanceBetween(e.position,a);if(!e.radius&&!e.viewport||e.radius&&s<=e.radius||e.viewport&&e.viewport.contains(a)){const r=n.icon||t.map.icon;let c;r&&(c=document.createElement("img"),c.src=r);const l=new google.maps.marker.AdvancedMarkerElement({map:e.map,position:a,title:n.name,content:c});l.animation=n.animation||t.map.animation,l.distance=s,l.marker=n,l.index=o,i.extend(a),e.locations.push(l),l.addListener("click",(()=>{e._populateInfo({loc:l,type:"marker"})})),o++}}for(const[t,o]of e.locations.entries())o.index=t;t.formatData.sort(e),e._populateItems(),t.map.cluster&&(e.cluster&&e.cluster.clearMarkers(),e.cluster=new a.w1({map:e.map,markers:e.locations,...t.map.cluster})),e._loaderHide(),e.locations.length?(e.container.classList.remove("noplace"),e.container.classList.remove("empty"),e.container.classList.add("found"),e.container.classList.remove("error"),e.foundElement&&(e.foundElement.innerHTML=e.locations.length),e.map.fitBounds(i),e.map.panToBounds(i)):(e.container.classList.remove("noplace"),e.container.classList.add("empty"),e.container.classList.remove("found"),e.container.classList.remove("error"),e.viewport&&(e.map.fitBounds(e.viewport),e.map.panToBounds(e.viewport))),t.debug&&console.debug("xt-googlelocator locations",e.locations),n.Xt.frame({el:e.container,ns:`${e.ns}Change`,func:()=>{e.container.dispatchEvent(new CustomEvent(`change.${e._componentNs}`))}})}_populateItems(){const e=this,t=e.container.querySelectorAll(".xt-googlelocator-clone");for(const e of t)e.remove();for(const t of e.locations)e._populateItem({loc:t})}_filterMarker(){let{marker:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const t=this;return t.options.formatData.filter(t,e,t.filters)}_populateItem(){let{loc:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const t=this,o=t.options;let a=document.createElement("div");a.innerHTML=n.Xt.sanitize(t.itemsTemplate.innerHTML),a=a.querySelector(":scope > *"),a.classList.add("xt-googlelocator-clone"),a.setAttribute("data-xt-index",e.index.toString()),t.itemsContainer.append(a);const s=a.querySelectorAll("[data-xt-populate]");for(const n of s){const a=o.formatData[n.getAttribute("data-xt-populate")];a&&a(t,e,n)}a.addEventListener("click",(()=>{t._populateInfo({loc:e,type:"result"})}))}_populateInfo(){let{loc:e,type:t}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const o=this,a=o.options;o._animatingLoc&&(o._animatingLoc.setAnimation(null),o._animatingLoc=null);const s="marker"===t?a.events.animateMarkerClick:"result"===t?a.events.animateMarkerResultClick:null;s&&(e.setAnimation(s),o._animatingLoc=e);const i=o.itemsContainer.querySelector(`[data-xt-index="${e.index}"]`);if(o._infoClose(),i&&(i.focus(),n.Xt.on({el:i})),a.infoWindow){if("marker"===t?a.events.infoWindowMarkerClick:"result"===t?a.events.infoWindowMarkerResultClick:null){if(i){const t=a.formatData.info(o,e,i);t&&(o.info.setContent(t),o.info.open(o.map,e))}}else o.info.close(o.map)}}_infoClose(){const e=this.itemsContainer.querySelector("[data-xt-index].on");e&&n.Xt.off({el:e})}_submitCurrent(){let{empty:e=!1}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const t=this,o=t.options;t.searchInput.value="",t.position=t.map.getCenter(),t.viewport=null,e&&!o.seachMapBounds||(t.radius=google.maps.geometry.spherical.computeDistanceBetween(t.position,t.map.getBounds().getNorthEast())),t.submit()}_locate(){let{initial:e=!1}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const t=this;t.disabled||(e||t._loaderShow(),window.navigator.geolocation.getCurrentPosition(t._locateSuccess.bind(t),t._locateError.bind(t)))}_locateSuccess(e){const t=this,o=t.options;t._loaderHide(),t.searchInput.value=o.locateText,t.position=new google.maps.LatLng(e.coords.latitude,e.coords.longitude),t.viewport=null,t.radius=o.searchRadius,t._locateCache={value:t.searchInput.value,position:t.position},o.debug&&console.debug("xt-googlelocator locate",e,t.position),t.map.setCenter(t.position),t.submit()}_locateError(e){this._loaderHide(),console.error("Error: Xt.Googlelocator locate error",e)}_loaderShow(){n.Xt.on({el:this.loaderElement})}_loaderHide(){n.Xt.off({el:this.loaderElement})}_eventA11yDocumentKeydown(e){const t=this,o=t.options;if(t.disabled)return;const n=e.key,a=o.a11y.vertical?"ArrowLeft":"ArrowUp",s=o.a11y.vertical?"ArrowRight":"ArrowDown";if(o.a11y.items){let i;const r=[];if(r.push(...t.autosuggestContainer.querySelectorAll(o.a11y.items)),r.length){const t=r.indexOf(document.activeElement);if(n===a){if(-1===t)i=r[r.length-1];else{i=r[(t-1+r.length)%r.length]}e.preventDefault()}else if(n===s){if(-1===t)i=r[0];else{i=r[(t+1)%r.length]}e.preventDefault()}if(i)return void i.focus()}}}enable(){const e=this;e.disabled&&(e.disabled=!1,e.container.dispatchEvent(new CustomEvent(`status.${e._componentNs}`)))}disable(){let{skipEvent:e=!1}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const t=this;t.disabled||(t.disabled=!0,e||t.container.dispatchEvent(new CustomEvent(`status.${t._componentNs}`)))}reinit(){this._initLogic()}destroy(){const e=this,t=e.options,o=n.Xt.dataStorage.get(e.searchInput,`keypress/${e.ns}`);e.searchInput.removeEventListener("keypress",o);const a=n.Xt.dataStorage.get(e.searchInput,`input focus/${e.ns}`);e.searchInput.removeEventListener("input",a),e.searchInput.removeEventListener("focus",a);const s=n.Xt.dataStorage.get(e.container,`focusout/${e.ns}`);e.container.removeEventListener("focusout",s);const i=n.Xt.dataStorage.get(e.searchBtn,`click/${e.ns}`);if(e.searchBtn.removeEventListener("click",i),e.locateElement){const t=n.Xt.dataStorage.get(e.locateElement,`click/${e.ns}`);e.locateElement.removeEventListener("click",t)}if(e.repeatElement){const t=n.Xt.dataStorage.get(e.repeatElement,`click/${e.ns}`);e.repeatElement.removeEventListener("click",t)}if(t.infoWindow&&google.maps.event.removeListener(e.info,"closeclick",e._infoClose.bind(e)),t.elements.locateBtn&&(e.locateElement=e.container.querySelector(t.elements.locateBtn),e.locateElement&&"https:"===location.protocol&&navigator.geolocation)){const t=n.Xt.dataStorage.put(e.locateElement,`click/${e.ns}`,e._locate.bind(e));e.locateElement.removeEventListener("click",t)}e.container.classList.remove("noplace"),e.container.classList.remove("empty"),e.container.classList.remove("found"),e.container.classList.remove("error");const r=e.container.querySelectorAll(".xt-googlelocator-clone");for(const e of r)e.remove();e.container.removeAttribute(`data-${e.componentName}-init`),n.Xt._remove({name:e.componentName,el:e.container}),e.container.dispatchEvent(new CustomEvent(`destroy.${e._componentNs}`))}}}}]);
//# sourceMappingURL=51.min.js.map