frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add RED.stack as a common ui component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

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

92
editor/js/ui/common/stack.js Normal file
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
}
})();

68
editor/js/ui/editor.js
View File

@ -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) {