Changes behavior of Filter checkboxes so each column allows 1 selection.

- For Expertise, Language, TargetDevice, only  1 option allowed; like radio buttons
- Upon selection/deselection for Filter checkboxes, DOM state is reset ...
- ...and reflects that last-checked checkbox, where app states auto-refreshes
- Changes layout of Filter dropdown to remove empty space below it; add space after toolkit-cards
- Adds home button in navbar, upper left, to improve user nav and ...
- ... adds JS functions to manage and reload state when home clicked or filter reset clicked.
- Fixes Defect #4, reported date 07/21/2023, assigned 10/3/2023 to michael vincerra, app developer

Signed-off-by: michael vincerra <[email protected]>

Author: mvincerx

src/docs/_static/script.js

@@ -1,34 +1,62 @@
 "use strict";
+
 const state = {
-    data: [], 
-    search: [], 
+    data: [],
+    search: [],
     pageSize: 15,
     totalPages: +Infinity,
     pageIndex: 1,
     paginatedData: [],
     checkedFilters: [],
+    checkBoxMap: {
+        getStart: /.*getting\sstarted.*/ig,
+        tutorial: /.*tutorial.*/ig,
+        conFunc: /.*concepts\sand\sfunctionality.*/ig,
+        refDesEnd2End: /.*reference\sdesigns\sand\send\sto\send.*/ig,
+        codeOpt: /.*code\soptimization.*/ig,
+        cpp: /.*cpp.*/ig,
+        fortran: /.*fortran.*/ig,
+        python: /.*python.*/ig,
+        cpu: /.*cpu.*/ig,
+        gpu: /.*gpu.*/ig,
+        fpga: /.*fpga.*/ig
+    }
 }
 
-function reloadDocs() {
-const reload = new Event('DOMContentLoaded');
-    document.dispatchEvent(reload)
-}
+HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) { // est eventListener for all HTML Objs.
+    this.addEventListener(eventType, callBack, useCapture);
+    if (!this.myListeners) {
+        this.myListeners = []; // create empty arr to hold event type, callbacks, captures in DOM
+    }
+    this.myListeners.push({ eType: eventType, callBack: callBack }); // populate same arr
+    return this;
+};
+
+HTMLElement.prototype.removeListeners = function () {
+    if (this.myListeners) { // If myListeners arr exists, run for loop over all eventListeners
+        for (let i = 0; i < this.myListeners.length; i++) {
+            this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
+        }
+        delete this.myListeners; // clear all eventListeners in arr before next func inits state
+    }
+};
 
 document.addEventListener('DOMContentLoaded', function () {
     console.log('document is ready.');
-    fetchData().then((data) => { /* changed fr 'state' to 'data'*/
-        renderUi(data.paginatedData); /* changed fr 'state' to 'data'*/
+    fetchData().then((data) => { 
+        renderUi(data.paginatedData); 
         showTotalRecords();
         attachSearch();
         filterPaginatedData();
-        lastUpdated()
-    });
-
+        lastUpdated();
+    })
 });
 
+
 function reloadData() {
     const reload = new Event('DOMContentLoaded');
-        document.dispatchEvent(reload)
+    document.dispatchEvent(reload)
+    console.log(reload)
 }
 
 function lastUpdated() {
@@ -92,95 +120,110 @@ function lastPage() {
     renderUi(state.paginatedData);
 }
 
+function resetFiltersGoHome(){
+    destroyView();
+    resetFilters();
+    reloadData();
+}
+
+// function closeCollapsibleFilters(){
+// //
+// }
+
+
 function resetFilters() {
     const checkboxes = document.querySelectorAll('input[name=data-filter]');
     console.log("NodeList:", checkboxes);
     checkboxes.forEach(c => {
-        if(c.checked == true) {
+        if (c.checked == true) {
             c.checked = false;
             const change = new Event('change');
             c.dispatchEvent(change);
-        }else{
+        } else {
             console.log(c.checked);
         }
     });
-};
+}
 
 function resetSearcher() {
     const input = document.getElementById('textInput');
-    input.value="";
+    input.value = "";
     destroyView();
     resetFilters();
     reloadData();
     // input.focus();
-};  
-
+}
 
-function showTotalRecords () {    
+function showTotalRecords() {
     const records = document.getElementById("total-records");
     records.innerHTML = `Total Records: ${[...state.data].length}`;
 }
 
 function renderUi(data) {
-    const filtered = state.checkedFilters.length === 0 ? data: data.filter(item => {
+    const filtered = state.checkedFilters.length === 0 ? data : data.filter(item => {
         const languages = item.languages.reduce((acc, value) => {
             const keys = Object.keys(value);
             return [...acc, ...keys];
         }, []);
-        const filters =     [...state.checkedFilters]
-        const conditions =  filters.map((regex) => {
-        const condition  =  regex.test(item.expertise) ||
-                            regex.test(languages.join(',')) || 
-                            regex.test(item.targetDevice.join(',')); 
-        return condition
-    })
-        return conditions.reduce((acc, condition) =>{
+        const filters = [...state.checkedFilters]
+        const conditions = filters.map((checkboxValue) => {
+            const regex = state.checkBoxMap[checkboxValue]
+            const condition = regex.test(item.expertise) ||
+                regex.test(languages.join(',')) ||
+                regex.test(item.targetDevice.join(','));
+
+            console.log(typeof (filters))
+            console.log(filters)
+            return condition
+        })
+        return conditions.reduce((acc, condition) => {
             return acc && condition
-    }, true) 
-        
+        }, true)
+
     })
     noResultsSwitch(filtered)
     qtyFilteredResults(filtered)
     renderCards(filtered)
     printPaginatorState()
 }
 
-function qtyFilteredResults(filtered){
+function qtyFilteredResults(filtered) {
     const qtyResults = filtered.length;
     const dataTotalLength = [...state.data].length;
-    console.log("Total len",dataTotalLength)
-    const results = document.getElementById("qty-show-results")  || {};
+    console.log("Total len", dataTotalLength)
+    const results = document.getElementById("qty-show-results") || {};
     results.innerHTML = `${qtyResults} Results`;
-    if  (qtyResults === undefined || qtyResults == 15 || qtyResults == dataTotalLength) {
-        results.style.display="none";
+    if (qtyResults === undefined || qtyResults == 15 || qtyResults == dataTotalLength) {
+        results.style.display = "none";
     } else {
-        results.style.display="block";
+        results.style.display = "block";
     }
 }
 
 function attachSearch() {
     const searchInput = document.querySelector("[data-search]")
-    searchInput.addEventListener("input", e => {
+    const handler = e => {
         const value = e.target.value.replace(/\+/g, "\\+")
         const regex = new RegExp('.*' + saniStrings(value) + '.*', 'ig');
-        // const cleaned = noExtraSpc(regex) /*rm extra empty spcs in search string*/
         search(regex);
-    })
-};    
-    
-function noResultsSwitch(data){
+    }
+    searchInput.removeListeners()
+    searchInput.onEvent("input", handler)
+}
+
+function noResultsSwitch(data) {
     const noResults = document.getElementById("hide")
-    if  (data === undefined || data.length == 0) {
-        noResults.style.display="block";
+    if (data === undefined || data.length == 0) {
+        noResults.style.display = "block";
     } else {
-        noResults.style.display="none";
+        noResults.style.display = "none";
     }
 }
 
 function saniStrings(str) {
     /* remove reg/trademarks and all empty spaces  */
-    const reg_no_spcl = /[\u00ae\u2122\u2120\*]/g;
-    const result = str.replace(reg_no_spcl, "");
+    const regNoSpecial = /[\u00ae\u2122\u2120*]/g;
+    const result = str.replace(regNoSpecial, "");
     return result.trim().replace(/\s+/g, " ");
 }
 
@@ -191,12 +234,12 @@ function search(regex) {
             const keys = Object.keys(value);
             return [...acc, ...keys];
         }, []);
-        let result = 
-                    regex.test(saniStrings(item.name)) ||
-                    regex.test(saniStrings(item.description)) ||
-                    regex.test(languages.join(',')) || 
-                    regex.test(item.targetDevice.join(',')) || 
-                    regex.test(item.expertise);    
+        let result =
+            regex.test(saniStrings(item.name)) ||
+            regex.test(saniStrings(item.description)) ||
+            regex.test(languages.join(',')) ||
+            regex.test(item.targetDevice.join(',')) ||
+            regex.test(item.expertise);
         return result
     });
     noResultsSwitch(data)
@@ -205,60 +248,79 @@ function search(regex) {
     state.paginatedData = [...data].slice(0, state.pageSize);
     destroyView();
     renderUi(data);
-    
 }
 
-
-function onlyAlphaNumInput(e){
+function onlyAlphaNumInput(e) {
     let regex1 = new RegExp("^[a-z-A-Z0-9\-\r|\n ]+|[\u00ae\u2122\u2120]+|[+]+$")
     let str = String.fromCharCode(!e.fromCharCode ? e.which : e.fromCharCode);
     saniStrings(str)
     const errormsg = document.getElementById("errormsg");
-    if(regex1.test(str)) {
-        errormsg.style.display="none";
+    if (regex1.test(str)) {
+        errormsg.style.display = "none";
         return true;
-    } else{
-        errormsg.innerHTML="Enter only letters, numbers, or plus sign.";
+    } else {
+        errormsg.innerHTML = "Enter only letters, numbers, or plus sign.";
         errormsg.classList.toggle("showerror");
-        setTimeout(() =>{
+        setTimeout(() => {
             errormsg.classList.remove("showerror");
         }, 7000);
     }
-    e.preventDefault();  
+    e.preventDefault();
 }
 
-function checkboxFilterHandler(checked,regex) {
+function checkboxFilterHandler(checked, checkboxValue) {
+    // where checkboxValue is arr
     if (checked) {
-        state.checkedFilters.push(regex)
+        state.checkedFilters.push(checkboxValue)
+        console.log("state.checkedFilters:",state.checkedFilters)
     } else {
         const found = state.checkedFilters.findIndex(item => {
-            return item === regex
+            return item === checkboxValue
         })
-        if (typeof found !== 'undefined') {
+        console.log("found?", found)
+        if (found !== -1) {
             state.checkedFilters.splice(found, 1)
         }
         // console.log(`Checkbox not checked.`);
     }
     destroyView();
-    if (state.checkedFilters.length > 0){
+    if (state.checkedFilters.length >= 0) {
+        // changed above from > 0 to > -1 // 25/10/2023
         state.pageIndex = 1;
         state.pageSize = +Infinity;
         state.totalPages = 1;
         renderUi([...state.data]);
-    }else{
+    } else {
+
         reloadData();
     }
 }
 
 function filterPaginatedData() {
     const checkboxes = document.querySelectorAll('input[name=data-filter]');
+    console.log(checkboxes)
+
     for (let checkbox of checkboxes) {
-        checkbox.addEventListener('change', e => {
+        const handler = e => {
             const checked = e.target.checked;
-            const regex = new RegExp('.*' + e.target.value + '.*', 'ig');
-            checkboxFilterHandler(checked, regex)
+            // console.log("Checked is T/F?",checked)
+            const checkedParent = e.target.parentElement.parentElement
+            const checkBoxGroup = checkedParent.querySelectorAll('input[name=data-filter]')
+            console.log("checkBoxGroup", checkBoxGroup)
+            // 
+            checkBoxGroup.forEach(item => {
+
+                if (item.value !== e.target.value && item.checked == true) {
+                    item.checked = false
+                    const uncheckRegex = state.checkBoxMap[item.value]
+                    console.log("Unchecked regex...?", uncheckRegex)
+                    checkboxFilterHandler(item.checked, item.value)
+                }
+            })
+            checkboxFilterHandler(checked, e.target.value)
         }
-        )
+        checkbox.removeListeners()       
+        checkbox.onEvent('change', handler) 
     }
 }