word-games-theme 3.1.0 → 3.1.1

data/assets/js/wordfinder-home.js

@@ -7,13 +7,37 @@ 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 textBoxes = document.querySelectorAll('.textBoxes');
+let filterInputs = document.querySelectorAll('.filter_val');
+let formElement = document.querySelector("#form");
+let wordCount = document.querySelector(".wordCount");
+let main = document.querySelector(".main");
+let errorMsg = document.querySelector(".errorMsg");
+let serachBtn = document.querySelector(".serachBtn")
+let tab_container = document.querySelector(".tab_container");
+let lengthSelect = document.querySelector(".length-select");
+let getScript = document.currentScript;
+let siteUrl = getScript.dataset.url;
+let serachSection = document.querySelector(".serachSection");
 let rangeOfBlankTile = serachSection.dataset.range;
+let letterLen = serachSection.dataset.letter
+let ablank = serachSection.dataset.ablank
+let featureContainer = document.querySelector("#featureContainer")
+let howContainer = document.querySelector("#howContainer")
+let faqsContainer = document.querySelector("#faqsContainer")
+let infographicsContainer = document.querySelector("#infographicsContainer")
+let theSelect = document.getElementById("select_dropDown");
+let sortingFilter = document.querySelector("#select_dropDown");
+let sortup = document.querySelector(".sortup-icon");
+let bool = false;
+let authorsLists = document.querySelector(".authors-list")
+let searchBtnContainer = document.querySelector(".search-btn-container")
+let home_page_search_result
+let homePageSearchResult
+let sortValue;
+let sortBool = false;
+let ok = true;
 
-
-
-const textBoxes = document.querySelectorAll('.textBoxes'); 
 textBoxes.forEach(txtBox => {
     txtBox.addEventListener("input", () => {
         if (txtBox.value !== '') {
@@ -27,10 +51,6 @@ textBoxes.forEach(txtBox => {
         txtBox.classList.remove('blinkBoxShadow');
     });
 });
-
-
-
-// // when typing on input
 txtBox.addEventListener('input', (e) => {
     if (e.target.value === "") {
         letterCloseButton.style.display = "none"
@@ -54,8 +74,6 @@ 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;
@@ -93,6 +111,47 @@ Array.from(filterInputs).forEach((item) => {
     })
 })
 
+if (ablank) {
+    if (!serachValue.includes("?")) {
+        if (serachValue.length <= letterLen || serachValue.length >= letterLen) {
+            serachValue = serachValue + '?'
+            txtBox.value = serachValue
+        }
+    }
+}
+sortup.addEventListener("click", () => {
+    if (bool) {
+        theSelect.size = 0;
+        bool = false;
+        theSelect.style.display = "none";
+    } else {
+        bool = true;
+        theSelect.size = 3;
+        theSelect.style.display = "block";
+    }
+});
+
+const getDiff = (text1, text2) => {
+    var diffRange = [];
+    var currentRange = undefined;
+    for (var i = 0; i < text1.length; i++) {
+        if (text1[i] != text2[i]) {
+            if (currentRange == undefined) {
+                currentRange = [i];
+            }
+        }
+        if (currentRange != undefined && text1[i] == text2[i]) {
+            currentRange.push(i);
+            diffRange.push(currentRange);
+            currentRange = undefined;
+        }
+    }
+    if (currentRange != undefined) {
+        currentRange.push(i);
+        diffRange.push(currentRange);
+    }
+    return diffRange;
+};
 
 const loadResource = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
     return new Promise((resolve, reject) => {
@@ -141,14 +200,65 @@ const loadResource = (FILE_URL, data = {}, async = true, type = "text/javascript
         }
     });
 };
-const formElement = document.querySelector("#form");
-formElement.addEventListener("submit", function (e) {
+function sendPageViewEvent() {
+    gtag('event', 'page_view', {
+        page_location: window.location.pathname + location.search
+    });
+}
+
+function logSubmit(e) {
     e.preventDefault();
     if (txtBox.value != "" || startsWith.value != "" || endsWith.value != "" || mustInclude.value != "" || exculdeWith.value != "" || inculdeWith.value != "" || wordLength.value != "") {
+        if (featureContainer) {
+            featureContainer.remove()
+        }
+        if (howContainer) {
+            howContainer.remove()
+        }
+        if (faqsContainer) {
+            faqsContainer.remove()
+        }
+        if (infographicsContainer) {
+            infographicsContainer.remove()
+        }
+        if (authorsLists) {
+            authorsLists.remove()
+        }
+        serachBtn.style.background = 'url(/assets/images/spinner.gif) no-repeat center center';
+        main.innerHTML = `<main class="placeholder-loader">
+        <ul class="o-vertical-spacing o-vertical-spacing--l">
+          <li class="blog-post o-media">
+            <div class="o-media__body">
+              <div class="o-vertical-spacing">
+                <p class="m-0">
+                  <span class="skeleton-box" style="width:40%;"></span>
+                </p>
+              </div>
+            </div>
+          </li>
+          <li class="blog-post o-media">
+            <div class="o-media__figure">
+              <span class="skeleton-box" style="width:900px;height:140px;"></span>
+            </div>
+          </li>
+          <li class="blog-post o-media">
+            <div class="o-media__figure">
+              <span class="skeleton-box" style="width:900px;height:140px;"></span>
+            </div>
+          </li>
+          <li class="blog-post o-media">
+          <div class="o-media__figure">
+            <span class="skeleton-box" style="width:900px;height:140px;"></span>
+          </div>
+        </li>
+        </ul>
+      </main>`;
+
+
         let quesMark = "?";
         if (rangeOfBlankTile) {
             if (!txtBox.value.includes("?")) {
-                txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
+                txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile);
                 txtBox.value = txtBox.value;
             }
         }
@@ -204,33 +314,19 @@ formElement.addEventListener("submit", function (e) {
             lengthValue = params.get("length");
             dictonary = params.get("dictionary");
 
-            gtag("event", "page_view", {
-                page_location: window.location.pathname + location.search,
-            });
+            getData(txtBox.value.toLowerCase())
+
+            setTimeout(sendPageViewEvent, 0);
         }
         const paramName = 'search';
         if (new URLSearchParams(window.location.search).has(paramName)) {
-            const additionalData = {
-                url: "{{site.url}}",
-                range: "{{page.blanktilerange}}"
-            }
+            const additionalData = {}
             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);
                     });
@@ -239,36 +335,442 @@ formElement.addEventListener("submit", function (e) {
     } else {
         console.log("Please Enter Valid Letters.");
     }
+}
+let selectedDictionary = document.querySelector(".select_dropDown2");
+selectedDictionary.addEventListener("change", (e) => {
+    logSubmit(e);
 });
-// 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}}"
-        };
-        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);
-            });
+formElement.addEventListener("submit", logSubmit);
+sortingFilter.addEventListener("change", logSubmit);
+
+// getWords define
+const worker = new Worker('/assets/js/wordfinder-worker.js');
+const getData = async (serachValue) => {
+    try {
+        let selectedDictionary = document.querySelector(".select_dropDown2").value;
+
+        if (letterLen) {
+            home_page_search_result = document.querySelector("#home_page_search_result")
+            homePageSearchResult = `/?search=${serachValue}&dictionary=Dictionary&prefix=&contains=&suffix=&exculde=&inculde=&length=`;
+        }
+        document.querySelector(".main-header").style.height = "auto"
+        document.querySelector(".main-header").style.background = "#fff"
+        document.querySelector(".heading-h2").style.display = "none"
+        document.querySelector(".sortingFilters").style.display = "none"
+
+        errorMsg.innerHTML = "";
+        wordCount.innerHTML = "";
+
+        worker.postMessage({
+            type: "api",
+            serachValue: serachValue,
+            selectedDictionary: selectedDictionary,
+            endpoint: `/.netlify/functions`
+        });
+        worker.onmessage = (event) => {
+            main.innerHTML = "";
+            serachBtn.style.background = 'url(/assets/images/search.svg) no-repeat center center';
+            getWords(event.data.data);
+        }
+    } catch (error) {
+        console.log(error);
+    }
+};
+
+let newUrl = window.location.href;
+if (newUrl.includes("?")) {
+    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("exclude");
+    let includeValue = params.get("include");
+    let lengthValue = params.get("length");
+    let dictonary = params.get("dictionary");
+
+    txtBox.value = serachValue
+    startsWith.value = prefixValue
+    mustInclude.value = containsValue
+    endsWith.value = suffixValue
+    exculdeWith.value = exculdeValue
+    inculdeWith.value = includeValue
+    wordLength.value = lengthValue
+    document.querySelector(".select_dropDown2").value = dictonary
+    logSubmit(new Event('submit'))
+}
+let previousDataIndex = null
+let previousID = null;
+let storepreviousIndex = []
+let moreData = []
+let data_index = 25;
+function getWords(data) {
+    data_index = 25
+    moreData = []
+    storepreviousIndex = []
+    main.innerHTML = "";
+    lengthSelect.innerHTML = ""
+    if (typeof data === "string") {
+        errorMsg.innerHTML = "no words found";
+    } else {
+        worker.postMessage({
+            type: 'filterwords',
+            data: data,
+            serachValue: txtBox.value.toLowerCase(),
+            prefixValue: startsWith.value,
+            containsValue: mustInclude.value,
+            suffixValue: endsWith.value,
+            exculdeValue: exculdeWith.value,
+            includeValue: inculdeWith.value,
+            lengthValue: wordLength.value,
+            sortingFilter: sortingFilter.selectedIndex,
+            dictonary: document.querySelector(".select_dropDown2").value
+        });
+        worker.onmessage = (event) => {
+            if (event.data.type === "filterwords") {
+                errorMsg.innerHTML = ""
+                document.querySelector(".sortingFilters").style.display = "flex"
+                let { prefixValue, containsValue, suffixValue, exculdeValue, includeValue, lengthValue, newdata, i, newWordsLength, result } = event.data
+                moreData.push(newdata)
+                if (prefixValue) {
+                    startsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                    startsWith.classList.add("tick");
+                    startsWith.value = startsWith.value;
+                }
+                if (suffixValue) {
+                    endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                    endsWith.classList.add("tick");
+                    endsWith.value = endsWith.value;
+                }
+                if (containsValue) {
+                    mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                    mustInclude.classList.add("tick");
+                    mustInclude.value = mustInclude.value;
+                }
+                if (lengthValue) {
+                    wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                    wordLength.classList.add("tick");
+                    wordLength.value = wordLength.value;
+                }
+                if (exculdeValue) {
+                    exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                    exculdeWith.classList.add("tick");
+                    exculdeWith.value = exculdeWith.value;
+                }
+                if (includeValue) {
+                    inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                    inculdeWith.classList.add("tick");
+                    inculdeWith.value = inculdeWith.value;
+                }
+                if (newdata.length === 0) {
+                    main.innerHTML += "";
+                } else {
+                    if (result[0] !== undefined) {
+                        if (wordLength.value) {
+                            lengthSelect.style.display = "none"
+                        } else {
+                            var option = document.createElement("option");
+                            option.text = `${i} Letter`;
+                            option.value = i;
+                            lengthSelect.setAttribute("onchange", `Filtering(${i})`)
+                            lengthSelect.add(option);
+                            lengthSelect.style.display = "block"
+                        }
+                        if (letterLen) {
+                            home_page_search_result.href = homePageSearchResult
+                            home_page_search_result.innerHTML = `See words of any length with letters ${serachValue.split("")}`
+                        }
+
+                        main.innerHTML += `
+                    <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+                        <h3 class="wordListHeading lead">${i} Letter Words</h3>
+                           <div class="wordList">${result.join("")}</div>
+                         <div class="w-100 text-center btn-container">
+                            <button   
+                                style="background: black;
+                                padding: 1rem 2rem;
+                                border-radius: 50px;
+                                color: #fff;
+                                font-size: 15px;
+                                border: none;"
+                                onclick="showMoreWords(this)" type="button" class="my-4 showmore_btn" id="${i}">More Words</button>
+                          </div>
+    
+                    </div>`
+                        showMoreLimit()
+
+                    }
+                }
+                if (newWordsLength === 0) {
+                    console.log(newdata);
+                    errorMsg.innerHTML = "No Words Found";
+                    document.querySelector(".sortingFilters").style.display = "none"
+                } else {
+                    if (txtBox.value) {
+                        wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${txtBox.value.split("")}</strong>`;
+                    } else {
+                        let startwithMsg = ""
+                        let endwithMsg = ""
+                        let containsMsg = ""
+                        let lengthMsg = ""
+                        let inputVal = ""
+                        if (txtBox.value) {
+                            inputVal = `${input.value.split("")} `
+                        }
+                        if (prefixValue) {
+                            startwithMsg = `starting with  ${prefixValue.split("")}`
+                        }
+                        if (suffixValue) {
+                            endwithMsg = `ending with ${suffixValue.split("")} `
+                        }
+                        if (containsValue) {
+                            containsMsg = `containing with  ${containsValue.split("")} `
+                        }
+                        if (lengthValue) {
+                            lengthMsg = `with ${lengthValue} letter words`
+                        }
+                        let msg = `<strong> Found ${newWordsLength} words with letters
+                              ${lengthMsg} ${inputVal} ${startwithMsg} ${endwithMsg} ${containsMsg} </strong>`
+
+                        wordCount.innerHTML = `${msg} `
+                    }
+                }
+            }
+        }
+    }
+}
+async function getMoreWords() {
+    let flattenedArray = moreData.flat();
+    let uniqueArray = [...new Set(flattenedArray)];;
+    return uniqueArray
+}
+async function showMoreWords(e) {
+    try {
+        let showmore = e.parentElement.children[0];
+        let id = showmore.id;
+
+        if (previousID !== null && parseInt(previousID) !== parseInt(id)) {
+            data_index = 25
+            const filteredIndexes = storepreviousIndex.filter(item => item.id === id);
+            if (filteredIndexes.length > 0) {
+                const lastItem = filteredIndexes[filteredIndexes.length - 1];
+                data_index = lastItem.data_index + 25;
+                lastItem.data_index = data_index;
+            }
+        }
+        previousID = id;
+        storepreviousIndex.push({
+            data_index,
+            id
+        })
+        console.log("Current data_index:", data_index);
+
+        document.getElementById(id).innerHTML = `Loading...`;
+        let content_area = document.getElementById("alpha_" + id).getElementsByClassName("wordList")[0];
+        const result = await getMoreWords();
+        let full_words = result.filter((item) => item.length === Number(id));
+
+        if (data_index < full_words.length) {
+            for (let d = data_index; d < data_index + 25; d++) {
+                if (full_words[d] != undefined) {
+                    let itemHtml = "";
+                    if (serachValue) {
+                        var text1 = serachValue.replace("?", "");
+                        var text2 = full_words[d];
+                        var text3 = full_words[d];
+                        let chars = text1.split("");
+                        let indexs = [];
+                        chars.map((i) => {
+                            let findIndexes = findIndex(text3, i);
+                            if (findIndexes.length > 0) {
+                                text3 = text3.split("");
+                                text3[findIndexes] = "$";
+                                text3 = text3.join("");
+                                indexs = [...indexs, ...findIndexes];
+                            }
+                        });
+                        text2.split("").map((itemValue, index) => {
+                            let check = indexs.find((i) => i === index);
+                            if (check !== undefined) {
+                                itemHtml += `${itemValue}`;
+                            } else {
+                                itemHtml += `<span class='highlight'>${itemValue}</span>`;
+                            }
+                        });
+                    } else {
+                        itemHtml = full_words[d]
+                    }
+                    let ScrabbleLetterScore = ScrabbleScore();
+                    let points = 0;
+                    full_words[d] = full_words[d].toLowerCase();
+                    for (let i = 0; i < full_words[d].length; i++) {
+                        points += ScrabbleLetterScore[full_words[d][i]] || 0; // for unknown characters
+                    }
+
+                    let span = document.createElement("span");
+                    span.setAttribute("class", "points");
+                    span.setAttribute("value", `${points}`);
+                    span.innerHTML = `${points}`;
+
+                    let a = document.createElement("a");
+                    a.setAttribute("class", "anchor__style");
+                    a.setAttribute("target", "_blank");
+                    a.setAttribute("href", "/word-meaning?search=" + full_words[d].replace(/<\/?[^>]+>/gi, ''));
+                    a.setAttribute("data-original-title", `Lookup ${full_words[d].replace(/<\/?[^>]+>/gi, '')} in Dictionary`)
+                    a.innerHTML = ` ${itemHtml} `;
+                    a.appendChild(span)
+                    content_area.appendChild(a);
+                }
+            }
+            document.getElementById(id).innerHTML = `More Words`;
+            data_index += 25;
+        } else {
+            document.getElementById(id).style.display = "none";
+        }
+    } catch (error) {
+        console.error("Error fetching or processing data:", error);
     }
 }
-checkQueryParam();
+const ScrabbleScore = (dictonary) => {
+    let twl06_sowpods = {
+        a: 1,
+        e: 1,
+        i: 1,
+        o: 1,
+        u: 1,
+        l: 1,
+        n: 1,
+        r: 1,
+        s: 1,
+        t: 1,
+        d: 2,
+        g: 2,
+        b: 3,
+        c: 3,
+        m: 3,
+        p: 3,
+        f: 4,
+        h: 4,
+        v: 4,
+        w: 4,
+        y: 4,
+        k: 5,
+        j: 8,
+        x: 8,
+        q: 10,
+        z: 10,
+    };
+    let wwfScore = {
+        a: 1,
+        b: 4,
+        c: 4,
+        d: 2,
+        e: 1,
+        f: 4,
+        g: 3,
+        h: 3,
+        i: 1,
+        j: 10,
+        k: 5,
+        l: 2,
+        m: 4,
+        n: 2,
+        o: 1,
+        p: 4,
+        q: 10,
+        r: 1,
+        s: 1,
+        t: 1,
+        u: 2,
+        v: 5,
+        w: 4,
+        x: 8,
+        y: 3,
+        z: 10,
+    };
 
+    if (dictonary === "wwf") {
+        return wwfScore;
+    } else {
+        return twl06_sowpods;
+    }
+};
+function showMoreLimit() {
+    let tableFooter = document.querySelectorAll(".btn-container")
+    let showmore = document.querySelectorAll(".showmore_btn");
+    for (let i = 0; i < showmore.length; i++) {
+        let data_of_button = document.getElementById("alpha_" + showmore[i].getAttribute("id"));
+        let final_data = data_of_button.getElementsByClassName("anchor__style");
+        if (final_data.length < 25) {
+            tableFooter[i].style.display = "none";
+        }
+    }
+}
+window.onscroll = function () {
+    var section = document.querySelectorAll(".wordlistContainer");
+    let new_sections = {};
+    Array.prototype.forEach.call(section, function (e) {
+        if (document.body.clientWidth > 991) {
+            new_sections[e.id] = e.offsetTop - 10;
+        } else {
+            new_sections[e.id] = e.offsetTop - 10;
+        }
+    });
+    var scrollPosition =
+        document.documentElement.scrollTop || document.body.scrollTop;
+    for (i in new_sections) {
+        let sort_val = document.querySelector(".sort-select").value;
+        if (
+            i.split("_")[0] == sort_val &&
+            new_sections[i] &&
+            new_sections[i] <= scrollPosition
+        ) {
+            // document.querySelector(".active-tab").classList.remove("active-tab");
+            // var active_now = document.querySelector("#Tab_" + i.split("_")[1]);
+            // active_now.classList.add("active-tab");
+            // active_now.scrollIntoView({ block: "nearest" });
+        }
+    }
+};
+let sections = {};
+function Filtering(id) {
+    id = lengthSelect.value
+
+    let tabs = document.getElementsByClassName("tab_link");
+    tabs[0] ? tabs[0].classList.add("active-tab") : "";
+
+    Array.from(tabs).map((item) => {
+        item.classList.remove("active-tab");
+    });
+    main.innerHTML += ``;
+    let activeLetter = event.target;
+    activeLetter.classList.add("active-tab");
+
+    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;
+        } else {
+            sections[e.id] = e.offsetTop - 10;
+        }
+    });
+    document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;
+
+    setTimeout(() => {
+        document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;
+    }, 150);
+}
+function findIndex(str, char) {
+    const strLength = str.length;
+    const indexes = [];
+    let newStr = str;
+
+    while (newStr && newStr.indexOf(char) > -1) {
+        indexes.push(newStr.indexOf(char) + strLength - newStr.length);
+        newStr = newStr.substring(newStr.indexOf(char) + 5);
+        newStr = newStr.substring(newStr.indexOf(char) + 5);
+    }
 
+    return indexes;
+}