Add RED.stack as a common ui component

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",

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
+    }
+})();

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 stack = RED.stack.create({
-                    var icon = el.find(".palette-header > i");
+                    container: trayBody,
-                    var body = el.find(".editor-tray-content");
+                    singleExpanded: true
-                    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();
-                    }
                 });
-                nodePropertiesSection.el.find(".palette-header").click(function(el) {
+                var nodeProperties = stack.add({
-                    var res = nodePropertiesSection.toggle();
+                    title: "node properties",
-                    if (res) {
+                    expanded: true,
-                        portLabelsSection.collapse();
+                });
-                    } else {
+                var portLabels = stack.add({
-                        portLabelsSection.expand();
+                    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) {