mirror of https://github.com/node-red/node-red.git
Add RED.stack as a common ui component
This commit is contained in:
Nick O'Leary
parent
d7c516ab00
commit
47df5476ba
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
})();
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue