From 2453719a87d5e6da2e672028585e61bc410c4168 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 7 Apr 2017 13:30:12 +0100
Subject: [PATCH] Make H3 sections in node help collapsible

---
 editor/js/ui/tab-info.js  | 15 ++++++++++++++-
 editor/sass/tab-info.scss | 17 +++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js
index 0e676bb11..deb1759c7 100644
--- a/editor/js/ui/tab-info.js
+++ b/editor/js/ui/tab-info.js
@@ -204,7 +204,20 @@ RED.sidebar.info = (function() {
             infoText = infoText + marked(textInfo);
         }
         if (infoText) {
-            addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(infoSection.content);
+            var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(infoSection.content);
+            info.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
+            var foldingHeader = "H3";
+            info.find(foldingHeader).wrapInner('<a class="node-info-header expanded" href="#"></a>')
+                .find("a").prepend('<i class="fa fa-angle-right">').click(function(e) {
+                    e.preventDefault();
+                    var isExpanded = $(this).hasClass('expanded');
+                    var el = $(this).parent().next();
+                    while(el.length === 1 && el[0].nodeName !== foldingHeader) {
+                        el.toggle(!isExpanded);
+                        el = el.next();
+                    }
+                    $(this).toggleClass('expanded',!isExpanded);
+                })
         }
 
 
diff --git a/editor/sass/tab-info.scss b/editor/sass/tab-info.scss
index b1c096d87..892ce9a87 100644
--- a/editor/sass/tab-info.scss
+++ b/editor/sass/tab-info.scss
@@ -179,6 +179,23 @@ div.node-info {
             }
         }
     }
+    .node-info-header {
+        i {
+            width: 10px;
+            text-align: center;
+            transition: transform 0.2s ease-in-out;
+            margin-right: 4px;
+        }
+        color: #333;
+        &:hover, &:focus {
+            text-decoration: none;
+        }
+        &.expanded {
+            i {
+                transform: rotate(90deg);
+            }
+        }
+    }
 
 }
 .sidebar-node-info-stack {