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

217 lines
7.5 KiB
JavaScript
Raw Normal View History

2013-09-05 16:02:48 +02:00
/**
* Copyright 2013, 2015 IBM Corp.
2013-09-05 16:02:48 +02:00
*
* 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.
**/
2014-08-08 01:01:35 +02:00
RED.sidebar = (function() {
2013-09-05 16:02:48 +02:00
2013-10-28 21:06:46 +01:00
//$('#sidebar').tabs();
var sidebar_tabs = RED.tabs.create({
id:"sidebar-tabs",
2014-02-21 10:54:50 +01:00
onchange:function(tab) {
2013-10-28 21:06:46 +01:00
$("#sidebar-content").children().hide();
$("#sidebar-footer").children().hide();
if (tab.onchange) {
tab.onchange.call(tab);
}
$(tab.content).show();
if (tab.toolbar) {
$(tab.toolbar).show();
}
},
2014-02-21 10:54:50 +01:00
onremove: function(tab) {
$(tab.content).hide();
if (tab.onremove) {
tab.onremove.call(tab);
}
2015-07-12 00:43:45 +02:00
},
minimumActiveTabWidth: 110
2013-10-28 21:06:46 +01:00
});
var knownTabs = {
};
function addTab(title,content,closeable,visible) {
var options;
if (typeof title === "string") {
// TODO: legacy support in case anyone uses this...
options = {
id: content.id,
label: title,
name: title,
content: content,
closeable: closeable,
visible: visible
}
} else if (typeof title === "object") {
options = title;
}
$("#sidebar-content").append(options.content);
$(options.content).hide();
if (options.toolbar) {
$("#sidebar-footer").append(options.toolbar);
$(options.toolbar).hide();
}
$(options.content).hide();
var id = options.id;
RED.menu.addItem("menu-item-view-menu",{
id:"menu-item-view-menu-"+options.id,
label:options.name,
onselect:function() {
showSidebar(options.id);
},
group: "sidebar-tabs"
});
knownTabs[options.id] = options;
if (options.visible !== false) {
sidebar_tabs.addTab(knownTabs[options.id]);
}
2013-10-28 21:06:46 +01:00
}
2013-09-05 16:02:48 +02:00
function removeTab(id) {
sidebar_tabs.removeTab(id);
$(knownTabs[id].content).remove();
delete knownTabs[id];
RED.menu.removeItem("menu-item-view-menu-"+id);
}
2013-09-05 16:02:48 +02:00
var sidebarSeparator = {};
$("#sidebar-separator").draggable({
axis: "x",
start:function(event,ui) {
sidebarSeparator.closing = false;
sidebarSeparator.opening = false;
2013-09-05 16:02:48 +02:00
var winWidth = $(window).width();
sidebarSeparator.start = ui.position.left;
2013-10-23 01:02:22 +02:00
sidebarSeparator.chartWidth = $("#workspace").width();
sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
2016-01-31 23:27:14 +01:00
if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true;
2015-07-14 00:21:03 +02:00
var newChartRight = 7;
$("#sidebar").addClass("closing");
$("#workspace").css("right",newChartRight);
2016-01-31 23:27:14 +01:00
$("#editor-stack").css("right",newChartRight+1);
$("#sidebar").width(0);
RED.menu.setSelected("menu-item-sidebar",true);
RED.events.emit("sidebar:resize");
}
sidebarSeparator.width = $("#sidebar").width();
2013-09-05 16:02:48 +02:00
},
drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start;
var newSidebarWidth = sidebarSeparator.width-d;
if (sidebarSeparator.opening) {
2015-07-12 00:43:45 +02:00
newSidebarWidth -= 3;
2013-09-05 16:02:48 +02:00
}
if (newSidebarWidth > 150) {
if (sidebarSeparator.chartWidth+d < 200) {
ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
d = ui.position.left-sidebarSeparator.start;
newSidebarWidth = sidebarSeparator.width-d;
}
2013-09-05 16:02:48 +02:00
}
if (newSidebarWidth < 150) {
if (!sidebarSeparator.closing) {
$("#sidebar").addClass("closing");
sidebarSeparator.closing = true;
}
if (!sidebarSeparator.opening) {
newSidebarWidth = 150;
ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
d = ui.position.left-sidebarSeparator.start;
}
} else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
2013-09-05 16:02:48 +02:00
sidebarSeparator.closing = false;
$("#sidebar").removeClass("closing");
}
var newChartRight = sidebarSeparator.chartRight-d;
$("#workspace").css("right",newChartRight);
2016-01-31 23:27:14 +01:00
$("#editor-stack").css("right",newChartRight+1);
$("#sidebar").width(newSidebarWidth);
2013-10-28 21:06:46 +01:00
sidebar_tabs.resize();
RED.events.emit("sidebar:resize");
2013-09-05 16:02:48 +02:00
},
stop:function(event,ui) {
if (sidebarSeparator.closing) {
$("#sidebar").removeClass("closing");
RED.menu.setSelected("menu-item-sidebar",false);
if ($("#sidebar").width() < 180) {
$("#sidebar").width(180);
2015-07-14 00:21:03 +02:00
$("#workspace").css("right",187);
2016-01-31 23:27:14 +01:00
$("#editor-stack").css("right",188);
}
2013-09-05 16:02:48 +02:00
}
$("#sidebar-separator").css("left","auto");
2015-07-14 00:21:03 +02:00
$("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
RED.events.emit("sidebar:resize");
2013-09-05 16:02:48 +02:00
}
});
2014-08-20 22:58:54 +02:00
function toggleSidebar(state) {
if (!state) {
2013-09-05 16:02:48 +02:00
$("#main-container").addClass("sidebar-closed");
} else {
$("#main-container").removeClass("sidebar-closed");
sidebar_tabs.resize();
2013-09-05 16:02:48 +02:00
}
RED.events.emit("sidebar:resize");
2013-09-05 16:02:48 +02:00
}
function showSidebar(id) {
2014-11-11 11:15:02 +01:00
if (id) {
if (!containsTab(id)) {
sidebar_tabs.addTab(knownTabs[id]);
}
sidebar_tabs.activateTab(id);
if (!RED.menu.isSelected("menu-item-sidebar")) {
RED.menu.setSelected("menu-item-sidebar",true);
}
2014-11-11 11:15:02 +01:00
}
}
function containsTab(id) {
return sidebar_tabs.contains(id);
}
2014-11-11 11:15:02 +01:00
function init () {
RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("menu-item-sidebar",!RED.menu.isSelected("menu-item-sidebar"));d3.event.preventDefault();});
2014-11-11 11:15:02 +01:00
showSidebar();
RED.sidebar.info.init();
2015-10-16 22:56:20 +02:00
RED.sidebar.config.init();
// hide info bar at start if screen rather narrow...
if ($(window).width() < 600) { toggleSidebar(); }
2014-11-11 11:15:02 +01:00
}
2013-09-05 16:02:48 +02:00
return {
2014-11-11 11:15:02 +01:00
init: init,
addTab: addTab,
removeTab: removeTab,
show: showSidebar,
2014-08-20 22:58:54 +02:00
containsTab: containsTab,
toggleSidebar: toggleSidebar,
2013-09-05 16:02:48 +02:00
}
2014-08-08 01:01:35 +02:00
})();