https://manicken.github.io/red/ui/sidebar-palette.js

1/** Modified from original Node-Red source, for audio system visualization
2 * vim: set ts=4:
3 * Copyright 2013 IBM Corp.
4 *
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
8 *
9 * http://www.apache.org/licenses/LICENSE-2.0
10 *
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
16 **/
17RED.sidebar.palette = (function() {
18	var minimumSize = 100;
19	var minChartSize = 200;
20/*
21	//$('#sidebar').tabs();
22	var sidebar_tabs = RED.tabs.create({
23		id:"sidebar-tabs",
24		onchange:function(tab) {
25			$("#sidebar-content").children().hide();
26			$("#"+tab.id).show();
27		},
28		onremove: function(tab) {
29			$("#"+tab.id).remove();
30		}
31	});
32	function addTab(title,content,closeable) {
33		$("#sidebar-content").append(content);
34		$(content).hide();
35		sidebar_tabs.addTab({id:"tab-"+title,label:title,closeable:closeable});
36		//content.style.position = "absolute";
37		//$('#sidebar').tabs("refresh");
38	}*/
39	var btnSidebar = $("#btn-sidebar-palette");
40	$('#btn-sidebar-palette').click(function() {toggleSidebar();});
41	//RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){toggleSidebar();d3.event.preventDefault();}); // can't have multiple actions on same key
42	// 
43
44	var sidebarSeparator =  {};
45	$("#sidebar-palette-separator").draggable({
46			axis: "x",
47			start:function(event,ui) {
48				console.warn("sb-pal-start");
49				sidebarSeparator.closing = false;
50				sidebarSeparator.opening = false;
51				var winWidth = $(window).width();
52				sidebarSeparator.start = ui.position.left;
53				sidebarSeparator.chartWidth = $("#workspace").width();
54				//sidebarSeparator.chartLeft = winWidth-$("#workspace").width()-$("#workspace").offset().right-2;
55				sidebarSeparator.chartLeft = $("#workspace").css("left");
56				console.log("sidebarSeparator.chartLeft="+sidebarSeparator.chartLeft);
57				if (!btnSidebar.hasClass("active")) {
58					sidebarSeparator.opening = true;
59					var newChartLeft = 15;
60					$("#sidebar-palette").addClass("closing");
61					$("#workspace").css("left",newChartLeft);
62					//$("#chart-zoom-controls").css("left",newChartLeft+20);
63					$("#sidebar-palette").width(0);
64					toggleSidebar();
65					RED.view.resize();
66				}
67
68				
69				sidebarSeparator.width = $("#sidebar-palette").width();
70			},
71			drag: function(event,ui) {
72				//console.log("ui.position.left="+ui.position.left);
73				//console.log("sidebarSeparator.start="+sidebarSeparator.start);
74				var d = ui.position.left-sidebarSeparator.start;
75
76				var newSidebarWidth = sidebarSeparator.width+d ;
77				/*if (sidebarSeparator.opening) {
78					newSidebarWidth += 13;
79				}*/
80				
81				// takes care of chart minimum size
82				if (newSidebarWidth > minimumSize) {
83					//console.warn("newSidebarWidth > minimumSize");
84					if (sidebarSeparator.chartWidth-d < minChartSize) { 
85						//console.warn("sidebarSeparator.chartWidth-d < minChartSize");
86						ui.position.left = minChartSize-sidebarSeparator.start+sidebarSeparator.chartWidth;
87						d = ui.position.left-sidebarSeparator.start;
88						newSidebarWidth = sidebarSeparator.width+d;
89					}
90				}
91				
92				// take care of opening/closing of sidebar
93				if (newSidebarWidth < minimumSize) {
94					console.warn("newSidebarWidth < minimumSize");
95					if (!sidebarSeparator.closing) {
96						$("#sidebar-palette").addClass("closing");
97						sidebarSeparator.closing = true;
98					}
99					if (!sidebarSeparator.opening) {
100						console.warn("!sidebarSeparator.opening");
101						newSidebarWidth = minimumSize;
102						ui.position.left = minimumSize; //sidebarSeparator.width-(minimumSize - sidebarSeparator.start);
103						d = ui.position.left-sidebarSeparator.start;
104					}
105				} else if (newSidebarWidth > minimumSize && (sidebarSeparator.closing || sidebarSeparator.opening)) {
106					sidebarSeparator.closing = false;
107					$("#sidebar-palette").removeClass("closing");
108				}
109
110				//var newChartLeft = sidebarSeparator.chartLeft-d;
111				$("#workspace").css("left",newSidebarWidth+15);
112				$("#bottombar").css("left",newSidebarWidth+15);
113				$("#sidebar-palette").width(newSidebarWidth);
114				//sidebar_tabs.resize();
115				RED.view.resize();
116					
117			},
118			stop:function(event,ui) {
119				console.warn("sb-pal stop");
120				RED.view.resize();
121				if (sidebarSeparator.closing) {
122					$("#sidebar-palette").removeClass("closing");
123					toggleSidebar(); // just for the button
124					if ($("#sidebar-palette").width() < 180) {
125						//$("#sidebar-palette").width(0);

125 // taken care of by stylesheet @ sidebar-palette-closed class
126						//$("#workspace").css("left",0);
127						//$("#bottombar").css("left",0);
128						//$("#chart-zoom-controls").css("right",228);
129					}
130				}
131				$("#sidebar-palette-separator").css("right","auto");
132				$("#sidebar-palette-separator").css("left",($("#sidebar-palette").width())+"px");
133			}
134	});
135	
136	
137	function toggleSidebar() {
138		//if ($('#sidebar').tabs( "option", "active" ) === false) {
139		//    $('#sidebar').tabs( "option", "active",0);
140		//}
141		btnSidebar.toggleClass("active");
142		
143		if (!btnSidebar.hasClass("active")) {
144			$("#main-container").addClass("sidebar-palette-closed");
145		} else {
146			$("#main-container").removeClass("sidebar-palette-closed");
147		}
148	}
149	toggleSidebar();
150	
151	function showSidebar(id) {
152		if (!$("#btn-sidebar-palette").hasClass("active")) {
153			toggleSidebar();
154		}
155		//sidebar_tabs.activateTab("tab-"+id);
156	}
157	/*
158	function containsTab(id) {
159		return sidebar_tabs.contains("tab-"+id);
160	}*/
161	
162	return {
163		//addTab: addTab,
164		show: showSidebar,
165		toggleSidebar,toggleSidebar
166		//containsTab: containsTab
167	}
168	
169})();