wonder-image 1.2.7 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wonder-image",
-  "version": "1.2.7",
+  "version": "1.4.3",
   "description": "",
   "private": false,
   "scripts": {

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

@@ -197,6 +197,7 @@ function setInput() {
     document.querySelectorAll("[data-wi-list-input='true']").forEach(element => {
         element.addEventListener("keyup", searchInput);
         element.addEventListener("focusin", searchInput);
+        element.addEventListener("focusin", showList);
         element.addEventListener("keyup", showList);
         element.addEventListener("focusout", hideList);
         element.addEventListener("change", controlList);
@@ -234,5 +235,6 @@ function setInput() {
     check();
     setAutonumeric();
     setGoogleMapsApi();
+    setInputCountry();
 
 }

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

@@ -17,6 +17,8 @@ function searchInput(event) {
 
 }
 
+// const event_CheckInput = new Event("wi-check-input");
+
 function checkInput(event) {
     
     var container = event.target;
@@ -33,6 +35,9 @@ function checkInput(event) {
 
     var input = document.querySelector('#'+inputId);
     input.value = checkbox.dataset.wiName;
+    // input.dispatchEvent(event_CheckInput);
+
+    check();
 
 }
 
@@ -40,7 +45,6 @@ function controlList(event) {
 
     var element = event.target;
     var container = event.target.parentElement;
-    var spanAlert = container.querySelector('.alert-error');
     
     var l = element.dataset.wiListArray.split('|');
     var v = element.value.toLowerCase();
@@ -48,34 +52,33 @@ function controlList(event) {
     if (v != '') {
         if (l.includes(v)) {
 
-            spanAlert.innerHTML = "";
-            container.classList.remove('input-error');
-            element.setCustomValidity('');
+            removeInputError(element);
 
             container.querySelectorAll('input[type=radio]').forEach(e => {
+
                 var name = e.dataset.wiName;
+
                 if (name.toLowerCase() == v) {
                     e.checked = true;
-                }else{
+                } else {
                     e.checked = false;
                 }
+
             });
     
         } else {
     
-            spanAlert.innerHTML = "<i class='bi bi-exclamation-triangle'></i> Campo non corretto!";
-            element.setCustomValidity('Non valido');
-            container.classList.add('input-error');
-    
-            container.querySelectorAll('input[type=radio]:checked').forEach(e => {
-                e.checked = false;
-            });
+            inputError(element, 'Campo non corretto!')
+            container.querySelectorAll('input[type=radio]:checked').forEach(e => { e.checked = false; });
     
         }
     }
 
+    check();
+
 }
 
+
 function showList(event) { event.target.parentElement.classList.add('wi-list-active'); }
 
 function hideList(event) { event.target.parentElement.classList.remove('wi-list-active'); }
@@ -152,4 +155,75 @@ function searchResults(event, result) {
         }
     });
 
+}
+
+function textListValue (input, value) {
+
+    var form = input.form;
+    var inputName = input.dataset.wiName.replace('-text', '');
+
+    if (form.querySelector('input[name="'+inputName+'"][value="'+value+'"]')) {
+        form.querySelector('input[name="'+inputName+'"][value="'+value+'"]').click();
+        checkLabel();    
+    }
+    
+}
+
+function textListOptions(input, options) {
+            
+    var listHTML = "";
+    var listArray = [];
+
+    var form = input.form;
+    var inputId = input.id;
+    var inputAttribute = input.dataset.wiInputAttribute;
+    var inputLabel = input.labels[0];
+    var inputName = input.dataset.wiName.replace('-text', '');;
+
+    var listContainer = form.querySelector('#list_'+inputId);
+
+    input.dataset.wiListArray = "";
+    listContainer.innerHTML = "";
+
+    for (var optionValue in options) {
+
+        var optionId = "value_"+code();
+        var optionLabel = options[optionValue];
+
+        listArray.push(optionLabel);
+        
+        listHTML += "<div class='wi-input-list-value' data-wi-list-value='true'><input id='"+optionId+"' data-wi-keyword='"+optionValue+" "+optionLabel+"' data-wi-input='"+inputId+"' data-wi-name='"+optionLabel+"' type='radio' name='"+inputName+"' value='"+optionValue+"'>"+optionLabel+"</div>";
+
+    }
+
+    if (listHTML == "") {
+
+        input.required = false;
+        input.disabled = true;
+        inputLabel.innerHTML = inputLabel.innerHTML.replace('*', '');
+
+    } else {
+
+        if (inputAttribute.indexOf('required') != '-1') { 
+
+            input.required = true;
+
+            if (inputLabel.innerHTML.indexOf('*') == '-1') { 
+                inputLabel.innerHTML = inputLabel.innerHTML+'*' 
+            }
+
+        }
+
+        input.dataset.wiListArray = listArray.join('|').toLowerCase();
+        listContainer.innerHTML = listHTML;
+
+    }
+
+    listContainer.querySelectorAll("[data-wi-list-value='true']").forEach(element => {
+        element.addEventListener("click", checkInput);
+        element.addEventListener("mousedown", checkInput);
+    });
+
+    checkLabel();
+
 }

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

@@ -173,4 +173,80 @@ function setGoogleMapsApi() {
         
     }
 
+}
+
+
+function setInputCountry() {
+
+    document.querySelectorAll("[data-wi-input-country='true']").forEach(element => {
+        element.addEventListener("change", searchStates);
+        element.addEventListener("focusout", searchStates);
+    });
+
+}
+
+function setCountryState(input, country, state) {
+
+    textListValue(input, country);
+    searchStates(input, state);
+    
+}
+
+function searchStates(event, stateValue = null) {
+
+    if (typeof event.target !== "undefined") {
+        var inputCountry = event.target;
+    } else {
+        var inputCountry = event;
+    }
+    
+    var form = inputCountry.form;
+    var inputCountryName = inputCountry.dataset.wiName.replace('-text', '');
+    var inputStateName = inputCountry.dataset.wiInputState;
+
+    var inputState = form.querySelector('input[data-wi-name="'+inputStateName+'-text"]');
+
+    inputState.disabled = true;
+    inputState.value = "";
+
+    delay(100).then(() => {
+
+        if (form.querySelector('input[name="'+inputCountryName+'"]:checked') != null) {
+
+            loadingSpinner();
+
+            var country = form.querySelector('input[name="'+inputCountryName+'"]:checked');
+        
+            $.ajax({
+                type: "POST",
+                url: pathApp+'/api/states.php',
+                data: { 
+                    post: 'true',
+                    country: country.value
+                }, 
+                success: function (data) {
+
+                    const response = JSON.parse(data);
+
+                    textListOptions( inputState, response );
+
+                    inputState.disabled = false;
+
+                    if (stateValue != null && stateValue != "") { textListValue(inputState, stateValue); }
+
+                    loadingSpinner();
+
+                },
+                error: function (XMLHttpRequest) {
+
+                    ajaxRequestError(XMLHttpRequest);
+                    loadingSpinner();
+
+                }
+            });
+
+        }
+
+    });
+
 }

package/src/build/global/js/utility.js

@@ -85,4 +85,10 @@ function isMobile() {
         return false;
     }
     
+}
+
+function delay(time) {
+
+    return new Promise(resolve => setTimeout(resolve, time));
+
 }