1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Add RED.stack as a common ui component

This commit is contained in:
Nick O'Leary 2017-01-30 23:47:18 +00:00
parent d7c516ab00
commit 47df5476ba
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 106 additions and 55 deletions

View File

@ -116,6 +116,7 @@ module.exports = function(grunt) {
"editor/js/ui/common/popover.js", "editor/js/ui/common/popover.js",
"editor/js/ui/common/searchBox.js", "editor/js/ui/common/searchBox.js",
"editor/js/ui/common/tabs.js", "editor/js/ui/common/tabs.js",
"editor/js/ui/common/stack.js",
"editor/js/ui/common/typedInput.js", "editor/js/ui/common/typedInput.js",
"editor/js/ui/actions.js", "editor/js/ui/actions.js",
"editor/js/ui/deploy.js", "editor/js/ui/deploy.js",

View File

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

View File

@ -773,8 +773,8 @@ RED.editor = (function() {
resize: function(dimensions) { resize: function(dimensions) {
editTrayWidthCache[type] = dimensions.width; editTrayWidthCache[type] = dimensions.width;
$(".editor-tray-content").height(dimensions.height - 78); $(".editor-tray-content").height(dimensions.height - 78);
var form = $("#dialog-form").height(dimensions.height - 78 - 40);
if (editing_node && editing_node._def.oneditresize) { if (editing_node && editing_node._def.oneditresize) {
var form = $("#dialog-form");
try { try {
editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()}); editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
} catch(err) { } catch(err) {
@ -785,60 +785,18 @@ RED.editor = (function() {
open: function(tray) { open: function(tray) {
var trayFooter = tray.find(".editor-tray-footer"); var trayFooter = tray.find(".editor-tray-footer");
var trayBody = tray.find('.editor-tray-body'); 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) { if (editing_node) {
@ -850,9 +808,9 @@ RED.editor = (function() {
} else { } else {
ns = node._def.set.id; 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"); prepareEditDialog(node,node._def,"node-input");
dialogForm.i18n(); trayBody.i18n();
}, },
close: function() { close: function() {
if (RED.view.state() != RED.state.IMPORT_DRAGGING) { if (RED.view.state() != RED.state.IMPORT_DRAGGING) {