word-games-theme 2.3.8 → 2.4.0

data/assets/css/wordgames-theme.css

@@ -18,6 +18,56 @@ body {
     overflow-x: hidden !important;
 }
 
+/* placeholder loader css */
+
+.placeholder-loader{
+    display: flex;
+    justify-content: center;
+  }
+
+  .skeleton-box {
+    display: inline-block;
+    height: 1em;
+    position: relative;
+    overflow: hidden;
+    background-color: #DDDBDD;
+  }
+
+  .skeleton-box::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(90deg,
+        rgba(255, 255, 255, 0) 0,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.5) 60%,
+        rgba(255, 255, 255, 0));
+    animation: shimmer 5s infinite;
+    content: '';
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .o-media {
+    display: flex;
+  }
+
+  .o-media__body {
+    flex-grow: 1;
+  }
+
+  .o-vertical-spacing>*+* {
+    margin-top: 0.75em;
+  }
+
+
 /* header && navbar css */
 header {
     width: 100%;
@@ -87,6 +137,45 @@ header {
 }
 
 
+/* authors contributorss css */
+.featurePageAuthor {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+.authors-list a {
+    color: #4d4d4d;
+}
+.featurePageAuthor .author-meta {
+    width: 500px;
+    margin: 0 auto;
+    padding-bottom: 5rem;
+}
+.featurePageAuthor .author-img{
+    width: 100px;
+    height: 100px;
+    border-radius: 100%;
+}
+.featurePageAuthor .author_bio {
+    font-size: 16px;
+}
+.featurePageAuthor .author-meta .authorName {
+    font-size: 20px;
+    padding: 1rem 0px;
+    font-weight: 900;
+    text-align: center;
+}
+.authors-heading{
+    font-size: 30px;
+}
+.contributor {
+    width: 100px;
+}
+
+
+
 /* Footer design css */
 .footer-section {
     padding: 20px 0px;
@@ -224,3 +313,32 @@ header {
 .footer-bottom .modal .close {
     font-size: 3rem;
 }
+
+
+/* ads css */
+.top-banner-ad{
+    display: none;
+    width: 100%;
+    /* height: 80px; */
+}
+
+.bottom-banner-ad{
+    width: 100%;
+    height: 80px;
+    display: none;
+    position: fixed;
+    bottom: 0;
+    z-index: 999;
+}
+@media (max-width: 768px) {
+    .top-banner-ad,.bottom-banner-ad{
+        display: block;
+    }
+    .authors-list {
+        padding: 25px;
+    }
+    .featurePageAuthor .author-meta {
+        width: 100%;
+    }
+    
+}

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);
+            });
+    }
+});