word-games-theme 2.6.8 → 2.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 137fe43b5869a4d3dbbd7b1a67da8b8cd3dbf58e76db6eb2c425f57b114edfb8
-  data.tar.gz: 85cfa82687767c010b3286fef9afc21bdbb969d036291b73a15c4fdd602c0c97
+  metadata.gz: 6211980f468bd7efdc4bf3e06ceb15354885be1a9f3194a41e60efdfef536c5b
+  data.tar.gz: e341aa5d5700467ad2c1e920b77866f8633c9916587aa02415ff34eebdf631a9
 SHA512:
-  metadata.gz: 8f05e34319a8114f9e5e66e4275b9944226e648929d55c3b3e8ab4faabade67587d551af5e89b7188393e4746ab3a8c793c9d84619fe78947e2980ae5b1af23c
-  data.tar.gz: 2c21976c0eb1e9f0f28dc62dea0df68d0fcc3902c80338752f9e1474926043b88284568c5ef7e70a9a26df1539bc48760f375beea915bffaea669bfa1ec3beff
+  metadata.gz: e3298f7f2a8f849e740c51918e0c6d0947f5203c64f2aab6612be1276b6ab7924d5736581c4d4930a20465eee1020c68aa0f4e4a2a3eb08a6cba0249e9af448c
+  data.tar.gz: dc3e8ad7318eb821776787cac506ef8659f80e91cbfcf39c3cfd14ce655e0303d27153bab3fb19fdb55fb089df61b93df3afc07ab0b386e1fed2525f2603f476

data/_includes/wordgames/advanced-filter/advanced-filter.html

@@ -5,6 +5,8 @@
     </button>
 </div>
 
+
+
 <div class="fillterWrapper my-5 filterShow">
     <div class="startsWith">
         <input class="filter_val" autocomplete="off" type="text" id="startsWith" placeholder="Starts with" value=""

data/_includes/wordgames/header/header.html

@@ -19,7 +19,7 @@
         {% endif %}
         <button id="button-toggle" class="navbar-toggler" type="button" data-toggle="collapse"
             data-target="#navbarSupportedContent" aria-label="bars-toggle-icon">
-            <img src="/assets/images/hamburger-menu.svg" alt="hamburger-menu">
+            <img src="/assets/images/hamburger-menu.svg" alt="hamburger-menu" width="30px" height="30px">
         </button>
         <div class="mobile-top-bar collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
             <div class="navbar-nav">

data/_includes/wordgames/headings/headings.html

@@ -5,6 +5,8 @@
 <div class="mt-4 top-banner-ad"></div>
 <div class="mt-4 bottom-banner-ad"></div>
 <div class="container">
+ 
+    
     <div class="pageHeading text-center" style="margin:22px 0px">
         <h1 class="heading pb-0 mb-3">
             {{dataToShow.h1}}</h1>

data/_includes/wordgames/search-box/search-box.html

@@ -1,4 +1,5 @@
 {%- if site.noResultPage or page.noResultPage -%}
+
 <div class="serachSection" data-url="{{site.url}}" data-range="{{page.blanktilerange}}" data-letter="{{page.letter}}" data-ablank="{{page.ablank}}">
     <div class="position-relative serachBox">
         <form id='form' method="GET">
@@ -6,9 +7,9 @@
                 <div class="txt-box-container" style="position: relative;">
                     <input type="text"
                         placeholder="{% if page.size > 15 %}Enter up to {{page.size}} letters?{% else %}Enter up to 15 letters?{% endif %}"
-                        class="txtBox" value='' name="search"
+                        class="txtBox" name="search"
                         maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}"
-                        autocomplete="off">
+                        autocomplete="off" value="{{page.value}}">
                     <div class="letter-close-button">
                       <img width="40px" height="40px"  src="/assets/images/close-button.svg" alt="close-btn">
                     </div>
@@ -39,6 +40,7 @@
 
 {%- else -%}
 <div class="container-fluid" id="containerWd">
+  
     <div class="serachSection">
         <div class="position-relative serachBox">
             <form action="{% if page.url == '/' %}/result{% else %}{{page.url}}/result{% endif %}" id='form'

data/_includes/wordgames/xyzpages/xyz-words.html

@@ -14,7 +14,7 @@
             <div class="wordCount"><strong>
                     {{dataToShow.wordLength}}
                 </strong></div>
-        
+    
             <div class="d-none tab_link_wrapper" style="position: relative;">
                 <div id="tab-scroll" class="tab-scroll flex-row">
                     <input type="button" name="" id="prev" class="prev tabsBg noOutline cursorPointer" value=" "
@@ -41,7 +41,7 @@
             </div>
             <div class="wrapper_dropDown mt-3 d-flex justify-content-end" style="gap:10px;">
                 <div class="letter-length">
-                    <select class="form-select length-select" onchange="Filtering(2)">
+                    <select class="form-select length-select xyz-length-select" onchange="Filtering(2)">
                         <option selected="true" hidden>Letter Length</option>
                         {%- for scrabblewords in dataToShow.words-%}
                         {%- for item in scrabblewords %}
@@ -50,12 +50,10 @@
                         {%- endif -%}
                         {%- endfor -%}
                         {%- endfor -%}
-
-
                     </select>
                 </div>
                 <div id="sort-select">
-                    <select class="form-select sort-select" id="select_dropDown">
+                    <select class="form-select xyz_select_dropDown sort-select" id="select_dropDown">
                         <option selected="true" hidden id="alpha" value="alpha">Sort by</option>
                         <option id="alpha" value="alpha">A-Z</option>
                         <option id="alpha" value="alpha">Z-A</option>
@@ -65,7 +63,7 @@
             </div>
         </div>
 
-        <div class="main">
+        <div class="xyz-main-content main">
             {%- for scrabblewords in dataToShow.words-%}
             {%- for item in scrabblewords %}
             {%- if forloop.index == 1 -%}
@@ -78,11 +76,12 @@
                     <ul class="ul list-unstyled">
                         {%- for item in scrabblewords %}
                         {%- assign value = item.word -%}
-                        <a class="anchor__style" title="Lookup python in Dictionary" target="_blank"
-                            href="/word-meaning?search={{item.word}}">
-                            <li class="list_word">{{item.word}}
+                        <a class="anchor__style" title="Lookup {{value}} in Dictionary" target="_blank" href="/word-meaning?search={{item.word}}">
+                            <li class="list_word">
+                                <span>{{item.word}}</span>
                                 <span class="points" value="14" style="position:relative; top:4px; font-size:12px">
-                                    {{item.points}}</span>
+                                    {{item.points}}
+                                </span>
                             </li>
                         </a>
                         {%- endfor -%}

data/_includes/wordgames/xyzpages/xyz.html

@@ -1,75 +1,12 @@
 {% assign file = page.fileName %}
 {% assign lang = page.lang %}
 {% assign dataToShow = site.data.[page.folderName][lang][file] %}
-
 {%- assign CustomColor = site.data.theme.colors -%}
-
-<style>
-    .sticky_nav {
-        position: sticky;
-        width: inherit;
-        top: 58px;
-        background-color: #fff;
-        z-index: 99;
-    }
-</style>
 <!-- start commonPage as LandingPage -->
-<section class="sticky_nav">
-    <div class="pageHeading text-center pt-5">
-        <h1 class="heading m-0 pb-0">
-            {{dataToShow.h1}}</h1>
-        {%- if dataToShow.h2 -%}
-        <h2>
-            {{dataToShow.h2}}</h2>
-        {%- endif -%}
-    </div>
-    <div class="serachSection">
-        <div class="position-relative serachBox">
-            <form action="{{page.url}}/result" id='form'>
-                <div class="container" id="containerWd">
-                    <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
-                        placeholder="Enter up to 15 letters?" class="txtBox" name="search" maxlength="15"
-                        value={{page.value}} required>
-                    <input
-                        style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};"
-                        type="submit" class="serachBtn" id="serach" value>
-                        <div class="letter-close-button">
-                            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none"
-                                xmlns="http://www.w3.org/2000/svg">
-                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                                <g id="SVGRepo_iconCarrier">
-                                    <path
-                                        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z"
-                                        fill="#292D32"></path>
-                                </g>
-                            </svg>
-                        </div>
-                        <span class="d-none focus-border">
-                            <i></i>
-                        </span>
-                    <div class="dictonaryDropdown">
-                        <!-- <div class="dictonaryDropdown"> -->
-                        <select class="form-select select_dropDown2" name="dictionary"
-                            aria-label="Default select example">
-                            <option value="Dictionary">Dictionary</option>
-                            <option value="twl06" id="twl06">TWL06 (US, Canada, Thailand)</option>
-                            <option selected value="sowpods" id="sowpods">SOWPODS (Uk and Others)</option>
-                            <option value="wwf" id="wwf">Enable (Words With Friends)</option>
-                        </select>
-                        <!-- </div> -->
-                    </div>
-                </div>
-
-                <div class="container">
-                    {%- include wordgames/advanced-filter/advanced-filter.html -%}
-                </div>
-
-
-            </form>
-        </div>
-    </div>
-</section>
+<div class="main-header m-0">
+    {% include wordgames/headings/headings.html %}
+    {% include wordgames/search-box/search-box.html %}
+</div>
 <div class="container" id="containerWd">
     {% include wordgames/xyzpages/xyz-words.html %}
 </div>

data/_layouts/wordgames-xyz.html

@@ -93,6 +93,7 @@
     <div class="wordgametheme-sidebar-right"></div>
     {%- endif -%}
 
+    
     {%- include wordgames/xyzpages/xyz.html -%}
 
     {% include wordgames/featurehighlights/featurehighlights.html %}
@@ -110,8 +111,6 @@
 
     {%- include wordgames/rating/rating.html -%}
 
-    <!-- {%- include share/socialshare.html -%} -->
-
     {% include wordgames/adblocker/adblocker.html %}
 
     {% include wordgames/xyzpages/xyzFooter.html %}
@@ -119,7 +118,6 @@
 
     <script defer src="/assets/js/wordgames-xyz.js"></script>
     <script defer src="/assets/js/theme.js"></script>
-    <script defer src="/assets/js/wordgames-home.js"></script>
   
     {%- include wordgames/scripts/scripts.html -%}
 </body>

data/assets/js/wordfinder-home.js

@@ -121,98 +121,100 @@ const loadResource = (FILE_URL, data = {}, async = true, type = "text/javascript
 const formElement = document.querySelector("#form");
 formElement.addEventListener("submit", function (e) {
     e.preventDefault();
-    let quesMark = "?";
-    if (rangeOfBlankTile) {
-        if (!txtBox.value.includes("?")) {
-            txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
-            txtBox.value = txtBox.value;
+    if (txtBox.value != "" || startsWith.value != "" || endsWith.value != "" || mustInclude.value != "" || exculdeWith.value != "" || inculdeWith.value != "" || wordLength.value != "") {
+        let quesMark = "?";
+        if (rangeOfBlankTile) {
+            if (!txtBox.value.includes("?")) {
+                txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
+                txtBox.value = txtBox.value;
+            }
         }
-    }
-
-    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)) {
-        const additionalData = {
-            url: "{{site.url}}",
-            range: "{{page.blanktilerange}}"
+        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,
+            });
         }
-        var loadJs = document.querySelector(".loaded-js");
-        if (loadJs == null) {
-            loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
-                .then((data) => {
-                    console.log("CSS loaded:", data);
-                })
-                .then(() => {
-                    // Load the JavaScript file after the CSS file has loaded
-                    loadResource("/assets/js/wordfinder.js", additionalData, true, "text/javascript")
-                        .then((data) => {
-                            console.log("JavaScript loaded:", data);
-                            getData(txtBox.value.toLowerCase());
-                        })
-                        .catch((error) => {
-                            console.error("Error loading JavaScript:", error);
-                        });
-                })
-                .catch((error) => {
-                    console.error("Error loading CSS:", error);
-                });
+        const paramName = 'search';
+        if (new URLSearchParams(window.location.search).has(paramName)) {
+            const additionalData = {
+                url: "{{site.url}}",
+                range: "{{page.blanktilerange}}"
+            }
+            var loadJs = document.querySelector(".loaded-js");
+            if (loadJs == null) {
+                loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
+                    .then((data) => {
+                        console.log("CSS loaded:", data);
+                    })
+                    .then(() => {
+                        // Load the JavaScript file after the CSS file has loaded
+                        loadResource("/assets/js/wordfinder.js", additionalData, true, "text/javascript")
+                            .then((data) => {
+                                console.log("JavaScript loaded:", data);
+                                getData(txtBox.value.toLowerCase());
+                            })
+                            .catch((error) => {
+                                console.error("Error loading JavaScript:", error);
+                            });
+                    })
+                    .catch((error) => {
+                        console.error("Error loading CSS:", error);
+                    });
+            }
         }
+    } else {
+       console.log("Please Enter Valid Letters.");
     }
 });
 // Now you can use the loadScript function with additional data

data/assets/js/wordgames-xyz.js

@@ -1,69 +1,64 @@
-let main = document.querySelector('.main')
-let tab_container = document.querySelector('.tab_container')
-var sortValue
-var sortBool = false
-var theSelect = document.getElementById('select_dropDown')
-let lengthSelect = document.querySelector(".length-select");
-
-// Add Filtering
-let sections = {}
+
+let mainContent = document.querySelector('.xyz-main-content')
+let xyzsortValue
+let xyzsortBool = false
+let thexyzSelect = document.querySelector('.xyz_select_dropDown')
+let xyzlengthSelect = document.querySelector(".xyz-length-select");
+
+let wordSections = {}
 function Filtering(id) {
-    id = lengthSelect.value
-    main.innerHTML += ``
+    id = xyzlengthSelect.value
+    mainContent.innerHTML += ``
     var section = document.querySelectorAll('.allGroupWords')
     var sort_val = "alpha";
     Array.prototype.forEach.call(section, function (e) {
         if (document.body.clientWidth > 991) {
-            sections[e.id] = e.offsetTop - 10
+            wordSections[e.id] = e.offsetTop - 10
         } else {
-            sections[e.id] = e.offsetTop - 10
+            wordSections[e.id] = e.offsetTop - 10
         }
     })
     console.log(sort_val + '_' + id);
-    document.documentElement.scrollTop = sections[sort_val + '_' + id] + 5
+    document.documentElement.scrollTop = wordSections[sort_val + '_' + id] + 5
 }
-
-
-
 // sorting for words
-theSelect.addEventListener("change", () => {
-    sortValue = theSelect[theSelect.selectedIndex].text;
+thexyzSelect.addEventListener("change", () => {
+    xyzsortValue = thexyzSelect[thexyzSelect.selectedIndex].text;
     let list_word = document.getElementsByClassName("list_word")
     let data = []
     Array.from(list_word).forEach(item => {
         item.removeChild(item.lastElementChild);
         data.push(item.innerHTML.replace(/\s/g, ''))
     })
-    if (sortValue == "Z-A") {
-        sortBool = "Z-A";
-        sortby(sortBool, data);
-    } else if (sortValue == "Points") {
-        sortBool = "Points";
-        sortPointsby(sortBool, data);
+    if (xyzsortValue == "Z-A") {
+        xyzsortBool = "Z-A";
+        sortby(xyzsortBool, data);
+    } else if (xyzsortValue == "Points") {
+        xyzsortBool = "Points";
+        sortPointsby(xyzsortBool, data);
     } else {
-        sortBool = "A-Z";
-        sortby(sortBool, data);
+        xyzsortBool = "A-Z";
+        sortby(xyzsortBool, data);
     }
 });
-
 // sort by aplhabets
-function sortby(sortValue, data) {
-    if (sortValue === "Z-A") {
-        appendData(sortValue, data.reverse())
+function sortby(xyzsortValue, data) {
+    if (xyzsortValue === "Z-A") {
+        appendData(xyzsortValue, data.reverse())
     }
-    else if (sortValue === "A-Z") {
-        appendData(sortValue, data.sort())
+    else if (xyzsortValue === "A-Z") {
+        appendData(xyzsortValue, data.sort())
     }
 }
 // sorting by points
-function sortPointsby(sortValue, data) {
-    if (sortValue === "Points") {
+function sortPointsby(xyzsortValue, data) {
+    if (xyzsortValue === "Points") {
         let newArray = [];
         data.map((item) => {
             if (item.length === 1) {
                 ok = false;
             } else {
-                let ScrabbleLetterScore = ScrabbleScore();
+                let ScrabbleLetterScore = xyzScrabbleScore();
                 let points = 0;
                 let word = item.replace(/<\/?[^>]+>/gi, '')
                 for (let i = 0; i < word.length; i++) {
@@ -79,29 +74,29 @@ function sortPointsby(sortValue, data) {
         newArray.sort(function (a, b) {
             return b.points - a.points;
         });
-        appendData(sortValue, newArray)
+        appendData(xyzsortValue, newArray)
     }
 }
 
-function appendData(sortValue, data) {
-    main.innerHTML = "";
+function appendData(xyzsortValue, data) {
+    mainContent.innerHTML = "";
     let newWordsLength = 0;
     for (let i = 15; i > 0; i--) {
         let newdata
-        if (sortValue === "Points") {
+        if (xyzsortValue === "Points") {
             newdata = data.filter((item) => item.words.replace(/<\/?[^>]+>/gi, '').length === i)
         } else {
             newdata = data.filter((item) => item.replace(/<\/?[^>]+>/gi, '').length === i)
         }
         if (newdata.length === 0) {
-            main.innerHTML += "";
+            mainContent.innerHTML += "";
         } else {
             newWordsLength += newdata.length;
             const result = newdata.map((item) => {
-                let ScrabbleLetterScore = ScrabbleScore();
+                let ScrabbleLetterScore = xyzScrabbleScore();
                 let points = 0;
                 let word
-                if (sortValue === "Points") {
+                if (xyzsortValue === "Points") {
                     word = item.words.replace(/<\/?[^>]+>/gi, '')
                     item = item.words
                 } else {
@@ -111,16 +106,16 @@ function appendData(sortValue, data) {
                     points += ScrabbleLetterScore[word[i]] || 0; // for unknown characters
                 }
                 return `
-        <a class="anchor__style" title="Lookup ${item.replace(/<\/?[^>]+>/gi, '')} in Dictionary" target="_blank"
-        href="/word-meaning?search=${item.replace(/<\/?[^>]+>/gi, '')}">
-        <li class="list_word">
-        ${item}
-        <span class="points" value="${points}" style="position:relative; top:4px; font-size:12px">${points}</span>
-        </li>
-    </a>
-`});
-
-            main.innerHTML += `
+                      <a href="/word-meaning?search=${item.replace(/<\/?[^>]+>/gi, '')}"  class="anchor__style" title="Lookup ${item.replace(/<\/?[^>]+>/gi, '')} in Dictionary" target="_blank">
+                      <li class="list_word">
+                      ${item}
+                      <span class="points" value="${points}" style="position:relative; top:4px; font-size:12px">${points}</span>
+                     </li> 
+                      </a>
+                      `
+            });
+
+            mainContent.innerHTML += `
       <div class="allGroupWords wordlistContainer" id="alpha_${i}">
       <div class="wordListHeading">
       <h3 class="lead">${i} Letter Words</h3>
@@ -136,7 +131,7 @@ function appendData(sortValue, data) {
     }
 }
 // Scrabble Point Array
-const ScrabbleScore = () => {
+const xyzScrabbleScore = () => {
     let twl06_sowpods = {
         a: 1,
         e: 1,
@@ -201,3 +196,255 @@ const ScrabbleScore = () => {
     return twl06_sowpods;
     // }
 };
+
+
+
+
+
+let txtBox = document.querySelector('.txtBox')
+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");
+const serachSection = document.querySelector(".serachSection");
+let rangeOfBlankTile = serachSection.dataset.range;
+
+// // 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, data = {}, async = true, type = "text/javascript") => {
+    return new Promise((resolve, reject) => {
+        let resourceEle;
+
+        if (type === "text/javascript") {
+            resourceEle = document.createElement("script");
+            resourceEle.src = FILE_URL;
+            resourceEle.classList.add("loaded-js");
+        } else if (type === "text/css") {
+            resourceEle = document.createElement("link");
+            resourceEle.rel = "stylesheet";
+            resourceEle.href = FILE_URL;
+        } else {
+            reject({
+                status: false,
+                message: `Unsupported resource type: ${type}`,
+            });
+            return;
+        }
+
+        resourceEle.type = type;
+        resourceEle.async = async;
+
+        Object.keys(data).forEach((key) => {
+            resourceEle.setAttribute(`data-${key}`, data[key]);
+        });
+
+        resourceEle.addEventListener("load", () => {
+            resolve({ status: true });
+        });
+
+        resourceEle.addEventListener("error", () => {
+            reject({
+                status: false,
+                message: `Failed to load the resource ${FILE_URL}`,
+            });
+        });
+
+        if (type === "text/javascript") {
+            // console.log(resourceEle);
+            // console.log(FILE_URL);
+            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(".xyzPad").style.display = "none"
+    let quesMark = "?";
+    if (rangeOfBlankTile) {
+        if (!txtBox.value.includes("?")) {
+            txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
+            txtBox.value = txtBox.value;
+        }
+    }
+    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)) {
+        const additionalData = {
+            url: "{{site.url}}",
+            range: "{{page.blanktilerange}}"
+        }
+        var loadJs = document.querySelector(".loaded-js");
+        if (loadJs == null) {
+            loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
+                .then((data) => {
+                    console.log("CSS loaded:", data);
+                })
+                .then(() => {
+                    // Load the JavaScript file after the CSS file has loaded
+                    loadResource("/assets/js/wordfinder.js", additionalData, true, "text/javascript")
+                        .then((data) => {
+                            console.log("JavaScript loaded:", data);
+                            getData(txtBox.value.toLowerCase());
+                        })
+                        .catch((error) => {
+                            console.error("Error loading JavaScript:", error);
+                        });
+                })
+                .catch((error) => {
+                    console.error("Error loading CSS:", 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)) {
+        document.querySelector(".xyzPad").style.display = "none"
+        const additionalData = {
+            url: "{{site.url}}",
+            range: "{{page.blanktilerange}}"
+        };
+        loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
+            .then((data) => {
+                console.log("CSS loaded:", data);
+            })
+            .then(() => {
+                // Load the JavaScript file after the CSS file has loaded
+                loadResource("/assets/js/wordfinder.js", additionalData, true, "text/javascript")
+                    .then((data) => {
+                        console.log("JavaScript loaded:", data);
+                        getData(txtBox.value.toLowerCase());
+                    })
+                    .catch((error) => {
+                        console.error("Error loading JavaScript:", error);
+                    });
+            })
+            .catch((error) => {
+                console.error("Error loading CSS:", error);
+            });
+    }
+}
+checkQueryParam();
+
+

data/assets/js/xletter-home.js

@@ -88,7 +88,7 @@ const loadResource = (FILE_URL, async = true, type = "text/javascript") => {
 
         resourceEle.type = type;
         resourceEle.async = async;
-       
+
 
 
         resourceEle.addEventListener("load", () => {
@@ -113,81 +113,84 @@ 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);
-        }).then(() => {
-            // Load the JavaScript file after the CSS file has loaded
-            loadResource("/assets/js/xletter-result.js", true, "text/javascript").then((data) => {
+    if (txtBox.value != "" || startsWith.value != "" || endsWith.value != "" || mustInclude.value != "" || exculdeWith.value != "" || inculdeWith.value != "" || wordLength.value != "") {
+        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);
+            }).then(() => {
+                // Load the JavaScript file after the CSS file has loaded
+                loadResource("/assets/js/xletter-result.js", true, "text/javascript").then((data) => {
                     console.log("JavaScript loaded:", data);
                     getData(txtBox.value.toLowerCase());
                 })
+                    .catch((error) => {
+                        console.error("Error loading JavaScript:", error);
+                    });
+            })
                 .catch((error) => {
-                    console.error("Error loading JavaScript:", error);
+                    console.error("Error loading CSS:", error);
                 });
-        })
-        .catch((error) => {
-            console.error("Error loading CSS:", error);
-        });
+        }
+    } else {
+        console.log("Please Enter Valid Letters.");
     }
 });
 
@@ -196,24 +199,24 @@ 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);
-        })
-        .then(() => {
-            // Load the JavaScript file after the CSS file has loaded
-            loadResource("/assets/js/xletter-result.js", true, "text/javascript")
-                .then((data) => {
-                    console.log("JavaScript loaded:", data);
-                    getData(txtBox.value.toLowerCase());
-                })
-                .catch((error) => {
-                    console.error("Error loading JavaScript:", error);
-                });
-        })
-        .catch((error) => {
-            console.error("Error loading CSS:", error);
-        });
+        loadResource("/assets/css/wordfinder-result.css", true, "text/css")
+            .then((data) => {
+                console.log("CSS loaded:", data);
+            })
+            .then(() => {
+                // Load the JavaScript file after the CSS file has loaded
+                loadResource("/assets/js/xletter-result.js", true, "text/javascript")
+                    .then((data) => {
+                        console.log("JavaScript loaded:", data);
+                        getData(txtBox.value.toLowerCase());
+                    })
+                    .catch((error) => {
+                        console.error("Error loading JavaScript:", error);
+                    });
+            })
+            .catch((error) => {
+                console.error("Error loading CSS:", error);
+            });
     }
 }
 checkQueryParam();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 2.6.8
+  version: 2.7.0
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-16 00:00:00.000000000 Z
+date: 2024-04-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll