assets/js/wordgames-result.js in word-games-theme-2.3.3 vs assets/js/wordgames-result.js in word-games-theme-2.3.4
- old
+ new
@@ -13,11 +13,11 @@
const params = new URLSearchParams(window.location.search);
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");
// advanced filter element grabs
@@ -106,17 +106,17 @@
const inputValue = e.target.value;
const parentElement = e.target.parentElement;
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');
tooltipElement.style.setProperty('--tooltip-border-style', 'none');
}
@@ -126,12 +126,52 @@
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);
+ });
+});
+
+
+
+
let theSelect = document.getElementById("select_dropDown");
const sortup = document.querySelector(".sortup-icon");
let bool = false;
sortup.addEventListener("click", () => {
@@ -237,11 +277,11 @@
"&" +
"suffix" +
"=" +
endsWith.value +
"&" +
- "exculde" +
+ "exclude" +
"=" +
exculdeWith.value +
"&" +
"include" +
"=" +
@@ -255,11 +295,11 @@
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("exculde");
+ exculdeValue = params.get("exclude");
includeValue = params.get("include");
lengthValue = params.get("length");
dictonary = params.get("dictionary");
gtag("event", "page_view", {
@@ -305,19 +345,21 @@
}
if (containsValue) {
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 {
mustInclude.classList.remove("tick");
}
if (suffixValue) {
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 {
endsWith.classList.remove("tick");
}
@@ -336,10 +378,11 @@
}
if (check === false) {
data.push(item);
}
});
+ exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
exculdeWith.classList.add("tick");
exculdeWith.value = exculdeValue;
newdata = data;
} else {
exculdeWith.classList.remove("tick");
@@ -359,18 +402,20 @@
}
if (check === false) {
data.push(item);
}
});
+ inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
inculdeWith.classList.add("tick");
inculdeWith.value = includeValue;
newdata = data;
} else {
inculdeWith.classList.remove("tick");
}
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 {
wordLength.classList.remove("tick");
}
@@ -426,18 +471,18 @@
if (result[0] !== undefined) {
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">
<h3 class="lead">${i} Letter Words</h3>
</div>