From c5a71c32c372bc865c7be9497d97277d0a9de1eb Mon Sep 17 00:00:00 2001 From: Klaus Fiedler Date: Sat, 5 Nov 2022 08:49:03 +0100 Subject: [PATCH] [Changed] The 'lat-lon' input element now dispatches a 'change' event if filled by Google Places Autocomplete. --- Resources/Private/Partials/Elements/Form/Scripts.js | 1 + Resources/Public/Elements/Form.default.min.js | 2 +- Resources/Public/tw_geo-default.min.js | 3 +-- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Resources/Private/Partials/Elements/Form/Scripts.js b/Resources/Private/Partials/Elements/Form/Scripts.js index 243d6a1..31727e5 100644 --- a/Resources/Private/Partials/Elements/Form/Scripts.js +++ b/Resources/Private/Partials/Elements/Form/Scripts.js @@ -191,6 +191,7 @@ GeoselectElement.prototype.setLatLon = function (latitude, longitude) { // Set value of hidden latitude/longitude field this.latLon.value = (`${latitude},${longitude}`); + this.latLon.dispatchEvent(new Event('change')); // If we have a Google Map if (this.map) { // Add map marker after removing the old one diff --git a/Resources/Public/Elements/Form.default.min.js b/Resources/Public/Elements/Form.default.min.js index 439db95..78de960 100644 --- a/Resources/Public/Elements/Form.default.min.js +++ b/Resources/Public/Elements/Form.default.min.js @@ -1 +1 @@ -!function(n){function o(t){this.elements=[].slice.call(t).map(function(t){return new i(t)})}function i(t){return this.container=t||null,this.container&&this.container.id?(this.search=n.getElementById(this.container.id+"-search"),this.latLon=n.getElementById(this.container.id+"-lat-lon"),this.search&&this.latLon?(this.position=n.getElementById(this.container.id+"-position"),this.submit=n.getElementById(this.container.id+"-submit"),this.initAutocomplete(),this.map=this.initMap(),void this.onInitialize()):null):null}i.prototype.initAutocomplete=function(){var e=this;if(this.search.hasAttribute("autocomplete")&&"off"===this.search.getAttribute("autocomplete"))return null;this.searchAutocomplete=new google.maps.places.Autocomplete(this.search,{language:"ru",componentRestrictions:{country:this.container.hasAttribute("data-restrict-countries")?String(this.container.getAttribute("data-restrict-countries")).split(",").map(function(t){return t.trim()}):[]}}),this.searchAutocomplete.addListener("place_changed",this.handle_autocompletePlaceChanged.bind(this)),function(t,e){for(;(t=t.parentElement)&&t.tagName!=e.toLowerCase()&&t.tagName!=e.toUpperCase(););return t}(this.search,"form").addEventListener("submit",function(t){t.currentTarget.classList.add("loading"),n.activeElement===e.search&&t.preventDefault()}),this.search.addEventListener("change",function(t){t.currentTarget.value||e.reset()})},i.defaultStyles=[{featureType:"poi",elementType:"labels.icon",stylers:[{color:"#9d9d9d"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#9d9d9d"}]}],i.prototype.initMap=function(){var t=n.getElementById(this.container.id+"-map");if(!t)return null;var e=this.container.hasAttribute("data-lat-lon")?this.container.attributes["data-lat-lon"].value.split(","):[];return new google.maps.Map(t,{zoom:10,center:{lat:Number(2===e.length?e[0]:t.attributes["data-latitude"].value),lng:Number(2===e.length?e[1]:t.attributes["data-longitude"].value)},streetViewControl:!1,rotateControl:!1,fullscreenControl:!1,zoomControl:!1,mapTypeControl:!1,zoomControlOptions:{position:google.maps.ControlPosition.LEFT_TOP},styles:window.googleMapStyles||i.defaultStyles})},i.prototype.onInitialize=function(){this.position&&this.position.parentNode.removeChild(this.position),this.container.classList.add("Geoselect--js"),(this.container.geoselect=this).container.dispatchEvent(new CustomEvent("geoselect_init"))},i.prototype.handle_autocompletePlaceChanged=function(t){var e=this.searchAutocomplete.getPlace();if(!e||!e.geometry)return this.container.removeAttribute("data-lat-lon"),null;var n=e.geometry.location.lat(),e=e.geometry.location.lng();this.container.setAttribute("data-lat-lon",n+","+e),this.setLatLon(n,e)},i.prototype.setLatLon=function(t,e){var n;this.latLon.value=t+","+e,this.map&&(this.marker?this.marker.setPosition({lat:t,lng:e}):(n=(n=this.map.getDiv().attributes["data-marker"])?n.value:null,this.marker=new google.maps.Marker({position:{lat:t,lng:e},map:this.map,icon:n?{url:n,size:new google.maps.Size(48,68),scaledSize:new google.maps.Size(32,45),anchor:new google.maps.Point(12,34)}:null})),this.map.setCenter({lat:t,lng:e}),this.map.setZoom(10)),this.container.dispatchEvent(new CustomEvent("geoselect_change",{detail:{latitude:t,longitude:e}}))},i.prototype.reset=function(){var t;this.marker&&(this.marker.setMap(null),this.marker=null,t=n.getElementById(this.container.id+"-map"),this.map.setCenter({lat:Number(t.attributes["data-latitude"].value),lng:Number(t.attributes["data-longitude"].value)})),this.map.setZoom(6),this.latLon.value&&(this.latLon.value=""),this.search.value&&(this.search.value=""),this.container.removeAttribute("data-lat-lon"),this.container.dispatchEvent(new CustomEvent("geoselect_change",{detail:{}}))},i.prototype.addMyLocationControl=function(){var e=this;if(!navigator.geolocation)return!1;var t=n.createElement("div");t.innerHTML=n.getElementById("GoogleMap-MyLocation").innerHTML,t.index=1,t.addEventListener("click",function(t){navigator.geolocation.getCurrentPosition(function(t){e.setLatLon(t.coords.latitude,t.coords.longitude),e.search.value=t.coords.latitude+","+t.coords.longitude,e.map.setZoom(14)})}),this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t)},n.addEventListener("DOMContentLoaded",function(t){var e=n.querySelectorAll(".Geoselect");e.length&&new o(e)})}(document); \ No newline at end of file +(function(d){function findAncenstorByTagName(el,tagName){while((el=el.parentElement)&&!(el.tagName==tagName.toLowerCase())&&!(el.tagName==tagName.toUpperCase())){};return el}function Geoselect(elements){this.elements=[].slice.call(elements).map((e)=>new GeoselectElement(e))}function GeoselectElement(container){this.container=container||null;if(!this.container||!this.container.id){return null}this.search=d.getElementById(`${this.container.id }-search`);this.latLon=d.getElementById(`${this.container.id }-lat-lon`);if(!this.search||!this.latLon){return null}this.position=d.getElementById(`${this.container.id }-position`);this.submit=d.getElementById(`${this.container.id }-submit`);this.initAutocomplete();this.map=this.initMap();this.onInitialize()}GeoselectElement.prototype.initAutocomplete=function(){if(this.search.hasAttribute('autocomplete')){if(this.search.getAttribute('autocomplete')==='off'){return null}}this.searchAutocomplete=new google.maps.places.Autocomplete(this.search,{language:'ru',componentRestrictions:{country:this.container.hasAttribute('data-restrict-countries')?String(this.container.getAttribute('data-restrict-countries')).split(',').map((item)=>item.trim()):[]}});this.searchAutocomplete.addListener('place_changed',this.handle_autocompletePlaceChanged.bind(this));findAncenstorByTagName(this.search,'form').addEventListener('submit',(event)=>{event.currentTarget.classList.add('loading');if(d.activeElement===this.search){event.preventDefault()}});this.search.addEventListener('change',(event)=>{if(!event.currentTarget.value){this.reset()}})};GeoselectElement.defaultStyles=[{featureType:'poi',elementType:'labels.icon',stylers:[{color:'#9d9d9d'}]},{featureType:'poi',elementType:'labels.text.fill',stylers:[{color:'#9d9d9d'}]}];GeoselectElement.prototype.initMap=function(){const mapElement=d.getElementById(`${this.container.id }-map`);if(!mapElement){return null}const latLon=this.container.hasAttribute('data-lat-lon')?this.container.attributes['data-lat-lon'].value.split(','):[];const map=new google.maps.Map(mapElement,{zoom:10,center:{lat:Number((latLon.length===2)?latLon[0]:mapElement.attributes['data-latitude'].value),lng:Number((latLon.length===2)?latLon[1]:mapElement.attributes['data-longitude'].value)},streetViewControl:false,rotateControl:false,fullscreenControl:false,zoomControl:false,mapTypeControl:false,zoomControlOptions:{position:google.maps.ControlPosition.LEFT_TOP},styles:window.googleMapStyles?window.googleMapStyles:GeoselectElement.defaultStyles});return map};GeoselectElement.prototype.onInitialize=function(){if(this.position){this.position.parentNode.removeChild(this.position)}this.container.classList.add('Geoselect--js');this.container.geoselect=this;this.container.dispatchEvent(new CustomEvent('geoselect_init'))};GeoselectElement.prototype.handle_autocompletePlaceChanged=function(event){const place=this.searchAutocomplete.getPlace();if(!place||!place.geometry){this.container.removeAttribute('data-lat-lon');return null}const latitude=place.geometry.location.lat();const longitude=place.geometry.location.lng();this.container.setAttribute('data-lat-lon',`${ latitude },${ longitude }`);this.setLatLon(latitude,longitude)};GeoselectElement.prototype.setLatLon=function(latitude,longitude){this.latLon.value=(`${ latitude },${ longitude }`);this.latLon.dispatchEvent(new Event('change'));if(this.map){if(!this.marker){let markerIconPath=this.map.getDiv().attributes['data-marker'];markerIconPath=markerIconPath?markerIconPath.value:null;this.marker=new google.maps.Marker({position:{lat:latitude,lng:longitude},map:this.map,icon:markerIconPath?{url:markerIconPath,size:new google.maps.Size(48,68),scaledSize:new google.maps.Size(32,45),anchor:new google.maps.Point(12,34)}:null})}else{this.marker.setPosition({lat:latitude,lng:longitude})}this.map.setCenter({lat:latitude,lng:longitude});this.map.setZoom(10)}this.container.dispatchEvent(new CustomEvent('geoselect_change',{detail:{latitude,longitude}}))};GeoselectElement.prototype.reset=function(){if(this.marker){this.marker.setMap(null);this.marker=null;const mapElement=d.getElementById(`${this.container.id }-map`);this.map.setCenter({lat:Number(mapElement.attributes['data-latitude'].value),lng:Number(mapElement.attributes['data-longitude'].value)})}this.map.setZoom(6);if(this.latLon.value){this.latLon.value=''}if(this.search.value){this.search.value=''}this.container.removeAttribute('data-lat-lon');this.container.dispatchEvent(new CustomEvent('geoselect_change',{detail:{}}))};GeoselectElement.prototype.addMyLocationControl=function(){if(!navigator.geolocation){return false}const controlDiv=d.createElement('div');controlDiv.innerHTML=d.getElementById('GoogleMap-MyLocation').innerHTML;controlDiv.index=1;controlDiv.addEventListener('click',(event)=>{navigator.geolocation.getCurrentPosition((position)=>{this.setLatLon(position.coords.latitude,position.coords.longitude);this.search.value=`${position.coords.latitude },${position.coords.longitude }`;this.map.setZoom(14)})});this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv)};d.addEventListener('DOMContentLoaded',(event)=>{const geoselectElements=d.querySelectorAll('.Geoselect');if(geoselectElements.length){new Geoselect(geoselectElements)}})}(document)); diff --git a/Resources/Public/tw_geo-default.min.js b/Resources/Public/tw_geo-default.min.js index 572f01f..78de960 100644 --- a/Resources/Public/tw_geo-default.min.js +++ b/Resources/Public/tw_geo-default.min.js @@ -1,2 +1 @@ -!function(n){function o(t){this.elements=[].slice.call(t).map(function(t){return new i(t)})}function i(t){return this.container=t||null,this.container&&this.container.id?(this.search=n.getElementById(this.container.id+"-search"),this.latLon=n.getElementById(this.container.id+"-lat-lon"),this.search&&this.latLon?(this.position=n.getElementById(this.container.id+"-position"),this.submit=n.getElementById(this.container.id+"-submit"),this.initAutocomplete(),this.map=this.initMap(),void this.onInitialize()):null):null}i.prototype.initAutocomplete=function(){var e=this;if(this.search.hasAttribute("autocomplete")&&"off"===this.search.getAttribute("autocomplete"))return null;this.searchAutocomplete=new google.maps.places.Autocomplete(this.search,{language:"ru",componentRestrictions:{country:this.container.hasAttribute("data-restrict-countries")?String(this.container.getAttribute("data-restrict-countries")).split(",").map(function(t){return t.trim()}):[]}}),this.searchAutocomplete.addListener("place_changed",this.handle_autocompletePlaceChanged.bind(this)),function(t,e){for(;(t=t.parentElement)&&t.tagName!=e.toLowerCase()&&t.tagName!=e.toUpperCase(););return t}(this.search,"form").addEventListener("submit",function(t){t.currentTarget.classList.add("loading"),n.activeElement===e.search&&t.preventDefault()}),this.search.addEventListener("change",function(t){t.currentTarget.value||e.reset()})},i.defaultStyles=[{featureType:"poi",elementType:"labels.icon",stylers:[{color:"#9d9d9d"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#9d9d9d"}]}],i.prototype.initMap=function(){var t=n.getElementById(this.container.id+"-map");if(!t)return null;var e=this.container.hasAttribute("data-lat-lon")?this.container.attributes["data-lat-lon"].value.split(","):[];return new google.maps.Map(t,{zoom:10,center:{lat:Number(2===e.length?e[0]:t.attributes["data-latitude"].value),lng:Number(2===e.length?e[1]:t.attributes["data-longitude"].value)},streetViewControl:!1,rotateControl:!1,fullscreenControl:!1,zoomControl:!1,mapTypeControl:!1,zoomControlOptions:{position:google.maps.ControlPosition.LEFT_TOP},styles:window.googleMapStyles||i.defaultStyles})},i.prototype.onInitialize=function(){this.position&&this.position.parentNode.removeChild(this.position),this.container.classList.add("Geoselect--js"),(this.container.geoselect=this).container.dispatchEvent(new CustomEvent("geoselect_init"))},i.prototype.handle_autocompletePlaceChanged=function(t){var e=this.searchAutocomplete.getPlace();if(!e||!e.geometry)return this.container.removeAttribute("data-lat-lon"),null;var n=e.geometry.location.lat(),e=e.geometry.location.lng();this.container.setAttribute("data-lat-lon",n+","+e),this.setLatLon(n,e)},i.prototype.setLatLon=function(t,e){var n;this.latLon.value=t+","+e,this.map&&(this.marker?this.marker.setPosition({lat:t,lng:e}):(n=(n=this.map.getDiv().attributes["data-marker"])?n.value:null,this.marker=new google.maps.Marker({position:{lat:t,lng:e},map:this.map,icon:n?{url:n,size:new google.maps.Size(48,68),scaledSize:new google.maps.Size(32,45),anchor:new google.maps.Point(12,34)}:null})),this.map.setCenter({lat:t,lng:e}),this.map.setZoom(10)),this.container.dispatchEvent(new CustomEvent("geoselect_change",{detail:{latitude:t,longitude:e}}))},i.prototype.reset=function(){var t;this.marker&&(this.marker.setMap(null),this.marker=null,t=n.getElementById(this.container.id+"-map"),this.map.setCenter({lat:Number(t.attributes["data-latitude"].value),lng:Number(t.attributes["data-longitude"].value)})),this.map.setZoom(6),this.latLon.value&&(this.latLon.value=""),this.search.value&&(this.search.value=""),this.container.removeAttribute("data-lat-lon"),this.container.dispatchEvent(new CustomEvent("geoselect_change",{detail:{}}))},i.prototype.addMyLocationControl=function(){var e=this;if(!navigator.geolocation)return!1;var t=n.createElement("div");t.innerHTML=n.getElementById("GoogleMap-MyLocation").innerHTML,t.index=1,t.addEventListener("click",function(t){navigator.geolocation.getCurrentPosition(function(t){e.setLatLon(t.coords.latitude,t.coords.longitude),e.search.value=t.coords.latitude+","+t.coords.longitude,e.map.setZoom(14)})}),this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(t)},n.addEventListener("DOMContentLoaded",function(t){var e=n.querySelectorAll(".Geoselect");e.length&&new o(e)})}(document); -//# sourceMappingURL=tw_geo-default.min.js.map +(function(d){function findAncenstorByTagName(el,tagName){while((el=el.parentElement)&&!(el.tagName==tagName.toLowerCase())&&!(el.tagName==tagName.toUpperCase())){};return el}function Geoselect(elements){this.elements=[].slice.call(elements).map((e)=>new GeoselectElement(e))}function GeoselectElement(container){this.container=container||null;if(!this.container||!this.container.id){return null}this.search=d.getElementById(`${this.container.id }-search`);this.latLon=d.getElementById(`${this.container.id }-lat-lon`);if(!this.search||!this.latLon){return null}this.position=d.getElementById(`${this.container.id }-position`);this.submit=d.getElementById(`${this.container.id }-submit`);this.initAutocomplete();this.map=this.initMap();this.onInitialize()}GeoselectElement.prototype.initAutocomplete=function(){if(this.search.hasAttribute('autocomplete')){if(this.search.getAttribute('autocomplete')==='off'){return null}}this.searchAutocomplete=new google.maps.places.Autocomplete(this.search,{language:'ru',componentRestrictions:{country:this.container.hasAttribute('data-restrict-countries')?String(this.container.getAttribute('data-restrict-countries')).split(',').map((item)=>item.trim()):[]}});this.searchAutocomplete.addListener('place_changed',this.handle_autocompletePlaceChanged.bind(this));findAncenstorByTagName(this.search,'form').addEventListener('submit',(event)=>{event.currentTarget.classList.add('loading');if(d.activeElement===this.search){event.preventDefault()}});this.search.addEventListener('change',(event)=>{if(!event.currentTarget.value){this.reset()}})};GeoselectElement.defaultStyles=[{featureType:'poi',elementType:'labels.icon',stylers:[{color:'#9d9d9d'}]},{featureType:'poi',elementType:'labels.text.fill',stylers:[{color:'#9d9d9d'}]}];GeoselectElement.prototype.initMap=function(){const mapElement=d.getElementById(`${this.container.id }-map`);if(!mapElement){return null}const latLon=this.container.hasAttribute('data-lat-lon')?this.container.attributes['data-lat-lon'].value.split(','):[];const map=new google.maps.Map(mapElement,{zoom:10,center:{lat:Number((latLon.length===2)?latLon[0]:mapElement.attributes['data-latitude'].value),lng:Number((latLon.length===2)?latLon[1]:mapElement.attributes['data-longitude'].value)},streetViewControl:false,rotateControl:false,fullscreenControl:false,zoomControl:false,mapTypeControl:false,zoomControlOptions:{position:google.maps.ControlPosition.LEFT_TOP},styles:window.googleMapStyles?window.googleMapStyles:GeoselectElement.defaultStyles});return map};GeoselectElement.prototype.onInitialize=function(){if(this.position){this.position.parentNode.removeChild(this.position)}this.container.classList.add('Geoselect--js');this.container.geoselect=this;this.container.dispatchEvent(new CustomEvent('geoselect_init'))};GeoselectElement.prototype.handle_autocompletePlaceChanged=function(event){const place=this.searchAutocomplete.getPlace();if(!place||!place.geometry){this.container.removeAttribute('data-lat-lon');return null}const latitude=place.geometry.location.lat();const longitude=place.geometry.location.lng();this.container.setAttribute('data-lat-lon',`${ latitude },${ longitude }`);this.setLatLon(latitude,longitude)};GeoselectElement.prototype.setLatLon=function(latitude,longitude){this.latLon.value=(`${ latitude },${ longitude }`);this.latLon.dispatchEvent(new Event('change'));if(this.map){if(!this.marker){let markerIconPath=this.map.getDiv().attributes['data-marker'];markerIconPath=markerIconPath?markerIconPath.value:null;this.marker=new google.maps.Marker({position:{lat:latitude,lng:longitude},map:this.map,icon:markerIconPath?{url:markerIconPath,size:new google.maps.Size(48,68),scaledSize:new google.maps.Size(32,45),anchor:new google.maps.Point(12,34)}:null})}else{this.marker.setPosition({lat:latitude,lng:longitude})}this.map.setCenter({lat:latitude,lng:longitude});this.map.setZoom(10)}this.container.dispatchEvent(new CustomEvent('geoselect_change',{detail:{latitude,longitude}}))};GeoselectElement.prototype.reset=function(){if(this.marker){this.marker.setMap(null);this.marker=null;const mapElement=d.getElementById(`${this.container.id }-map`);this.map.setCenter({lat:Number(mapElement.attributes['data-latitude'].value),lng:Number(mapElement.attributes['data-longitude'].value)})}this.map.setZoom(6);if(this.latLon.value){this.latLon.value=''}if(this.search.value){this.search.value=''}this.container.removeAttribute('data-lat-lon');this.container.dispatchEvent(new CustomEvent('geoselect_change',{detail:{}}))};GeoselectElement.prototype.addMyLocationControl=function(){if(!navigator.geolocation){return false}const controlDiv=d.createElement('div');controlDiv.innerHTML=d.getElementById('GoogleMap-MyLocation').innerHTML;controlDiv.index=1;controlDiv.addEventListener('click',(event)=>{navigator.geolocation.getCurrentPosition((position)=>{this.setLatLon(position.coords.latitude,position.coords.longitude);this.search.value=`${position.coords.latitude },${position.coords.longitude }`;this.map.setZoom(14)})});this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv)};d.addEventListener('DOMContentLoaded',(event)=>{const geoselectElements=d.querySelectorAll('.Geoselect');if(geoselectElements.length){new Geoselect(geoselectElements)}})}(document));