mirror of https://github.com/node-red/node-red.git
336 lines
13 KiB
JavaScript
336 lines
13 KiB
JavaScript
/**
|
|
* 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.tray = (function() {
|
|
|
|
var stack = [];
|
|
var editorStack;
|
|
var openingTray = false;
|
|
var stackHidden = false;
|
|
|
|
function resize() {
|
|
|
|
}
|
|
function showTray(options) {
|
|
var el = $('<div class="red-ui-tray"></div>');
|
|
// `editor-tray-header` is deprecated - use red-ui-tray-body instead
|
|
var header = $('<div class="red-ui-tray-header editor-tray-header"></div>').appendTo(el);
|
|
var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(el);
|
|
// `editor-tray-body` is deprecated - use red-ui-tray-body instead
|
|
var body = $('<div class="red-ui-tray-body editor-tray-body"></div>').appendTo(bodyWrapper);
|
|
// `editor-tray-footer` is deprecated - use red-ui-tray-footer instead
|
|
var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(el);
|
|
var resizer = $('<div class="red-ui-tray-resize-handle"></div>').appendTo(el);
|
|
// var growButton = $('<a class="red-ui-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
|
|
// var shrinkButton = $('<a class="red-ui-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
|
|
if (options.title) {
|
|
var titles = stack.map(function(e) { return e.options.title });
|
|
titles.push(options.title);
|
|
var title = '<ul class="red-ui-tray-breadcrumbs"><li>'+titles.join("</li><li>")+'</li></ul>';
|
|
|
|
$('<div class="red-ui-tray-titlebar">'+title+'</div>').appendTo(header);
|
|
}
|
|
if (options.width === Infinity) {
|
|
options.maximized = true;
|
|
resizer.addClass('red-ui-tray-resize-maximised');
|
|
}
|
|
var buttonBar = $('<div class="red-ui-tray-toolbar"></div>').appendTo(header);
|
|
var primaryButton;
|
|
if (options.buttons) {
|
|
for (var i=0;i<options.buttons.length;i++) {
|
|
var button = options.buttons[i];
|
|
var b = $('<button>').button().appendTo(buttonBar);
|
|
if (button.id) {
|
|
b.attr('id',button.id);
|
|
}
|
|
if (button.text) {
|
|
b.text(button.text);
|
|
}
|
|
if (button.click) {
|
|
b.on("click", (function(action) {
|
|
return function(evt) {
|
|
if (!$(this).hasClass('disabled')) {
|
|
action(evt);
|
|
}
|
|
};
|
|
})(button.click));
|
|
}
|
|
if (button.class) {
|
|
b.addClass(button.class);
|
|
if (button.class === "primary") {
|
|
primaryButton = button;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
el.appendTo(editorStack);
|
|
var tray = {
|
|
tray: el,
|
|
header: header,
|
|
body: body,
|
|
footer: footer,
|
|
options: options,
|
|
primaryButton: primaryButton
|
|
};
|
|
stack.push(tray);
|
|
|
|
if (!options.maximized) {
|
|
el.draggable({
|
|
handle: resizer,
|
|
axis: "x",
|
|
start:function(event,ui) {
|
|
el.width('auto');
|
|
},
|
|
drag: function(event,ui) {
|
|
var absolutePosition = editorStack.position().left+ui.position.left
|
|
if (absolutePosition < 7) {
|
|
ui.position.left += 7-absolutePosition;
|
|
} else if (ui.position.left > -tray.preferredWidth-1) {
|
|
ui.position.left = -Math.min(editorStack.position().left-7,tray.preferredWidth-1);
|
|
}
|
|
if (tray.options.resize) {
|
|
setTimeout(function() {
|
|
tray.options.resize({width: -ui.position.left});
|
|
},0);
|
|
}
|
|
tray.width = -ui.position.left;
|
|
},
|
|
stop:function(event,ui) {
|
|
el.width(-ui.position.left);
|
|
el.css({left:''});
|
|
if (tray.options.resize) {
|
|
tray.options.resize({width: -ui.position.left});
|
|
}
|
|
tray.width = -ui.position.left;
|
|
}
|
|
});
|
|
}
|
|
|
|
function finishBuild() {
|
|
$("#red-ui-header-shade").show();
|
|
$("#red-ui-editor-shade").show();
|
|
$("#red-ui-palette-shade").show();
|
|
$(".red-ui-sidebar-shade").show();
|
|
tray.preferredWidth = Math.max(el.width(),500);
|
|
if (!options.maximized) {
|
|
body.css({"minWidth":tray.preferredWidth-40});
|
|
}
|
|
if (options.width) {
|
|
if (options.width > $("#red-ui-editor-stack").position().left-8) {
|
|
options.width = $("#red-ui-editor-stack").position().left-8;
|
|
}
|
|
el.width(options.width);
|
|
} else {
|
|
el.width(tray.preferredWidth);
|
|
}
|
|
|
|
tray.width = el.width();
|
|
if (tray.width > $("#red-ui-editor-stack").position().left-8) {
|
|
tray.width = Math.max(0/*tray.preferredWidth*/,$("#red-ui-editor-stack").position().left-8);
|
|
el.width(tray.width);
|
|
}
|
|
|
|
// tray.body.parent().width(Math.min($("#red-ui-editor-stack").position().left-8,tray.width));
|
|
|
|
|
|
$("#red-ui-main-container").scrollLeft(0);
|
|
el.css({
|
|
right: -(el.width()+10)+"px",
|
|
transition: "right 0.25s ease"
|
|
});
|
|
handleWindowResize();
|
|
openingTray = true;
|
|
setTimeout(function() {
|
|
setTimeout(function() {
|
|
if (!options.width) {
|
|
el.width(Math.min(tray.preferredWidth,$("#red-ui-editor-stack").position().left-8));
|
|
}
|
|
if (options.resize) {
|
|
options.resize({width:el.width()});
|
|
}
|
|
if (options.show) {
|
|
options.show();
|
|
}
|
|
setTimeout(function() {
|
|
// Delay resetting the flag, so we don't close prematurely
|
|
openingTray = false;
|
|
raiseTrayZ();
|
|
handleWindowResize();//cause call to monaco layout
|
|
},200);
|
|
body.find(":focusable:first").trigger("focus");
|
|
|
|
},150);
|
|
el.css({right:0});
|
|
},0);
|
|
}
|
|
if (options.open) {
|
|
if (options.open.length === 1) {
|
|
options.open(el);
|
|
finishBuild();
|
|
} else {
|
|
options.open(el,finishBuild);
|
|
}
|
|
} else {
|
|
finishBuild();
|
|
}
|
|
}
|
|
|
|
function handleWindowResize() {
|
|
if (stack.length > 0) {
|
|
var tray = stack[stack.length-1];
|
|
if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {
|
|
tray.width = $("#red-ui-editor-stack").position().left-8;
|
|
tray.tray.width(tray.width);
|
|
// tray.body.parent().width(tray.width);
|
|
} else if (tray.width < tray.preferredWidth) {
|
|
tray.width = Math.min($("#red-ui-editor-stack").position().left-8,tray.preferredWidth);
|
|
tray.tray.width(tray.width);
|
|
// tray.body.parent().width(tray.width);
|
|
}
|
|
var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
|
|
tray.body.height(trayHeight);
|
|
if (tray.options.resize) {
|
|
tray.options.resize({width:tray.width, height:trayHeight});
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
//raise tray z-index to prevent editor context menu being clipped by sidebar
|
|
function raiseTrayZ() {
|
|
setTimeout(function(){
|
|
$('#red-ui-editor-stack').css("zIndex","13");
|
|
},300);
|
|
}
|
|
//lower tray z-index back to original place for correct slide animation (related to fix for editor context menu clipped by sidebar)
|
|
function lowerTrayZ(){
|
|
$('#red-ui-editor-stack').css("zIndex","9");
|
|
}
|
|
|
|
return {
|
|
init: function init() {
|
|
editorStack = $("#red-ui-editor-stack");
|
|
$(window).on("resize", handleWindowResize);
|
|
RED.events.on("sidebar:resize",handleWindowResize);
|
|
$("#red-ui-editor-shade").on("click", function() {
|
|
if (!openingTray) {
|
|
var tray = stack[stack.length-1];
|
|
if (tray && tray.primaryButton) {
|
|
tray.primaryButton.click();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
show: function show(options) {
|
|
lowerTrayZ();
|
|
if (!options) {
|
|
if (stack.length > 0) {
|
|
var tray = stack[stack.length-1];
|
|
tray.tray.css({right:0});
|
|
$("#red-ui-header-shade").show();
|
|
$("#red-ui-editor-shade").show();
|
|
$("#red-ui-palette-shade").show();
|
|
$(".red-ui-sidebar-shade").show();
|
|
stackHidden = false;
|
|
}
|
|
} else if (stackHidden) {
|
|
throw new Error("Cannot add to stack whilst hidden");
|
|
} else if (stack.length > 0 && !options.overlay) {
|
|
var oldTray = stack[stack.length-1];
|
|
if (options.width === "inherit") {
|
|
options.width = oldTray.tray.width();
|
|
}
|
|
oldTray.tray.css({
|
|
right: -(oldTray.tray.width()+10)+"px"
|
|
});
|
|
setTimeout(function() {
|
|
oldTray.tray.detach();
|
|
showTray(options);
|
|
},250)
|
|
} else {
|
|
if (stack.length > 0) {
|
|
stack[stack.length-1].tray.css("z-index", 0);
|
|
}
|
|
RED.events.emit("editor:open");
|
|
showTray(options);
|
|
}
|
|
|
|
},
|
|
hide: function hide() {
|
|
lowerTrayZ();
|
|
if (stack.length > 0) {
|
|
var tray = stack[stack.length-1];
|
|
tray.tray.css({
|
|
right: -(tray.tray.width()+10)+"px"
|
|
});
|
|
$("#red-ui-header-shade").hide();
|
|
$("#red-ui-editor-shade").hide();
|
|
$("#red-ui-palette-shade").hide();
|
|
$(".red-ui-sidebar-shade").hide();
|
|
stackHidden = true;
|
|
}
|
|
},
|
|
resize: handleWindowResize,
|
|
close: function close(done) {
|
|
lowerTrayZ(); //lower tray z-index for correct animation
|
|
if (stack.length > 0) {
|
|
var tray = stack.pop();
|
|
tray.tray.css({
|
|
right: -(tray.tray.width()+10)+"px"
|
|
});
|
|
setTimeout(function() {
|
|
try {
|
|
if (tray.options.close) { tray.options.close(); }
|
|
} catch (ex) { }
|
|
tray.tray.remove();
|
|
if (stack.length > 0) {
|
|
var oldTray = stack[stack.length-1];
|
|
if (!oldTray.options.overlay) {
|
|
oldTray.tray.appendTo("#red-ui-editor-stack");
|
|
setTimeout(function() {
|
|
handleWindowResize();
|
|
oldTray.tray.css({right:0});
|
|
if (oldTray.options.show) {
|
|
raiseTrayZ();
|
|
handleWindowResize();//cause call to monaco layout
|
|
oldTray.options.show();
|
|
}
|
|
},0);
|
|
} else {
|
|
handleWindowResize();
|
|
if (oldTray.options.show) {
|
|
oldTray.options.show();
|
|
}
|
|
}
|
|
}
|
|
if (done) {
|
|
done();
|
|
}
|
|
if (stack.length === 0) {
|
|
$("#red-ui-header-shade").hide();
|
|
$("#red-ui-editor-shade").hide();
|
|
$("#red-ui-palette-shade").hide();
|
|
$(".red-ui-sidebar-shade").hide();
|
|
RED.events.emit("editor:close");
|
|
RED.view.focus();
|
|
} else {
|
|
stack[stack.length-1].tray.css("z-index", "auto");
|
|
}
|
|
},250)
|
|
}
|
|
}
|
|
}
|
|
})();
|