Merge branch 'fix_searchFilter' into 'master'

Fix search filter

See merge request !4

src/html/toolcompendium.js

@@ -47,74 +47,90 @@ function tcOpenSection(name) {
   }
 }
 
-<!-- Search through the table -->
 function tcSearchFilter() {
-  var input, filter, filter_strings, searchables, a, tr, td_list, td, i, j, k, txtValue, found;
-  input = document.getElementById("tc-searchInput");
-  filter = input.value.toUpperCase();
-  filter_strings = filter.split(" ");
-  searchables = document.getElementsByClassName("tc-searchable");
-  for (i = 0; i < searchables.length; i++) {
-    var found = [];
-    for (m = 0; m < filter_strings.length; m++) {
-      found[m] = false;
-    }
-    // look for the program name
-    a = searchables[i].getElementsByTagName("a");
-    txtValue = a[0].textContent || a[0].innerText;
-    for (m = 0; m < filter_strings.length; m++) {
-      if (!found[m] && txtValue.toUpperCase().indexOf(filter_strings[m]) > -1) {
-        found[m] = true;
-      }
-    }
-    // look for the description and stuff
-    table = searchables[i].getElementsByClassName("tc-progtable");
-    tr = table[0].getElementsByTagName("tr");
+  const input = document.getElementById("tc-searchInput");
+  const filter = input.value.toUpperCase();
+  applySearchFilter(filter);
+}
 
-    var allfound = false;
-    for (j = 0; j < tr.length && !allfound; j++) {
-      td_list = tr[j].getElementsByTagName("td");
-      for (k = 0; k < td_list.length && !allfound; k++) {
-        td = td_list[k];
-        if (td) {
-          txtValue = td.textContent || td.innerText;
-          for (m = 0; m < filter_strings.length && !allfound; m++) {
-            if (!found[m] && txtValue.toUpperCase().indexOf(filter_strings[m]) > -1) {
-              found[m] = true;
-              allfound = true;
-              for (l = 0; l < filter_strings.length; l++) {
-                if (!found[l]) allfound = false;
-              }
-            }
-          }
-        }
-      }
-    }
-    var allfound = true;
-    for (m = 0; m < filter_strings.length; m++) {
-      if (!found[m]) {
-        allfound = false;
+function matchFilters(content, filters) {
+  let result = true;
+  for (let i = 0; i < filters.length; i++) {
+    let filter = filters[i];
+    if (filter === "") continue; // ignore empty filter strings
+    result = result && (content.toUpperCase().indexOf(filter.toUpperCase()) > -1);
+    if (!result) break;
+  }
+  return result;
+}
+
+function sectionNameMatches(searchable, filter_strings) {
+  let sectionName = searchable.getElementsByClassName("tc-section-name")[0];
+  if (!sectionName) return false;
+  let sectionNameText = sectionName.textContent || sectionName.innerText;
+  return matchFilters(sectionNameText, filter_strings);
+}
+
+function descriptionMatches(searchable, filter_strings) {
+  let description = searchable.getElementsByClassName("description")[0];
+  if (!description) return false;
+  let descriptionText = description.textContent || description.innerText;
+  return matchFilters(descriptionText, filter_strings);
+}
+
+function programNameMatches(searchable, filter_strings) {
+  let programName = searchable.getElementsByClassName("tc-program-name")[0];
+  if (!programName) return false;
+  let programNameText = programName.textContent || programName.innerText;
+  return matchFilters(programNameText, filter_strings);
+}
+
+function tableEntriesMatch(searchable, filter_strings) {
+  let table = searchable.getElementsByClassName("tc-progtable");
+  if (!table) return false;
+
+  let result = false;
+  let tableRow = table[0].getElementsByTagName("tr");
+  for (let i = 0; i < tableRow.length; i++) {
+    let columns = tableRow[i].getElementsByTagName("td");
+    let relevantColumn = columns[1]; // only include the second column which holds actual information
+    if (relevantColumn) {
+      let columnContent = relevantColumn.textContent || relevantColumn.innerText;
+      if (matchFilters(columnContent, filter_strings)) {
+        result = true;
       }
     }
-    if (allfound) {
+  }
+  return result;
+}
+
+function applySearchFilter(filter) {
+  <!-- Search through the table -->
+  let filter_strings = filter.split(" ");
+  let searchables = document.getElementsByClassName("tc-searchable");
+  for (let i = 0; i < searchables.length; i++) {
+    let searchable = searchables[i];
+    if (sectionNameMatches(searchable, filter_strings)
+        || descriptionMatches(searchable, filter_strings)
+        || programNameMatches(searchable, filter_strings)
+        || tableEntriesMatch(searchable, filter_strings)) {
       searchables[i].style.display = "";
     } else {
       searchables[i].style.display = "none";
     }
   }
-  var categories = document.getElementsByClassName("tc-category");
-  for (i = 0; i < categories.length; i++) {
-    searchables = categories[i].getElementsByClassName("tc-searchable");
-    k = 0;
-    for (j = 0; j < searchables.length; j++) {
-      if (searchables[j].style.display == "") {
+  // make all sections visible that contain at least one visible searchable
+  let categories = document.getElementsByClassName("tc-section");
+  for (let i = 0; i < categories.length; i++) {
+    let searchables = categories[i].getElementsByClassName("tc-searchable");
+    let k = 0;
+    for (let j = 0; j < searchables.length; j++) {
+      if (searchables[j].style.display === "") {
         k++;
       }
     }
     if (k > 0) {
       categories[i].style.display = "";
-    } else {
-      categories[i].style.display = "none";
     }
   }
 }

src/html/toolcompendiumHTML.xsl

@@ -93,8 +93,12 @@
   </xsl:template>
 
   <xsl:template match="section[program|section|struct-ref]">
-    <div class="tc-searchable">
-      <button class="tc-accordion"><a id="{@name}" href="#{@name}" name="{@name}"><xsl:value-of select="@name"/></a></button>
+    <div class="tc-searchable tc-section">
+      <button class="tc-accordion">
+        <a id="{@name}" class="tc-section-name" href="#{@name}" name="{@name}">
+          <xsl:value-of select="@name"/>
+        </a>
+      </button>
       <div class="tc-panel" style="overflow-x:auto;">
         <xsl:apply-templates select="*[not(self::param)]" />
       </div>
@@ -121,9 +125,13 @@
     <xsl:param name="description" />
     <xsl:param name="father" />
 
-    <div class="tc-searchable">
-    <button class="tc-accordion"><a id="{@name}" href="#{@name}" name="{@name}"><xsl:value-of select="@name"/></a></button>
-    <div class="tc-panel" style="overflow-x:auto;">
+    <div class="tc-searchable tc-program">
+      <button class="tc-accordion">
+        <a id="{@name}" class="tc-program-name" href="#{@name}" name="{@name}">
+          <xsl:value-of select="@name"/>
+        </a>
+      </button>
+      <div class="tc-panel" style="overflow-x:auto;">
       <center>
         <table class="tc-progtable" border="0" align="center" width="930px">
           <xsl:if test="$description">