wonder-image 1.2.0

package/src/build/frontend/js/dropdown.js

@@ -0,0 +1,73 @@
+function toggleDropdown(container) {
+
+    if (container.classList.contains('wi-show')) {
+        closeDropdown(container);
+    } else {
+        openDropdown(container);
+    }
+    
+}
+
+function openDropdown(container) {
+
+    container.classList.add('wi-show'); 
+
+    if (container.querySelector('i.bi-chevron-down')) {
+        container.querySelector('i.bi-chevron-down').classList.add('bi-chevron-up');
+        container.querySelector('i.bi-chevron-down').classList.remove('bi-chevron-down');
+    }
+
+    if (container.querySelector('i.bi-plus')) {
+        container.querySelector('i.bi-plus').classList.add('bi-dash');
+        container.querySelector('i.bi-plus').classList.remove('bi-plus');
+    }
+
+    if (container.querySelector('i.bi-plus-lg')) {
+        container.querySelector('i.bi-plus-lg').classList.add('bi-dash-lg');
+        container.querySelector('i.bi-plus-lg').classList.remove('bi-plus-lg');
+    }
+    
+}
+
+function closeDropdown(container) {
+
+    container.classList.remove('wi-show'); 
+
+    if (container.querySelector('i.bi-chevron-up')) {
+        container.querySelector('i.bi-chevron-up').classList.add('bi-chevron-down');
+        container.querySelector('i.bi-chevron-up').classList.remove('bi-chevron-up');
+    }
+
+    if (container.querySelector('i.bi-dash')) {
+        container.querySelector('i.bi-dash').classList.add('bi-plus');
+        container.querySelector('i.bi-dash').classList.remove('bi-dash');
+    }
+
+    if (container.querySelector('i.bi-dash-lg')) {
+        container.querySelector('i.bi-dash-lg').classList.add('bi-plus-lg');
+        container.querySelector('i.bi-dash-lg').classList.remove('bi-dash-lg');
+    }
+    
+}
+
+function setDropdown() {
+    
+    document.querySelectorAll(".wi-dropdown-btn .wi-switcher").forEach(element => {
+
+        element.onclick = function() { toggleDropdown(element.parentElement); };
+    
+        element.parentElement.onmouseleave = function() { closeDropdown(element.parentElement); };
+    
+    });
+
+    document.querySelectorAll(".wi-dropdown-box .wi-switcher").forEach(element => {
+
+        if (element.parentElement.classList.contains('wi-show')) {
+            openDropdown(element.parentElement);
+        }
+
+        element.onclick = function() { toggleDropdown(element.parentElement); };
+    
+    });
+
+}

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

@@ -0,0 +1,211 @@
+function check() {
+    
+    document.querySelectorAll("form .wi-submit").forEach(button => {
+ 
+        button.removeAttribute("disabled");
+        
+        var inputList = button.form.elements;
+
+        for (let i = 0; i < inputList.length; i++) {
+
+            var input = inputList[i];
+
+            if (input.required) {
+                if (input.type == 'checkbox' || input.type == 'radio') {
+                    if (input.checked == false) { button.setAttribute("disabled", null); }
+                } else {
+                    if (input.value == "") { button.setAttribute("disabled", null); }
+                }
+            }
+
+        }
+
+    })
+
+}
+
+function togglePassword(el, id) {
+
+    var input = document.getElementById(id);
+
+    if (input.type == 'password') {
+        input.type = 'text'
+        el.classList.remove('bi-eye');
+        el.classList.add('bi-eye-slash');
+    }else{
+        input.type = 'password'
+        el.classList.remove('bi-eye-slash');
+        el.classList.add('bi-eye');
+    }
+
+}
+
+function checkNumber(event) {
+
+    event.target.value = event.target.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
+    
+}
+
+function labelPositionTop(event) {
+
+    event.target.parentElement.classList.add('compiled');
+
+}
+
+function labelPosition(event) {
+
+    var container = event.target.parentElement;
+
+    if (event.target.value == '' && event.target !== document.activeElement) {
+        container.classList.remove('compiled');
+    } else {
+        container.classList.add('compiled');
+    }
+
+}
+
+function customDateRange(element) {
+
+    var inputFrom = element.querySelector('input.wi-daterange-from');
+    var inputTo = element.querySelector('input.wi-daterange-to');
+
+    if (inputFrom.value != '') {
+        $('#'+inputTo.id).datepicker('option', 'minDate', inputFrom.value);
+    }
+
+}
+
+function customDateTimeRange(element) {
+
+    var inputFrom = element.querySelector('input.wi-datetimerange-from');
+    var inputTo = element.querySelector('input.wi-datetimerange-to');
+
+    if (inputFrom.value != '') {
+        $('#'+inputTo.id).datetimepicker('option', 'minDate', inputFrom.value);
+    }
+
+}
+
+function checkLabel() {
+
+    document.querySelectorAll("[data-wi-label='true']").forEach(element => {
+        
+        var container = element.parentElement;
+
+        if (element.value == '') {
+            container.classList.remove('compiled');
+        } else {
+            container.classList.add('compiled');
+        }
+        
+    });
+
+}
+
+function checkInputFile(event) {
+
+    var input = event.target;
+
+    var inputContainer = input.parentElement;
+    var errorContainer = inputContainer.querySelector('.alert-error');
+
+    var maxFile = input.dataset.wiMaxFile;
+    var maxSize = input.dataset.wiMaxSize;
+    var prettyMaxSize = ((maxSize/1024)/1024).toFixed(2); // MB
+
+    var prettyErrorFile = "<i class='bi bi-exclamation-triangle'></i> Hai caricato troppi file! Puoi caricare massimo "+maxFile+" file";
+    var prettyErrorSize = "<i class='bi bi-exclamation-triangle'></i> Hai caricato file troppo grandi! Le dimensioni massime sono di "+prettyMaxSize+"Mb";
+
+    var files = input.files;
+
+    inputContainer.classList.remove('input-error');
+    errorContainer.innerHTML = '';
+
+    for (var x in files) {
+
+        if(files[x].size > maxSize){
+
+            inputContainer.classList.add('input-error');
+            errorContainer.innerHTML = prettyErrorSize;
+            input.value = "";
+            break;
+
+        }
+
+    }
+
+    if (files.length > maxFile) {
+
+        inputContainer.classList.add('input-error');
+        errorContainer.innerHTML = prettyErrorFile;
+        input.value = "";
+
+    }
+    
+}
+
+function setInput() {
+
+    document.querySelectorAll("[data-wi-max-file]").forEach(element => {
+        element.addEventListener("change", checkInputFile);
+    });
+
+    document.querySelectorAll("[data-wi-max-size]").forEach(element => {
+        element.addEventListener("change", checkInputFile);
+    });
+    
+    document.querySelectorAll("[data-wi-label='true']").forEach(element => {
+        element.addEventListener("input", labelPosition);
+        element.addEventListener("change", labelPosition);
+        element.addEventListener("focusin", labelPositionTop);
+        element.addEventListener("focusout", labelPosition);
+    });
+
+    document.querySelectorAll("[data-wi-check='true']").forEach(element => {
+        element.addEventListener("keyup", check);
+        element.addEventListener("change", check);
+        element.addEventListener("focusin", check);
+        element.addEventListener("focusout", check);
+    });
+
+    document.querySelectorAll("[data-wi-list-input='true']").forEach(element => {
+        element.addEventListener("keyup", searchInput);
+        element.addEventListener("focusin", searchInput);
+        element.addEventListener("keyup", showList);
+        element.addEventListener("focusout", hideList);
+        element.addEventListener("change", controlList);
+        element.addEventListener("focusout", controlList);
+    });
+
+    document.querySelectorAll("[data-wi-search-input='true']").forEach(element => {
+        element.addEventListener("keyup", showList);
+        element.addEventListener("keyup", searchResults);
+        element.addEventListener("change", controlList);
+        element.addEventListener("focusout", hideList);
+    });
+
+    document.querySelectorAll("[data-wi-search-text='true']").forEach(element => {
+        element.addEventListener("keyup", showList);
+        element.addEventListener("keyup", searchText);
+        element.addEventListener("focusout", hideList);
+    });
+
+    document.querySelectorAll("[data-wi-search-radio='true']").forEach(element => {
+        element.addEventListener("keyup", showList);
+        element.addEventListener("keyup", searchRadio);
+        element.addEventListener("focusout", hideList);
+    });
+
+    document.querySelectorAll("[data-wi-list-value='true']").forEach(element => {
+        element.addEventListener("click", checkInput);
+        element.addEventListener("mousedown", checkInput);
+    });
+
+    document.querySelectorAll("[data-wi-phone='true']").forEach(element => {
+        checkPhone(element);
+    });
+
+    check();
+    setAutonumeric();
+
+}

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

@@ -0,0 +1,155 @@
+function searchInput(event) {
+    
+    var inputId = event.target.id;
+    var inputValue = event.target.value.toLowerCase();
+
+    document.querySelectorAll('#list_'+inputId+' input').forEach(x => {
+        
+        var keyword = x.dataset.wiKeyword.toLowerCase();
+
+        if (keyword.includes(inputValue)) {
+            x.parentElement.style.display = 'block';
+        }else{
+            x.parentElement.style.display = 'none';
+        }
+        
+    });
+
+}
+
+function checkInput(event) {
+    
+    var container = event.target;
+
+    if (container.localName == 'div') {
+        var checkbox = container.querySelector('input');
+    } else {
+        var checkbox = container;
+    }
+
+    var inputId = checkbox.dataset.wiInput;
+
+    checkbox.checked = true;
+
+    var input = document.querySelector('#'+inputId);
+    input.value = checkbox.dataset.wiName;
+
+}
+
+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();
+
+    if (v != '') {
+        if (l.includes(v)) {
+
+            spanAlert.innerHTML = "";
+            container.classList.remove('input-error');
+            element.setCustomValidity('');
+
+            container.querySelectorAll('input[type=radio]').forEach(e => {
+                var name = e.dataset.wiName;
+                if (name.toLowerCase() == v) {
+                    e.checked = true;
+                }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;
+            });
+    
+        }
+    }
+
+}
+
+function showList(event) { event.target.parentElement.classList.add('wi-list-active'); }
+
+function hideList(event) { event.target.parentElement.classList.remove('wi-list-active'); }
+
+function searchText(event) { searchResults(event, "text"); }
+
+function searchRadio(event) { searchResults(event, "radio"); }
+
+function searchResults(event, result) {
+
+    var input = event.target;
+
+    var container = input.parentElement;
+
+    var list = container.querySelector('.wi-input-list');
+    var listValue = list.querySelector('.wi-input-list-body');
+    var listFooter = list.querySelector('.wi-input-list-footer');
+
+    var inputId = input.id;
+    var inputName = input.dataset.wiName;
+    var inputValue = input.value.toLowerCase();
+
+    var inputUrl = input.dataset.wiSearchUrl;
+
+    if (result == 'radio') {
+        var radioName = "name='"+inputName+"'";
+    } else {
+        var radioName = "";
+    }
+
+    $.ajax({
+        type: "POST",
+        url: inputUrl,
+        data: { 
+            post: 'true',
+            search: inputValue
+        }, 
+        success: function (data) {
+
+            const response = JSON.parse(data);
+            const nResponse = response.length;
+            
+            var listHTML = "";
+
+            for (let index = 0; index < nResponse; index++) {
+
+                const value = response[index]['value'];
+                const label = response[index]['label'];
+                const inputValue = response[index]['input-value'];
+
+                listHTML += "<div class='wi-input-list-value' data-wi-list-value='true'><input data-wi-input='"+inputId+"' type='radio' "+radioName+" data-wi-name='"+inputValue+"' value='"+value+"'>"+label+"</div>";
+
+            }
+
+            if (inputValue == '') {
+                listFooter.innerHTML = "Cosa stai cercando?";
+            } else if (nResponse == 1) {
+                listFooter.innerHTML = nResponse+" risultato";
+            } else if (nResponse != 1) {
+                listFooter.innerHTML = nResponse+" risultati";
+            }
+
+            listValue.innerHTML = listHTML;
+
+            document.querySelectorAll("[data-wi-list-value='true']").forEach(element => {
+                element.addEventListener("click", checkInput);
+                element.addEventListener("mousedown", checkInput);
+            });
+
+        },
+        error: function (XMLHttpRequest) {
+            ajaxRequestError(XMLHttpRequest);
+            loadingSpinner();
+        }
+    });
+
+}

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

@@ -0,0 +1,108 @@
+var x, i, j, l, ll, selElmnt, a, b, c;
+
+// Look for any elements with the class "custom-select":
+x = document.querySelectorAll("[data-wi-select='true']");
+l = x.length;
+
+for (i = 0; i < l; i++) {
+
+    selElmnt = x[i].getElementsByTagName("select")[0];
+    ll = selElmnt.length;
+
+    // For each element, create a new DIV that will act as the selected item:
+    a = document.createElement("DIV");
+    a.setAttribute("class", "select-selected wi-input");
+    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
+    x[i].appendChild(a);
+
+    // For each element, create a new DIV that will contain the option list:
+    b = document.createElement("DIV");
+    b.setAttribute("class", "select-items wi-input-list no-scrollbar");
+
+    for (j = 0; j < ll; j++) {
+
+        // For each option in the original select element, create a new DIV that will act as an option item:
+        c = document.createElement("DIV");
+        c.id = selElmnt.options[j].value;
+        c.setAttribute("class", "wi-input-list-value");
+        c.innerHTML = selElmnt.options[j].innerHTML;
+
+        // Se è impostato un valore di default selezionalo
+        if (selElmnt.value != undefined) { if (c.id == selElmnt.value) { c.classList.add("same-as-selected"); } }
+
+        c.addEventListener("click", function(e) {
+
+            // When an item is clicked, update the original select box, and the selected item:
+            var y, i, k, s, h, sl, yl;
+            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
+            sl = s.length;
+            selElmnt.value = this.id;
+            h = this.parentNode.previousSibling;
+
+            for (i = 0; i < sl; i++) {
+                if (s.options[i].innerHTML == this.innerHTML) {
+                    s.selectedIndex = i;
+                    h.innerHTML = this.innerHTML;
+                    y = this.parentNode.getElementsByClassName("same-as-selected");
+                    yl = y.length;
+                    for (k = 0; k < yl; k++) {
+                        y[k].classList.remove("same-as-selected");
+                    }
+                    this.setAttribute("class", "wi-input-list-value same-as-selected");
+                    break;
+                }
+            }
+
+            h.click();
+
+        });
+
+        // Passa le funzioni onchange dal select alle nuove opzioni
+        c.onclick = selElmnt.onchange;
+        c.mousedown = selElmnt.onchange;
+
+        b.appendChild(c);
+
+    }
+
+    x[i].appendChild(b);
+
+    a.addEventListener("click", function(e) {
+
+        // When the select box is clicked, close any other select boxes, and open/close the current select box
+        e.stopPropagation();
+        closeAllSelect(this);
+        this.classList.toggle("select-arrow-active");
+        this.parentNode.classList.toggle("wi-list-active");
+        check();
+
+    });
+
+}
+
+function closeAllSelect(elmnt) {
+
+    // A function that will close all select boxes in the document, except the current select box:
+    var x, y, i, xl, yl, arrNo = [];
+    x = document.getElementsByClassName("select-items");
+    y = document.getElementsByClassName("select-selected");
+    var container = document.querySelector(".wi-input-container.wi-list-active");
+    xl = x.length;
+    yl = y.length;
+
+    for (i = 0; i < yl; i++) {
+        if (elmnt == y[i]) {
+            arrNo.push(i)
+        }else{
+            y[i].classList.remove("select-arrow-active");
+        }
+    }
+
+    if (container != null) {
+        container.classList.remove("wi-list-active");
+    }
+
+}
+
+// If the user clicks anywhere outside the select box, then close all select boxes:
+document.addEventListener("click", closeAllSelect);

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

@@ -0,0 +1,137 @@
+function formToArray(formElements) {
+
+    const ARRAY = {};
+
+    for (let i = 0; i < formElements.length; i++) {
+
+        var add = false;
+
+        var input = formElements[i];
+
+        if (input.type == 'checkbox' || input.type == 'radio') {
+            if (input.checked == true) { var add = true; }
+        } else {
+            if (input.value != "") { var add = true;}
+        }
+
+        if (add) {
+
+            var inputName = input.name;
+            var inputValue = input.value;
+
+            if (inputName.includes("[]")) {
+
+                inputName = inputName.replace("[]", "");
+
+                if (inputName in ARRAY) {
+                    inputName = inputName.replace("[]", "");
+                    ARRAY[inputName].push(inputValue);
+                } else {
+                    inputName = inputName.replace("[]", "");
+                    ARRAY[inputName] = [];
+                    ARRAY[inputName].push(inputValue);
+                }
+                
+            } else {
+
+                if (inputName in ARRAY) {
+
+                } else {
+                    ARRAY[inputName] = inputValue;
+                }
+
+            }
+
+        }
+
+    }
+
+    return ARRAY;
+    
+}
+
+function prettyFormResponse(data) {
+
+    if (data != '') {
+        
+        console.log('ERRORE FORM: '+data);
+
+        var container = document.querySelector("#loading-spinner .center");
+        container.classList.add("w-80");
+        container.innerHTML = '<div class="title-big a-c"><i class="bi bi-x-circle tx-danger"></i></div><div class="subtitle mt-8 a-c">C\'è stato un problema con l\'invio della tua richiesta</div><div class="c-w mt-10"><a onclick="location.reload();" class="btn btn-primary c-w">Riprova</a></div>';
+
+    } else {
+        
+        var container = document.querySelector("#loading-spinner .center");
+        container.classList.add("w-80");
+        container.innerHTML = '<div class="title-big a-c"><i class="bi bi-check2-circle tx-success"></i></div><div class="subtitle mt-8 a-c">La tua richiesta è stata inviata con successo!</div><div class="c-w mt-10"><a onclick="location.reload(); " class="btn btn-primary c-w">Torna al sito</a></div>';
+
+    }
+    
+}
+
+function sendForm(button, url, responseFunction = prettyFormResponse) {
+
+    loadingSpinner();
+
+    const VALUES = formToArray(button.form.elements);
+    var form = JSON.stringify(VALUES);
+
+    $.ajax({
+        type: "POST",
+        url: url,
+        data: { 
+            post: 'true',
+            form: form
+        }, 
+        success: function (data) {
+
+            if (responseFunction != null) {
+                if (typeof responseFunction === 'function') {
+                    responseFunction(data);
+                } else {
+                    loadingSpinner();
+                }
+            }
+
+        },
+        error: function (XMLHttpRequest) {
+            ajaxRequestError(XMLHttpRequest);
+            loadingSpinner();
+        }
+    });
+
+}
+
+function formUpload(form, url, responseFunction = prettyFormResponse) {
+
+    loadingSpinner();
+    
+    var formData = new FormData(form);
+    formData.append('post', 'true');
+    
+    $.ajax({
+        type: "POST",
+        url: url,
+        data: formData,
+        contentType: false,
+        cache: false,
+        processData:false, 
+        success: function (data) {
+
+            if (responseFunction != null) {
+                if (typeof responseFunction === 'function') {
+                    responseFunction(data);
+                } else {
+                    loadingSpinner();
+                }
+            }
+
+        },
+        error: function (XMLHttpRequest) {
+            ajaxRequestError(XMLHttpRequest);
+            loadingSpinner();
+        }
+    });
+
+}

package/src/build/frontend/js/header.js

@@ -0,0 +1,12 @@
+function menuMobile(hamburger = "#hamburger", navMobile = "#nav-mobile") { 
+            
+    if (hamburger != null) { document.querySelector(hamburger).classList.toggle("click"); }
+    if (navMobile != null) { document.querySelector(navMobile).classList.toggle("show"); }
+
+    if (document.querySelector(hamburger).classList.contains("click")) {
+        disableScroll();
+    } else {
+        enableScroll();
+    }
+
+}