word-games-theme 2.3.2 → 2.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b21d628ba93073a7a4674fdb53fcf8768167653e799e88071eff886ef8f95f89
-  data.tar.gz: 075da3a40a36fce9e46e46a05a35bdcecec546c352572f65df4e774c56a24559
+  metadata.gz: 5334cedd32cddb95a419b149103716a2739346c73f3066ba00850af8871433c8
+  data.tar.gz: fed74d08d8bd302c3f34c8ce2aa00cfdda4f3312450952a0e4fb02cd7c7559ba
 SHA512:
-  metadata.gz: 177b8f676125e9e2c71913d7c45b30a6103451f92a3ea1b6262cfbf9418d8b95794f717572a23759fd26cf4e807cb55dfd15eec0071d77099a142620cd1a638c
-  data.tar.gz: d7d364f2813b43b07f81d704e970f5c01258b0057098347193aa1104b5513fab74c0559bbe86a0744e4295994a890f15b4ee1f995cd0953f5f8aacc46a5d6bab
+  metadata.gz: bd7f6c75f4da994e597c27faa197c2fcfe792dfd6f38ebebf40c32ae8efc1ab8761ba20c5e1ac72a75e87be2a42fafb141b5e59d640db4351e8bba0f3684aaef
+  data.tar.gz: f93da47af91b0fbf72241ed5bbb14943dcc2da0a254e840dbfdae2b1c79f9f3d602f5c439f77f1246d685ba54749bd47f635394fac1d04b0e5a259f943b678bb

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

@@ -15,7 +15,7 @@
         </div>
     </div>
     <div class="wordLength same">
-        <input autocomplete="off" type="text" class="filter_val" id="wordLength" placeholder="Length" name="length"
+        <input autocomplete="off" type="number" class="filter_val" id="wordLength" placeholder="Length" name="length"
             value="">
 
         <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
@@ -25,7 +25,7 @@
     </div>
     <div class="inculdeWith">
         <input class="filter_val" autocomplete="off" type="text" id="inculdeWith" placeholder="Inculde" value=""
-            name="inculde">
+            name="include">
         <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
             data-tip="Only words that contain the letters you enter here" id="Only words that contain the letters you enter here">
             <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
@@ -42,7 +42,7 @@
 
     <div class="exculdeWith">
         <input class="filter_val" autocomplete="off" type="text" id="exculdeWith" placeholder="Exculde" value=""
-            name="exculde">
+            name="exclude">
         <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
             data-tip="Only words that not contain the letters you enter here" id="Only words that not contain the letters you enter here">
             <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />

data/_includes/wordgames/result-page/result-page.html

@@ -6,6 +6,12 @@
 
 {%- assign CustomColor = site.data.theme.colors -%}
 
+<style>
+    .nav_menu_bar{
+        z-index: 99;
+        cursor: pointer;
+    }
+</style>
 <nav  class="result_navbar_section navbar-expand-lg navbar-dark" style="background-color: #fff;">
     <a class="nav_menu_bar" href="/" title="{{dataToShow.tooltip}}" style="position: absolute; top:5px">
         <img src="/assets/images/wordfinder-result-logo.svg" alt="{{site.name}}" width="90%" height="90%">

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

@@ -32,11 +32,15 @@
                 </div>
             </div>
             <div class="wrapper_dropDown mt-3 d-flex justify-content-end" style="gap:10px;">
+
+                {%- if page.letter == nil -%}
                 <div class="letter-length">
                     <select class="form-select length-select">
                         <option selected="true" hidden>Letter Length</option>
                     </select>
                 </div>
+                {%- endif -%}
+              
                 <div id="sort-select">
                     <select class="form-select sort-select" id="select_dropDown">
                         <option selected="true" hidden id="alpha" value="alpha">Sort by</option>

data/_includes/xyzpages/xyz.html

@@ -105,7 +105,7 @@
                         </div>
                         <div class="wordLength same">
                             <label for="wordLength">Word Length </label>
-                            <input type="text" class="filter_val" id="wordLength" placeholder="Length" name="length"
+                            <input type="number" class="filter_val" id="wordLength" placeholder="Length" name="length"
                                 value="">
                         </div>
 

data/assets/css/wordgames-home.css

@@ -17,6 +17,22 @@
   right: 5px;
 }
 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield; /* Firefox */
+}
+
+/* Hide the decimal points */
+input[type="number"] {
+    -moz-appearance: textfield; /* Firefox */
+    appearance: none;
+    -webkit-appearance: none;
+}
 
 
 /* headings css */

data/assets/js/wordgames-result.js

@@ -15,7 +15,7 @@ let serachValue = params.get("search").toLowerCase();
 let prefixValue = params.get("prefix");
 let containsValue = params.get("contains");
 let suffixValue = params.get("suffix");
-let exculdeValue = params.get("exculde");
+let exculdeValue = params.get("exclude");
 let includeValue = params.get("include");
 let lengthValue = params.get("length");
 let dictonary = params.get("dictionary");
@@ -108,13 +108,13 @@ Array.from(filterInputs).forEach((item) => {
         const imgElement = parentElement.querySelector('img');
         const tooltipElement = parentElement.querySelector('.filter-tooltip');
 
-        if(inputValue == ""){
+        if (inputValue == "") {
             imgElement.src = "/assets/images/questionmark.svg"
             item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
             tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
             tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
-            
-        }else{
+
+        } else {
             item.nextElementSibling.removeAttribute("data-tip")
             imgElement.src = "/assets/images/close-btn.svg"
             tooltipElement.style.setProperty('--tooltip-padding', '0');
@@ -128,7 +128,47 @@ Array.from(filterInputs).forEach((item) => {
             tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
         })
     })
-  })
+})
+
+
+function handleFilterInput(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"
+        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+    } else {
+        e.target.nextElementSibling.removeAttribute("data-tip")
+        imgElement.src = "/assets/images/close-btn.svg"
+        tooltipElement.style.setProperty('--tooltip-padding', '0');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+    }
+
+    e.target.nextElementSibling.addEventListener("click", () => {
+        e.target.value = ""
+        imgElement.src = "/assets/images/questionmark.svg"
+        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const filterInputs = document.querySelectorAll('.filter_val');
+    Array.from(filterInputs).forEach((item) => {
+        // Call the function on load
+        handleFilterInput({ target: item });
+        item.addEventListener("input", handleFilterInput);
+    });
+});
+
+
+
 
 let theSelect = document.getElementById("select_dropDown");
 
@@ -239,7 +279,7 @@ if (lengthValue === "1") {
                 "=" +
                 endsWith.value +
                 "&" +
-                "exculde" +
+                "exclude" +
                 "=" +
                 exculdeWith.value +
                 "&" +
@@ -257,7 +297,7 @@ if (lengthValue === "1") {
             prefixValue = params.get("prefix");
             containsValue = params.get("contains");
             suffixValue = params.get("suffix");
-            exculdeValue = params.get("exculde");
+            exculdeValue = params.get("exclude");
             includeValue = params.get("include");
             lengthValue = params.get("length");
             dictonary = params.get("dictionary");
@@ -281,7 +321,8 @@ if (lengthValue === "1") {
 // getWords function define...
 function getWords(data) {
     main.innerHTML = "";
-    tab_container.innerHTML = "";
+    // tab_container.innerHTML = "";
+    lengthSelect.innerHTML = ""
     if (typeof data === "string") {
         errorMsg.innerHTML = "no words found";
         wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
@@ -306,6 +347,7 @@ function getWords(data) {
                 newdata = newdata.filter((item) =>
                     item.includes(containsValue.toLowerCase())
                 );
+                mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                 mustInclude.classList.add("tick");
                 mustInclude.value = containsValue;
             } else {
@@ -315,6 +357,7 @@ function getWords(data) {
                 newdata = newdata.filter((item) =>
                     item.endsWith(suffixValue.toLowerCase())
                 );
+                endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                 endsWith.classList.add("tick");
                 endsWith.value = suffixValue;
             } else {
@@ -337,6 +380,7 @@ function getWords(data) {
                         data.push(item);
                     }
                 });
+                exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                 exculdeWith.classList.add("tick");
                 exculdeWith.value = exculdeValue;
                 newdata = data;
@@ -360,6 +404,7 @@ function getWords(data) {
                         data.push(item);
                     }
                 });
+                inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                 inculdeWith.classList.add("tick");
                 inculdeWith.value = includeValue;
                 newdata = data;
@@ -368,6 +413,7 @@ function getWords(data) {
             }
             if (lengthValue) {
                 newdata = newdata.filter((item) => item.length == lengthValue);
+                wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
                 wordLength.classList.add("tick");
                 wordLength.value = lengthValue;
             } else {
@@ -427,15 +473,15 @@ function getWords(data) {
                     var option = document.createElement("option");
                     option.text = `${i} Letter`;
                     option.value = i;
-                    lengthSelect.setAttribute("onchange",`Filtering(${i})`)
+                    lengthSelect.setAttribute("onchange", `Filtering(${i})`)
                     lengthSelect.add(option);
 
-        //             tab_container.innerHTML += `
-        //   <input type="button" id="Tab_${i}" onclick="Filtering(${i})" value="${i} Letter"
-        //   class="tab_link  cursorPointer" />
-        //   `;
-        //             let tabs = document.getElementsByClassName("tab_link");
-        //             tabs[0] ? tabs[0].classList.add("active-tab") : "";
+                    //             tab_container.innerHTML += `
+                    //   <input type="button" id="Tab_${i}" onclick="Filtering(${i})" value="${i} Letter"
+                    //   class="tab_link  cursorPointer" />
+                    //   `;
+                    //             let tabs = document.getElementsByClassName("tab_link");
+                    //             tabs[0] ? tabs[0].classList.add("active-tab") : "";
                     main.innerHTML += `
           <div class="allGroupWords wordlistContainer" id="alpha_${i}">
               <div class="wordListHeading">

data/assets/js/wordgames-xletter.js

@@ -110,6 +110,74 @@ if (ablank) {
 
 
 
+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"
+            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            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"
+            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+        })
+    })
+})
+
+
+function handleFilterInput(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"
+        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+    } else {
+        e.target.nextElementSibling.removeAttribute("data-tip")
+        imgElement.src = "/assets/images/close-btn.svg"
+        tooltipElement.style.setProperty('--tooltip-padding', '0');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+    }
+
+    e.target.nextElementSibling.addEventListener("click", () => {
+        e.target.value = ""
+        imgElement.src = "/assets/images/questionmark.svg"
+        e.target.nextElementSibling.setAttribute("data-tip", e.target.nextElementSibling.id)
+        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'solid');
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const filterInputs = document.querySelectorAll('.filter_val');
+    Array.from(filterInputs).forEach((item) => {
+        // Call the function on load
+        handleFilterInput({ target: item });
+        item.addEventListener("input", handleFilterInput);
+    });
+});
+
+
 
 
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 2.3.2
+  version: 2.3.4
 platform: ruby
 authors:
 - manpreet-appscms