Refactor initial loading of config properties

Author: michalvavrik

Diff for: _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;
@@ -316,4 +281,4 @@ function makeCollapsibleHandler(descDiv, td, row,
     };
 }
 
-});
+});

Diff for: _plugins/asciidoctor-extension.rb

@@ -50,4 +50,101 @@
       create_inline_pass parent, %(#{copy_btn})
     end
   end
-end
+end
+
+
+### ALL CONFIG page processors
+
+# add show more 'button'
+doc_max_id = Array.new
+Extensions.register do
+  tree_processor do
+    process do |doc|
+      # skip 2.7 branch as following code is not backwards compatible
+      if !(doc.base_dir.include? '2.7')
+        row_id = 0
+        search_field_id = 0
+        doc.find_by context: :table do |table|
+          if (table.role && (table.role.include? 'configuration-reference'))
+            table.add_role 'configuration-reference-all-rows'
+            table.rows.body.each do |row|
+              if (row && row.size > 0 && row[0].inner_document)
+                row[0].inner_document.find_by role: 'description' do |desc|
+                  row_id += 1
+                  if (desc.blocks && desc.blocks.size && (desc.blocks.size > 1 || (desc.blocks.size == 1 && desc.blocks[0].content && !(desc.blocks[0].content.start_with? 'Environment variable: '))))
+                    # now we know description consist of more than one 'Environment variable' line
+                    desc.id = %(conf-collapsible-desc-#{row_id})
+                    desc.add_role 'description-collapsed'
+                    btnBlock = Block.new(desc.parent, :paragraph, source: %(<i class="fa fa-chevron-down"></i><span>Show more</span>))
+                    btnBlock.add_role 'description-decoration'
+                    # add show more 'button'
+                    row[0].inner_document.blocks.push(btnBlock)
+                  else
+                    desc.id = %(conf-non-collapsible-desc-#{row_id})
+                  end
+                end
+              end
+            end
+            if (table.role.include? 'searchable')
+              caption = (children = table.parent.blocks)[(children.index table)-1]
+              # create new caption with disabled search input
+              new_caption = Block.new(caption.parent, :paragraph, source: %(#{caption.content} <input type="search" id="config-search-#{search_field_id}" placeholder="FILTER CONFIGURATION" disabled>))
+              search_field_id += 1
+              # replace original caption with enhanced one
+              (children = caption.parent.blocks)[children.index caption] = new_caption
+            end
+          end
+        end
+        if row_id != 0
+          # collect row ids per document
+          doc_max_id.push(row_id)
+          doc.id = %(page-with-config-#{doc_max_id.size - 1})
+        end
+      end
+    end
+  end
+end
+
+# set CSS classes to rows with description
+Extensions.register do
+  postprocessor do
+    process do |doc, output|
+      if doc.id && (doc.id.start_with? 'page-with-config-')
+        doc_max_id_idx = doc.id.gsub('page-with-config-', '').to_i
+        for id in 1..doc_max_id[doc_max_id_idx] do
+          css_class = ''
+          if (id > 30)
+            css_class = ' row-hidden'
+          end
+          if (id.odd?)
+            css_class += ' odd'
+          end
+          desc_idx = output.index(%(id="conf-collapsible-desc-#{id}"), 0)
+          if (desc_idx)
+            # collapsible description
+            # set CSS classes for collapsible row
+            row_idx = output.rindex('<tr>', desc_idx)
+            if row_idx
+              output[row_idx..(row_idx + 3)] = %(<tr class="row-collapsible row-collapsed row-with-desc#{css_class}">)
+            else
+              # illegal state - we don't expect this to happen unless there are breaking changes in Asciidoctor
+              LoggerManager.logger.error(%(Failed to detect '<tr>' element on page #{doc.title}, show more button and config search won't work as expected))
+            end
+          else
+            # odd non-collapsible row with description
+            # add 'odd' CSS class
+            desc_idx = output.index(%(id="conf-non-collapsible-desc-#{id}"), 0)
+            row_idx = output.rindex('<tr>', desc_idx)
+            if row_idx
+              output[row_idx..(row_idx + 3)] = %(<tr class="#{css_class}">)
+            else
+              # illegal state - we don't expect this to happen unless there are breaking changes in Asciidoctor
+              LoggerManager.logger.error(%(Failed to detect '<tr>' element on page #{doc.title}, row background color won't be correct))
+            end
+          end
+        end
+      end
+      output
+    end
+  end
+end

Diff for: _sass/quarkus.scss

@@ -323,11 +323,19 @@ table.configuration-reference {
 }
 
 
-table.configuration-reference.tableblock > tbody { 
-  
+table.configuration-reference-all-rows.tableblock > tbody {
+
+  > tr.row-hidden {
+    display: none;
+  }
+}
+
+table.configuration-reference.tableblock > tbody {
+
   > tr > th {
     color: $dark-blue;
   }
+
   > tr {
     background: transparent;
     > th:nth-child(1) { width: 70%; }