wonder-image 1.2.0 → 1.2.2

package/src/build/frontend/js/form/place.js

@@ -0,0 +1,174 @@
+function placeNeedCheck(input) {
+
+    inputError(input, 'Indirizzo non valido');
+
+}
+
+function checkInputPlace(input, autocomplete) {
+    
+    var inputContainer = input.parentElement;
+
+    var country = inputContainer.querySelector('[data-wi-spi="country"]');
+    var province = inputContainer.querySelector('[data-wi-spi="province"]');
+    var cap = inputContainer.querySelector('[data-wi-spi="cap"]');
+    var city = inputContainer.querySelector('[data-wi-spi="city"]');
+    var street = inputContainer.querySelector('[data-wi-spi="street"]');
+    var number = inputContainer.querySelector('[data-wi-spi="number"]');
+
+    country.value = "";
+    province.value = "";
+    cap.value = "";
+    city.value = "";
+    street.value = "";
+    number.value = "";
+
+    removeInputError(input);
+
+    if (autocomplete.getPlace()) {
+
+        var place = autocomplete.getPlace();
+
+        for (const component of place.address_components) {
+            
+            const componentType = component.types[0];
+
+            switch (componentType) {
+
+                case "street_number": { number.value = component.long_name; break; }
+                case "route": { street.value = component.short_name; break; }
+                case "administrative_area_level_3": { city.value = component.short_name; break; }
+                case "postal_code": { cap.value = component.short_name; break; }
+                case "administrative_area_level_2": { province.value = component.short_name; break; }
+                case "country": { country.value = component.short_name; break; }
+
+            }
+
+        }
+
+        if (country.value == "" || province.value == "" || cap.value == "" || city.value == "" || street.value == "" || number.value == "") {
+            
+            var error = "Indirizzo non valido";
+
+            if (country.value == "") {
+                error += ", manca il paese";
+            } else if (province.value == "") {
+                error += ", manca la provincia";
+            } else if (cap.value == "") {
+                error += ", manca il cap";
+            } else if (city.value == "") {
+                error += ", manca la città";
+            } else if (street.value == "") {
+                error += ", manca la via";
+            } else if (number.value == "") {
+                error += ", manca il numero civico";
+            }
+
+            inputError(input, error);
+            
+        }
+
+    } else {
+
+        inputError(input, 'Indirizzo non valido');
+
+    }
+
+    check();
+
+}
+
+function setPlace(input, country = null, province = null, cap = null, city = null, street = null, number = null) {
+
+    var inputContainer = input.parentElement;
+
+    var countryInput = inputContainer.querySelector('[data-wi-spi="country"]');
+    var provinceInput = inputContainer.querySelector('[data-wi-spi="province"]');
+    var capInput = inputContainer.querySelector('[data-wi-spi="cap"]');
+    var cityInput = inputContainer.querySelector('[data-wi-spi="city"]');
+    var streetInput = inputContainer.querySelector('[data-wi-spi="street"]');
+    var numberInput = inputContainer.querySelector('[data-wi-spi="number"]');
+
+    if (country == null) {
+
+        country = countryInput.value;
+        province = provinceInput.value;
+        cap = capInput.value;
+        city = cityInput.value;
+        street = streetInput.value;
+        number = numberInput.value;
+
+    } else {
+
+        countryInput.value = country;
+        provinceInput.value = province;
+        capInput.value = cap;
+        cityInput.value = city;
+        streetInput.value = street;
+        numberInput.value = number;
+        
+    }
+
+    if (country != "" || province != "" || cap != "" || city != "" || street != "" || number != "") {
+        
+        var address = street+', '+number+', '+city+', '+province+', '+country;
+        input.value = address;
+
+        checkLabel();
+        check();
+
+    }
+
+}
+
+function setGoogleMapsPlace() {
+
+    document.querySelectorAll("[data-wi-search-place='true']").forEach(input => {
+
+        input.disabled = false;
+        
+        var restrictions = JSON.parse(input.dataset.wiRestriction);
+
+        var options = {};
+
+        if (input.dataset.wiRestriction != '[]') { 
+
+            var restrictions = JSON.parse(input.dataset.wiRestriction);
+            options.componentRestrictions = restrictions; 
+        
+        }
+
+        options.fields = [ "address_components" ];
+        options.types = [ "address" ];
+    
+        var googlePlace = new google.maps.places.Autocomplete(input, options);
+
+        input.addEventListener("change", () => { placeNeedCheck(input); });
+        googlePlace.addListener("place_changed", () => { checkInputPlace(input, googlePlace); });
+
+    });
+
+}
+
+function setGoogleMapsApi() {
+
+    if (document.querySelector("[data-wi-search-place]")) {
+
+        var GOOGLE_API_KEY = "AIzaSyAhBslKzmgy6pRrLGyhlN34pN1yQYE1hvI";
+
+        /**
+         * 
+         * Se ci sono degli input Place chiama le API di Google Place
+         * Documentazione: https://developers.google.com/maps/documentation/javascript/place-autocomplete?hl=it
+         * 
+         */
+
+        var script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.async = true;
+        script.src = 'https://maps.googleapis.com/maps/api/js?key='+GOOGLE_API_KEY+'&loading=async&libraries=places&callback=setGoogleMapsPlace';    
+
+        document.head.appendChild(script);
+        
+    }
+
+}

package/src/export/frontend/body-end.js

@@ -4,6 +4,7 @@ import 'script-loader!/src/build/frontend/js/header.js';
 import 'script-loader!/src/build/frontend/js/alert.js';
 import 'script-loader!/src/build/frontend/js/dropdown.js';
 import 'script-loader!/src/build/frontend/js/modal.js';
+import 'script-loader!/src/build/frontend/js/form/place.js';
 import 'script-loader!/src/build/frontend/js/form/select.js';
 import 'script-loader!/src/build/frontend/js/form/send.js';
 import 'script-loader!/src/build/frontend/js/pageSetUp.js';

package/src/export/frontend/head.js

@@ -39,4 +39,5 @@ import '/src/build/frontend/css/components/spinner.css';
 import '/src/build/frontend/css/components/form/input.css';
 import '/src/build/frontend/css/components/form/date.css';
 import '/src/build/frontend/css/components/form/checkbox.css';
+import '/src/build/frontend/css/components/form/place.css';
 import '/src/build/frontend/css/components/form/select.css';