Push changes by Michal again

Author: gsmet

_versions/main/guides/javascript/config.js

@@ -7,51 +7,42 @@ var tables = document.querySelectorAll("table.configuration-reference");
 var typingTimer;
 
 if(tables){
-    var idx = 0;
     for (var table of tables) {
         var caption = table.previousElementSibling;
         if (table.classList.contains('searchable')) { // activate search engine only when needed
-          var input = document.createElement("input");
-          input.setAttribute("type", "search");
-          input.setAttribute("placeholder", "FILTER CONFIGURATION");
-          input.id = "config-search-"+(idx++);
-          caption.children.item(0).appendChild(input);
+          var input = caption.firstElementChild.lastElementChild;
           input.addEventListener("keyup", initiateSearch);
           input.addEventListener("input", initiateSearch);
-          var descriptions = table.querySelectorAll(".description");
-          if(descriptions){
-            var heights = new Array(descriptions.length);
-            var h = 0;
-            for (description of descriptions){
-              heights[h++] = description.offsetHeight;
-            }
-            var shadowTable = table.cloneNode(true);
-            var shadowDescriptions = shadowTable.querySelectorAll(".description");
-            h = 0;
-            for (shadowDescription of shadowDescriptions){
-              makeCollapsible(shadowDescription, heights[h++]);
-            }
-            table.parentNode.replaceChild(shadowTable, table);
-            table = shadowTable;
-          }
+          input.attributes.removeNamedItem('disabled');
           inputs[input.id] = {"table": table};
         }
 
-        var rowIdx = 0;
-        for (var row of table.querySelectorAll("table.configuration-reference > tbody > tr")) {
-            var heads = row.querySelectorAll("table.configuration-reference > tbody > tr > th");
-            if(!heads || heads.length == 0){
-                // mark even rows
-                if(++rowIdx % 2){
-                    row.classList.add("odd");
-                }else{
-                    row.classList.remove("odd");
-                }
-            }else{
-                // reset count at each section
-                rowIdx = 0;
+        const collapsibleRows = table.querySelectorAll('tr.row-collapsible');
+        if (collapsibleRows) {
+            for (let row of collapsibleRows) {
+                const td = row.firstElementChild;
+                const decoration = td.firstElementChild.lastElementChild.firstElementChild;
+                const iconDecoration = decoration.children.item(0);
+                const collapsibleSpan = decoration.children.item(1);
+                const descDiv = td.firstElementChild.children.item(1);
+                const collapsibleHandler = makeCollapsibleHandler(descDiv, td, row, collapsibleSpan, iconDecoration);
+                row.addEventListener('click', collapsibleHandler);
             }
         }
+
+        // render hidden rows asynchronously
+        setTimeout(() => renderHiddenRows());
+    }
+}
+
+function renderHiddenRows() {
+    // some rows are initially hidden so that user can hit the ground running
+    // we render them at this very moment, but when user can already use search function
+    const hiddenRows = document.querySelectorAll('table.configuration-reference-all-rows.tableblock > tbody > tr.row-hidden');
+    if (hiddenRows) {
+        for (row of hiddenRows) {
+            row.classList.remove('row-hidden');
+        }
     }
 }
 
@@ -164,8 +155,8 @@ function reinstallClickHandlers(table){
             var td = getAncestor(descDiv, "td");
             var row = td.parentNode;
             var decoration = content.lastElementChild;
-            var iconDecoration = decoration.children.item(0);
-            var collapsibleSpan = decoration.children.item(1);
+            var iconDecoration = decoration.firstElementChild.children.item(0);
+            var collapsibleSpan = decoration.firstElementChild.children.item(1);
             var collapsibleHandler = makeCollapsibleHandler(descDiv, td, row,
                                                             collapsibleSpan,
                                                             iconDecoration);
@@ -178,6 +169,12 @@ function reinstallClickHandlers(table){
 function swapShadowTable(input){
     var currentTable = inputs[input.id].table;
     var shadowTable = inputs[input.id].shadowTable;
+
+    // makes sure hidden rows are always displayed when search term is defined
+    if (shadowTable.classList.contains('configuration-reference-all-rows')) {
+        shadowTable.classList.remove('configuration-reference-all-rows');
+    }
+
     currentTable.parentNode.replaceChild(shadowTable, currentTable);
     inputs[input.id].table = shadowTable;
     inputs[input.id].shadowTable = currentTable;
@@ -254,41 +251,9 @@ function getAncestor(element, name){
     return null;
 }
 
-/*
- * COLLAPSIBLE DESCRIPTION
- */
-function makeCollapsible(descDiv, descHeightLong){
-    if (descHeightLong > 25) {
-        var td = getAncestor(descDiv, "td");
-        var row = td.parentNode;
-        var iconDecoration = document.createElement("i");
-        descDiv.classList.add('description-collapsed');
-        iconDecoration.classList.add('fa', 'fa-chevron-down');
-
-        var descDecoration = document.createElement("div");
-        descDecoration.classList.add('description-decoration');
-        descDecoration.appendChild(iconDecoration);
-
-        var collapsibleSpan = document.createElement("span");
-        collapsibleSpan.appendChild(document.createTextNode("Show more"));
-        descDecoration.appendChild(collapsibleSpan);
-
-        var collapsibleHandler = makeCollapsibleHandler(descDiv, td, row,
-                                                        collapsibleSpan,
-                                                        iconDecoration);
-
-        var parent = descDiv.parentNode;
-
-        parent.appendChild(descDecoration);
-        row.classList.add("row-collapsible", "row-collapsed");
-        row.addEventListener("click", collapsibleHandler);
-    }
-
-};
-
 function makeCollapsibleHandler(descDiv, td, row,
-    collapsibleSpan,
-    iconDecoration) {
+                                collapsibleSpan,
+                                iconDecoration) {
 
     return function(event) {
         var target = event.target;