From 583144b2f416bb4f29dcb9e22b6876deeea4d327 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sat, 12 Dec 2020 16:30:19 +0100
Subject: [PATCH] Collapsible functionality implemented

---
 Client/WebServer/css/docs.css                 | 37 +++++++++++++++++
 .../UI/Spaces/Docs-Space/DocsSpace.js         | 40 +++++++++++++++----
 2 files changed, 70 insertions(+), 7 deletions(-)

diff --git a/Client/WebServer/css/docs.css b/Client/WebServer/css/docs.css
index 09af3d5c2..f397e1048 100644
--- a/Client/WebServer/css/docs.css
+++ b/Client/WebServer/css/docs.css
@@ -324,4 +324,41 @@ a:active.docs-footer-link {
     color: #d9534f;
     background-color: #eee;
     padding: 1 5 1 5;
+  }
+
+  /* Style the button that is used to open and close the docs-collapsible-element content */
+  .docs-collapsible-element {
+    background-color: #fdfdfd;
+    color: #444;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 125%;
+  }
+
+  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+  .active, .docs-collapsible-element:hover {
+    background-color: #eee;
+  }
+
+  /* Style the docs-collapsible-element content. Note: hidden by default */
+  .docs-collapsible-content {
+    padding: 0 18px;
+    display: none;
+    overflow: hidden;
+  }
+
+  .docs-collapsible-element:after {
+    content: '\02795'; /* Unicode character for "plus" sign (+) */
+    font-size: 8px;
+    color: white;
+    float: right;
+    margin-left: 5px;
+  }
+  
+  .docs-collapsible-active:after {
+    content: "\2796"; /* Unicode character for "minus" sign (-) */
   }
\ No newline at end of file
diff --git a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
index 87c3835ab..a29a9be0b 100644
--- a/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
+++ b/Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js
@@ -443,6 +443,30 @@ function newSuperalgosDocSpace() {
         scrollingDiv.scrollTop = topPos
     }
 
+    function enableCollapsibleContent() {
+        let collapsibleElementsArray = document.getElementsByClassName("docs-collapsible-element")
+        
+        for (let i = 0; i < collapsibleElementsArray.length; i++) {
+            collapsibleElementsArray[i].addEventListener("click", function () {
+                this.classList.toggle("docs-collapsible-active")
+                let content = this.nextElementSibling
+                if (content.style.display === "block") {
+                    content.style.display = "none";
+                } else {
+                    content.style.display = "block";
+                }
+            })
+        }
+    }
+
+    function disableCollapsibleContent() {
+        let collapsibleElementsArray = document.getElementsByClassName("docs-collapsible-element")
+
+        for (let i = 0; i < collapsibleElementsArray.length; i++) {
+            collapsibleElementsArray[i].removeEventListener("click", function () { })
+        }
+    }
+
     function openSpaceAreaAndNavigateTo(category, type, project) {
         navigateTo(category, type, project)
         thisObject.sidePanelTab.open()
@@ -450,6 +474,8 @@ function newSuperalgosDocSpace() {
 
     function navigateTo(category, type, project) {
 
+        disableCollapsibleContent()
+
         docSchemaParagraphMap = new Map()
         objectBeingRendered = {
             category: category,
@@ -458,6 +484,7 @@ function newSuperalgosDocSpace() {
         }
 
         renderPage()
+        enableCollapsibleContent()
         scrollToElement('docs-context-menu-clickeable-div')
 
     }
@@ -542,16 +569,13 @@ function newSuperalgosDocSpace() {
                     paragraphIndex++
                     for (let i = 0; i < nodeAppDefinition.menuItems.length; i++) {
                         let menuItem = nodeAppDefinition.menuItems[i]
-                        paragraph = {
-                            style: "Subtitle",
-                            text: menuItem.label
-                        }
-                        renderParagraph(paragraph, key)
-                        paragraphIndex++
 
+                        HTML = HTML + '<button type="button" class="docs-collapsible-element">' + menuItem.label + '</button>'
+                        HTML = HTML + '<div class="docs-collapsible-content">'
+                        
                         paragraph = {
                             style: "Text",
-                            text: menuItem.label + ' has the following properties:'
+                            text: 'The ' + menuItem.label + ' menu item has the following properties:'
                         }
                         renderParagraph(paragraph, key)
                         paragraphIndex++
@@ -564,6 +588,8 @@ function newSuperalgosDocSpace() {
                             renderParagraph(paragraph, key)
                             paragraphIndex++
                         }
+
+                        HTML = HTML + '</div>'
                     }
                 }
             }