frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make tray resizble and remember size per-node-type

Browse Source
This commit is contained in:
Nick O'Leary
2016-04-13 18:07:49 -07:00
parent f9c869f521
commit a9feeaa1c9
4 changed files with 115 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
editor/js/ui/editor.js
View File

@@ -19,6 +19,8 @@ RED.editor = (function() {
var editing_config_node = null;
var subflowEditor;
var editTrayWidthCache = {};
function getCredentialsURL(nodeType, nodeID) {
var dashedType = nodeType.replace(/\s+/g, '-');
return 'credentials/' + dashedType + "/" + nodeID;
@@ -560,7 +562,8 @@ RED.editor = (function() {
}
}
],
resize: function() {
resize: function(dimensions) {
editTrayWidthCache[type] = dimensions.width;
if (editing_node && editing_node._def.oneditresize) {
var form = $("#dialog-form");
editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@@ -645,6 +648,10 @@ RED.editor = (function() {
}
});
*/
if (editTrayWidthCache[type]) {
trayOptions.width = editTrayWidthCache[type];
}
if (type === 'subflow') {
var id = editing_node.type.substring(8);
trayOptions.buttons.unshift({

34
editor/js/ui/tray.js
View File

@@ -25,6 +25,7 @@ RED.tray = (function() {
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(el);
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
if (options.buttons) {
for (var i=0;i<options.buttons.length;i++) {
var button = options.buttons[i];
@@ -52,12 +53,39 @@ RED.tray = (function() {
footer: footer,
options: options
};
el.draggable({
handle: resizer,
axis: "x",
start:function(event,ui) {
el.width('auto');
},
drag: function(event,ui) {
if (ui.position.left > -501) {
ui.position.left = -501;
} else if (tray.options.resize) {
setTimeout(function() {
tray.options.resize({width: -ui.position.left});
},0);
}
},
stop:function(event,ui) {
el.width(-ui.position.left);
el.css({left:''});
if (tray.options.resize) {
tray.options.resize({width: -ui.position.left});
}
}
});
if (options.open) {
options.open(el);
}
$("#header-shade").show();
$("#editor-shade").show();
if (options.width) {
el.width(options.width);
}
el.css({
right: -(el.width()+10)+"px",
transition: "right 0.2s ease"
@@ -72,7 +100,7 @@ RED.tray = (function() {
setTimeout(function() {
setTimeout(function() {
if (options.resize) {
options.resize();
options.resize({width:el.width()});
}
if (options.show) {
options.show();
@@ -83,7 +111,7 @@ RED.tray = (function() {
}
return {
init: function() {
init: function init() {
$( window ).resize(function() {
if (stack.length > 0) {
var tray = stack[stack.length-1];
@@ -91,7 +119,7 @@ RED.tray = (function() {
tray.body.height(trayHeight-40);
if (tray.options.resize) {
tray.options.resize();
tray.options.resize({width:tray.tray.width()});
}
}
});