word-games-theme 2.3.9 → 2.4.1

data/assets/css/wordgames-variables.css

@@ -17,4 +17,5 @@
     --light-gray: rgb(137, 137, 137);
     --tooltip-padding: 0.5rem;
     --tooltip-border-style: 0.5rem;
-  }
+  }
+

data/assets/js/wordfinder-home.js

@@ -0,0 +1,198 @@
+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');
+        })
+    })
+})
+
+
+// Define the loadScript function first
+const loadScript = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
+    return new Promise((resolve, reject) => {
+        const scriptEle = document.createElement("script");
+        scriptEle.type = type;
+        scriptEle.async = async;
+        scriptEle.src = FILE_URL;
+
+        // Set additional data as attributes on the script element
+        Object.keys(data).forEach((key) => {
+            scriptEle.setAttribute(`data-${key}`, data[key]);
+        });
+
+        scriptEle.addEventListener("load", () => {
+            resolve({ status: true });
+        });
+
+        scriptEle.addEventListener("error", () => {
+            reject({
+                status: false,
+                message: `Failed to load the script ${FILE_URL}`,
+            });
+        });
+
+        document.body.appendChild(scriptEle);
+    });
+};
+
+// 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)) {
+        const additionalData = {
+            url: "{{site.url}}",
+            range: "{{page.blanktilerange}}"
+        };
+        var p1 = loadScript("/assets/js/wordfinder.js", additionalData)
+            .then((data) => {
+                console.log(data);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }
+}
+checkQueryParam();
+
+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)) {
+        // Additional data to pass to the script
+        const additionalData = {
+            url: "{{site.url}}",
+            range: "{{page.blanktilerange}}"
+        };
+
+        var p1 = loadScript("/assets/js/wordfinder.js", additionalData)
+            .then((data) => {
+                console.log(data);
+                  getData(txtBox.value.toLowerCase());
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }
+});