1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
node-red/public/red/ui/sidebar.js
Antoine Aflalo 01f0d5390f Adding support to LocalStorage on client side
Save the state of the Menu Item between session (like activation of
node-status and sidebar)
2014-11-11 09:04:57 +02:00

156 lines
5.7 KiB
JavaScript

/**
* Copyright 2013 IBM Corp.
*
* 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.sidebar = (function() {
//$('#sidebar').tabs();
var sidebar_tabs = RED.tabs.create({
id:"sidebar-tabs",
onchange:function(tab) {
$("#sidebar-content").children().hide();
$("#"+tab.id).show();
},
onremove: function(tab) {
$("#"+tab.id).remove();
}
});
function addTab(title,content,closeable) {
$("#sidebar-content").append(content);
$(content).hide();
sidebar_tabs.addTab({id:"tab-"+title,label:title,closeable:closeable});
//content.style.position = "absolute";
//$('#sidebar').tabs("refresh");
}
function removeTab(title) {
sidebar_tabs.removeTab("tab-"+title);
}
var sidebarSeparator = {};
$("#sidebar-separator").draggable({
axis: "x",
start:function(event,ui) {
sidebarSeparator.closing = false;
sidebarSeparator.opening = false;
var winWidth = $(window).width();
sidebarSeparator.start = ui.position.left;
sidebarSeparator.chartWidth = $("#workspace").width();
sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
if (!RED.menu.isSelected("btn-sidebar")) {
sidebarSeparator.opening = true;
var newChartRight = 15;
$("#sidebar").addClass("closing");
$("#workspace").css("right",newChartRight);
$("#chart-zoom-controls").css("right",newChartRight+20);
$("#sidebar").width(0);
RED.menu.setSelected("btn-sidebar",true);
RED.view.resize();
}
sidebarSeparator.width = $("#sidebar").width();
},
drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start;
var newSidebarWidth = sidebarSeparator.width-d;
if (sidebarSeparator.opening) {
newSidebarWidth -= 13;
}
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;
}
}
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)) {
sidebarSeparator.closing = false;
$("#sidebar").removeClass("closing");
}
var newChartRight = sidebarSeparator.chartRight-d;
$("#workspace").css("right",newChartRight);
$("#chart-zoom-controls").css("right",newChartRight+20);
$("#sidebar").width(newSidebarWidth);
sidebar_tabs.resize();
RED.view.resize();
},
stop:function(event,ui) {
RED.view.resize();
if (sidebarSeparator.closing) {
$("#sidebar").removeClass("closing");
RED.menu.setSelected("btn-sidebar",false);
if ($("#sidebar").width() < 180) {
$("#sidebar").width(180);
$("#workspace").css("right",208);
$("#chart-zoom-controls").css("right",228);
}
}
$("#sidebar-separator").css("left","auto");
$("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px");
}
});
function toggleSidebar(state) {
if (!state) {
$("#main-container").addClass("sidebar-closed");
} else {
$("#main-container").removeClass("sidebar-closed");
sidebar_tabs.resize();
}
}
function showSidebar(id) {
//RED.menu.setSelected("btn-sidebar", true);
sidebar_tabs.activateTab("tab-" + id);
}
function containsTab(id) {
return sidebar_tabs.contains("tab-"+id);
}
$(function() {
RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("btn-sidebar",!RED.menu.isSelected("btn-sidebar"));d3.event.preventDefault();});
showSidebar("info");
});
return {
addTab: addTab,
removeTab: removeTab,
show: showSidebar,
containsTab: containsTab,
toggleSidebar: toggleSidebar
}
})();