HTML Report: Added expand all and collapse all buttons (fixes #37)

TNG · Oct 5, 2014 · 67959ed · 67959ed
1 parent 296ed3f
commit 67959ed
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 11 deletions.
diff --git a/jgiven-core/src/main/java/com/tngtech/jgiven/report/html/ReportModelHtmlWriter.java b/jgiven-core/src/main/java/com/tngtech/jgiven/report/html/ReportModelHtmlWriter.java
@@ -149,6 +149,8 @@ public void visit( ReportModel reportModel ) {
             writer.println( "<input class='search-input' id='content-search-input' size='30'"
                     + " placeholder='enter regexp to search in scenarios'"
                     + " onkeydown='contentSearchChanged(event)'></input>" );
+            writer.println("<i class='icon-plus-squared-alt' id='expand-all-icon' title='Expand All' onclick='expandAllClicked()'></i>");
+            writer.println("<i class='icon-minus-squared-alt' id='collapse-all-icon' title='Collapse All' onclick='collapseAllClicked()'></i>");
         }
     }
 

diff --git a/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/default.css b/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/default.css
@@ -298,6 +298,11 @@ h1 {
   padding: 20px;
 }
 
+#expand-all-icon, #collapse-all-icon {
+  cursor: pointer;
+  float: right;
+}
+
 #content > ul {
   list-style-type: none;
   padding-left:0px;

diff --git a/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/fontawesome.css b/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/fontawesome.css
@@ -23,9 +23,12 @@
   line-height: 1em;
 }
 
-.icon-ok:before { content: '\e800'; } /* '' */
-.icon-cancel:before { content: '\e801'; } /* '' */
-.icon-block:before { content: '\e802'; } /* '' */
-.icon-right-open:before { content: '\e803'; } /* '' */
-.icon-down-open:before { content: '\e804'; } /* '' */
-.icon-menu:before { content: '\e805'; } /* '' */
+.icon-plus-squared-alt:before { content: '\e800'; } /* '' */
+.icon-minus-squared-alt:before { content: '\e801'; } /* '' */
+.icon-attention-alt:before { content: '\e802'; } /* '' */
+.icon-ok:before { content: '\e803'; } /* '' */
+.icon-right-open:before { content: '\e804'; } /* '' */
+.icon-down-open:before { content: '\e805'; } /* '' */
+.icon-block:before { content: '\e806'; } /* '' */
+.icon-cancel:before { content: '\e807'; } /* '' */
+.icon-menu:before { content: '\e808'; } /* '' */
diff --git a/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/fontawesome.ttf b/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/fontawesome.ttf
diff --git a/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/report.js b/jgiven-core/src/main/resources/com/tngtech/jgiven/report/html/report.js
@@ -85,14 +85,14 @@ function contentSearchChanged(event) {
    }
 
    searchTimeout = window.setTimeout( function() {
-      var toc = document.getElementById('content');
+      var content = document.getElementById('content');
       var searchfield = document.getElementById('content-search-input');
       var search = searchfield.value;
       console.log("Search for " + search);
-      openMatchingElements(new RegExp(search,'i'), toc, 2, contentElementsToToggle, elementsToBeSearched);
+      openMatchingElements(new RegExp(search,'i'), content, 2, contentElementsToToggle, elementsToBeSearched);
 
       if (search === '') {
-         collapseAll(toc, 1, contentElementsToBeClosed);
+         collapseAll(content, 1, contentElementsToBeClosed);
       }
    }, SEARCH_TIMEOUT);
 }
@@ -136,14 +136,39 @@ function elementsToBeSearched(element) {
 }
 
 function contentElementsToBeClosed(element) {
-   return element.className === 'scenario-body'
-      || element.className === 'case-content';
+   return element.className && (element.className.indexOf('scenario-body') !== -1
+      || element.className.indexOf('case-content') !== -1);
 }
 
 function ulElement(element) {
    return element.tagName === "UL";
 }
 
+function expandAllClicked() {
+   expandAll( document.getElementById('content'), contentElementsToBeClosed )
+}
+
+function expandAll(element, toBeExpanded) {
+   if (isCollapsed(element) && toBeExpanded(element)) {
+      toggleElement(element);
+   }
+
+   expandChildren(element, toBeExpanded);
+}
+
+function expandChildren(element, toBeExpanded) {
+   var child = element.firstChild;
+   while (child) {
+      expandAll(child, toBeExpanded);
+      child = child.nextSibling;
+   }
+}
+
+
+function collapseAllClicked() {
+   collapseAll( document.getElementById('content'), 1, contentElementsToBeClosed);
+}
+
 function collapseAll(element, depth, toBeClosed) {
    unhighlight(element);