From 2d228e04a60d3453a7f5bee3d9ab5dfb0d17a18b Mon Sep 17 00:00:00 2001
From: mahak <makk.bit@outlook.com>
Date: Sun, 12 Jan 2020 20:52:45 +0530
Subject: [PATCH] feat: add expand/collapse all behaviour in docs menu

---
 assets/css/_docs.scss | 20 ++++++++++++++++
 assets/js/docs.js     | 54 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/assets/css/_docs.scss b/assets/css/_docs.scss
index 62742156..e935fbba 100644
--- a/assets/css/_docs.scss
+++ b/assets/css/_docs.scss
@@ -196,6 +196,26 @@ html.docs {
     }
   }
 
+  .expand-collapse-btn {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 2.4rem;
+    padding: 4px 8px;
+    border-radius: 5px;
+    color: #5f5f5f;
+    cursor: pointer;
+    p {
+      margin: 0;
+      font-size: 16px;
+    }
+    .fa {
+      color: #979797;
+      font-size: 1.5rem;
+      margin-right: 6px;
+    }
+  }
+
   .toc-container {
     @include minimal-scrollbar();
 
diff --git a/assets/js/docs.js b/assets/js/docs.js
index ae899b32..c8fe7dc9 100644
--- a/assets/js/docs.js
+++ b/assets/js/docs.js
@@ -122,7 +122,8 @@
       return {
         'content': [],
         'searchFound': true,
-        'searchValue': ''
+        'searchValue': '',
+        'allExpanded': true
       }
     },
 
@@ -192,12 +193,42 @@
       })
     },
 
+    'getAllExpandedState': function(content) {
+      if(_.every(content, { 'expanded': true })) {
+        return true;
+      }
+      else if(_.every(content, { 'expanded': false })) {
+        return false;
+      }
+      else {
+        return this.state.allExpanded;
+      }
+    },
+
     'onChangeExpanded': function(event, index) {
       var content = this.state.content.slice(),
           collection = content[index]
 
       content[index] = _.assign({}, collection, { 'expanded': !collection.expanded })
-      this.setState({ 'content': content })
+
+      this.setState({ 
+        'content': content,
+        'allExpanded': this.getAllExpandedState(content)
+      })
+    },
+
+    'onChangeExpandCollapseAll': function(event) {
+      const currentAllExpandedState = this.state.allExpanded
+
+      function expandCollapseAll(value) {
+        return _.assign({}, value, { 'expanded': !currentAllExpandedState })
+      }
+      var content = _.map(this.state.content, expandCollapseAll)
+
+      this.setState({
+        'allExpanded': !currentAllExpandedState,
+        'content': content
+      });
     },
 
     'onChangeSearch': function(event) {
@@ -353,6 +384,25 @@
             }
           )
         ),
+        React.createElement(
+          'button',
+          {
+            'className': "expand-collapse-btn",
+            'onClick': this.onChangeExpandCollapseAll
+          },
+          React.createElement(
+            'i',
+            {
+              'aria-hidden': true,
+              'className': `fa fa-${this.state.allExpanded ? 'compress' : 'expand'}`
+            }
+          ),
+          React.createElement(
+            'p',
+            null,
+            this.state.allExpanded ? 'Collapse all' : 'Expand all'
+          )
+        ),
         elements,
         React.createElement(
           'div',