word-games-theme 2.4.3 → 2.4.4

data/assets/js/xletter-home.js

@@ -0,0 +1,214 @@
+let txtBox = document.querySelector('.txtBox')
+txtBox.focus()
+let letterCloseButton = document.querySelector('.letter-close-button')
+
+let startsWith = document.getElementById("startsWith");
+let mustInclude = document.getElementById("mustInclude");
+let endsWith = document.getElementById("endsWith");
+let exculdeWith = document.getElementById("exculdeWith");
+let inculdeWith = document.getElementById("inculdeWith");
+let wordLength = document.getElementById("wordLength");
+
+// // when typing on input
+txtBox.addEventListener('input', (e) => {
+    if (e.target.value === "") {
+        letterCloseButton.style.display = "none"
+    }
+    else {
+        letterCloseButton.style.display = "block"
+    }
+    e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "")
+    let rangeOfBlankTile = 3
+    if (rangeOfBlankTile === "") {
+        rangeOfBlankTile = 3
+    }
+    e.target.value = e.target.value.replace(/ /g, '?')
+    let data = []
+    data = e.target.value.split('').filter((i) => i === '?')
+    if (data.length > rangeOfBlankTile) {
+        e.target.value = e.target.value.replace(/\?$/, '')
+    }
+})
+letterCloseButton.addEventListener("click", () => {
+    txtBox.value = ""
+    letterCloseButton.style.display = "none"
+})
+//tooltips for advanced filter
+const filterInputs = document.querySelectorAll('.filter_val');
+Array.from(filterInputs).forEach((item) => {
+    item.addEventListener("input", (e) => {
+        const inputValue = e.target.value;
+        const parentElement = e.target.parentElement;
+        const imgElement = parentElement.querySelector('img');
+        const tooltipElement = parentElement.querySelector('.filter-tooltip');
+
+        if (inputValue == "") {
+            imgElement.src = "/assets/images/questionmark.svg"
+            setTimeout(() => {
+                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            }, 100);
+            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+
+        } else {
+            item.nextElementSibling.removeAttribute("data-tip")
+            imgElement.src = "/assets/images/close-btn.svg"
+            tooltipElement.style.setProperty('--tooltip-padding', '0');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+        }
+        item.nextElementSibling.addEventListener("click", () => {
+            e.target.value = ""
+            imgElement.src = "/assets/images/questionmark.svg"
+            setTimeout(() => {
+                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            }, 100);
+            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+        })
+    })
+})
+const loadResource = (FILE_URL, async = true, type = "text/javascript") => {
+    return new Promise((resolve, reject) => {
+        let resourceEle;
+
+        if (type === "text/javascript") {
+            resourceEle = document.createElement("script");
+        } else if (type === "text/css") {
+            resourceEle = document.createElement("link");
+            resourceEle.rel = "stylesheet";
+        } else {
+            reject({
+                status: false,
+                message: `Unsupported resource type: ${type}`,
+            });
+            return;
+        }
+
+        resourceEle.type = type;
+        resourceEle.async = async;
+        resourceEle.href = FILE_URL;
+
+
+        resourceEle.addEventListener("load", () => {
+            resolve({ status: true });
+        });
+
+        resourceEle.addEventListener("error", () => {
+            reject({
+                status: false,
+                message: `Failed to load the resource ${FILE_URL}`,
+            });
+        });
+
+        if (type === "text/javascript") {
+            document.body.appendChild(resourceEle);
+        } else if (type === "text/css") {
+            document.head.appendChild(resourceEle);
+        }
+    });
+};
+const formElement = document.querySelector("#form");
+formElement.addEventListener("submit", function (e) {
+    e.preventDefault();
+
+    document.querySelector(".fillterWrapper").classList.add("hide")
+    let selectedDictionary = document.querySelector(".select_dropDown2").value;
+    if (history.pushState) {
+        var newurl =
+            window.location.protocol +
+            "//" +
+            window.location.host +
+            window.location.pathname +
+            "?" +
+            "search" +
+            "=" +
+            txtBox.value.toLowerCase() +
+            "&" +
+            "dictionary" +
+            "=" +
+            selectedDictionary +
+            "&" +
+            "prefix" +
+            "=" +
+            startsWith.value +
+            "&" +
+            "contains" +
+            "=" +
+            mustInclude.value +
+            "&" +
+            "suffix" +
+            "=" +
+            endsWith.value +
+            "&" +
+            "exclude" +
+            "=" +
+            exculdeWith.value +
+            "&" +
+            "include" +
+            "=" +
+            inculdeWith.value +
+            "&" +
+            "length" +
+            "=" +
+            wordLength.value;
+        window.history.pushState({ path: newurl }, "", newurl);
+
+        const params = new URLSearchParams(window.location.search);
+        serachValue = params.get("search");
+        prefixValue = params.get("prefix");
+        containsValue = params.get("contains");
+        suffixValue = params.get("suffix");
+        exculdeValue = params.get("exclude");
+        includeValue = params.get("include");
+        lengthValue = params.get("length");
+        dictonary = params.get("dictionary");
+
+        gtag("event", "page_view", {
+            page_location: window.location.pathname + location.search,
+        });
+    }
+
+    const paramName = 'search';
+    if (new URLSearchParams(window.location.search).has(paramName)) {
+        loadResource("/assets/css/wordfinder-result.css", true, "text/css")
+            .then((data) => {
+                console.log("CSS loaded:", data);
+                // Once the CSS is loaded, create the script element for JavaScript
+                const jsScript = document.createElement("script");
+                jsScript.src = "/assets/js/xletter-result.js";
+                jsScript.onload = () => {
+                    getData(txtBox.value.toLowerCase());
+                };
+                document.body.appendChild(jsScript);
+            })
+            .catch((error) => {
+                console.error("Error loading resource:", error);
+            });
+    }
+});
+
+// Now you can use the loadScript function with additional data
+function checkQueryParam() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const paramName = 'search';
+    if (urlParams.has(paramName)) {
+        loadResource("/assets/css/wordfinder-result.css", true, "text/css")
+            .then((data) => {
+                console.log("CSS loaded:", data);
+                // Once the CSS is loaded, create the script element for JavaScript
+                const jsScript = document.createElement("script");
+                jsScript.src = "/assets/js/xletter-result.js";
+                jsScript.onload = () => {
+                    console.log("JS loaded");
+                    getData(txtBox.value.toLowerCase());
+                };
+                document.body.appendChild(jsScript);
+            })
+            .catch((error) => {
+                console.error("Error loading resource:", error);
+            });
+    }
+}
+checkQueryParam();
+
+