From 47df5476ba03cf68d67a2ad2fc33f3de3b0004d8 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 30 Jan 2017 23:47:18 +0000
Subject: [PATCH] Add RED.stack as a common ui component

---
 Gruntfile.js                 |  1 +
 editor/js/ui/common/stack.js | 92 ++++++++++++++++++++++++++++++++++++
 editor/js/ui/editor.js       | 68 +++++---------------------
 3 files changed, 106 insertions(+), 55 deletions(-)
 create mode 100644 editor/js/ui/common/stack.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 891469c24..8cc406345 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -116,6 +116,7 @@ module.exports = function(grunt) {
                     "editor/js/ui/common/popover.js",
                     "editor/js/ui/common/searchBox.js",
                     "editor/js/ui/common/tabs.js",
+                    "editor/js/ui/common/stack.js",
                     "editor/js/ui/common/typedInput.js",
                     "editor/js/ui/actions.js",
                     "editor/js/ui/deploy.js",
diff --git a/editor/js/ui/common/stack.js b/editor/js/ui/common/stack.js
new file mode 100644
index 000000000..b273b9f22
--- /dev/null
+++ b/editor/js/ui/common/stack.js
@@ -0,0 +1,92 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.stack = (function() {
+    function createStack(options) {
+        var container = options.container;
+
+        var entries = [];
+
+        return {
+            add: function(entry) {
+
+                entries.push(entry);
+                var entryContainer = $('<div class="palette-category">').appendTo(container);
+
+                var header = $('<div class="palette-header"></div>').appendTo(entryContainer);
+                var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
+                $('<span></span>').html(entry.title).appendTo(header);
+                entry.content = $('<div class="editor-tray-content"></div>').appendTo(entryContainer);
+
+                if (entry.expanded) {
+                    icon.addClass("expanded");
+                } else {
+                    entry.content.hide();
+                }
+
+                header.click(function() {
+                    if (options.singleExpanded) {
+                        if (!entry.isExpanded()) {
+                            for (var i=0;i<entries.length;i++) {
+                                if (entries[i].isExpanded()) {
+                                    entries[i].collapse();
+                                }
+                            }
+                            entry.expand();
+                        }
+                    } else {
+                        entry.toggle();
+                    }
+                });
+                entry.toggle = function() {
+                    if (entry.isExpanded()) {
+                        entry.collapse();
+                        return false;
+                    } else {
+                        entry.expand();
+                        return true;
+                    }
+                };
+                entry.expand = function() {
+                    if (!entry.isExpanded()) {
+                        icon.addClass("expanded");
+                        entry.content.slideDown(200);
+                        return true;
+                    }
+                };
+                entry.collapse = function() {
+                    if (entry.isExpanded()) {
+                        icon.removeClass("expanded");
+                        entry.content.slideUp(200);
+                        return true;
+                    }
+                };
+                entry.isExpanded = function() {
+                    return icon.hasClass("expanded");
+                };
+
+                return entry;
+
+            },
+
+        }
+
+    }
+
+    return {
+        create: createStack
+    }
+})();
diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js
index fb39ee2e3..3729dc22d 100644
--- a/editor/js/ui/editor.js
+++ b/editor/js/ui/editor.js
@@ -773,8 +773,8 @@ RED.editor = (function() {
             resize: function(dimensions) {
                 editTrayWidthCache[type] = dimensions.width;
                 $(".editor-tray-content").height(dimensions.height - 78);
+                var form = $("#dialog-form").height(dimensions.height - 78 - 40);
                 if (editing_node && editing_node._def.oneditresize) {
-                    var form = $("#dialog-form");
                     try {
                         editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
                     } catch(err) {
@@ -785,60 +785,18 @@ RED.editor = (function() {
             open: function(tray) {
                 var trayFooter = tray.find(".editor-tray-footer");
                 var trayBody = tray.find('.editor-tray-body');
-                var editFormBody = tray.find('.editor-tray-body');
+                trayBody.parent().css('overflow','hidden');
 
-                var buildThing = function(el) {
-                    var icon = el.find(".palette-header > i");
-                    var body = el.find(".editor-tray-content");
-                    var result = {
-                        el:el,
-                        body:body,
-                        expand: function() {
-                            icon.addClass("expanded");
-                            body.slideDown();
-                        },
-                        collapse: function() {
-                            icon.removeClass("expanded");
-                            body.slideUp();
-                        },
-                        toggle: function() {
-                            if (icon.hasClass("expanded")) {
-                                result.collapse();
-                                return false;
-                            } else {
-                                result.expand();
-                                return true;
-                            }
-                        }
-                    }
-                    return result;
-                }
-
-                var nodePropertiesSection = buildThing($('<div class="palette-category">'+
-                    '<div class="palette-header"><i class="fa fa-angle-down expanded"></i><span>node properties</span></div>'+
-                    '<div class="editor-tray-content"></div>'+
-                    '</div>').appendTo(trayBody));
-
-                var portLabelsSection = buildThing($('<div class="palette-category">'+
-                    '<div class="palette-header"><i class="fa fa-angle-down"></i><span>port labels</span></div>'+
-                    '<div class="editor-tray-content hide"></div>'+
-                    '</div>').appendTo(trayBody));
-
-                portLabelsSection.el.find(".palette-header").click(function(el) {
-                    var res = portLabelsSection.toggle();
-                    if (res) {
-                        nodePropertiesSection.collapse();
-                    } else {
-                        nodePropertiesSection.expand();
-                    }
+                var stack = RED.stack.create({
+                    container: trayBody,
+                    singleExpanded: true
                 });
-                nodePropertiesSection.el.find(".palette-header").click(function(el) {
-                    var res = nodePropertiesSection.toggle();
-                    if (res) {
-                        portLabelsSection.collapse();
-                    } else {
-                        portLabelsSection.expand();
-                    }
+                var nodeProperties = stack.add({
+                    title: "node properties",
+                    expanded: true,
+                });
+                var portLabels = stack.add({
+                    title: "port labels"
                 });
 
                 if (editing_node) {
@@ -850,9 +808,9 @@ RED.editor = (function() {
                 } else {
                     ns = node._def.set.id;
                 }
-                var dialogForm = buildEditForm(nodePropertiesSection.body,"dialog-form",type,ns);
+                var dialogForm = buildEditForm(nodeProperties.content,"dialog-form",type,ns);
                 prepareEditDialog(node,node._def,"node-input");
-                dialogForm.i18n();
+                trayBody.i18n();
             },
             close: function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {