teensy-audio/gui/red/ui/sidebar.js

/** Modified from original Node-Red source, for audio system visualization
 * vim: set ts=4:
 * 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");
	}
	
	$('#btn-sidebar').click(function() {toggleSidebar();});
	RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){toggleSidebar();d3.event.preventDefault();});

	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 (!btnSidebar.hasClass("active")) {
					sidebarSeparator.opening = true;
					var newChartRight = 15;
					$("#sidebar").addClass("closing");
					$("#workspace").css("right",newChartRight);
					$("#chart-zoom-controls").css("right",newChartRight+20);
					$("#sidebar").width(0);
					toggleSidebar();
					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");
					toggleSidebar();
					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");
			}
	});
	
	var btnSidebar = $("#btn-sidebar");
	function toggleSidebar() {
		//if ($('#sidebar').tabs( "option", "active" ) === false) {
		//    $('#sidebar').tabs( "option", "active",0);
		//}
		btnSidebar.toggleClass("active");
		
		if (!btnSidebar.hasClass("active")) {
			$("#main-container").addClass("sidebar-closed");
		} else {
			$("#main-container").removeClass("sidebar-closed");
		}
	}
	toggleSidebar();
	
	function showSidebar(id) {
		if (!$("#btn-sidebar").hasClass("active")) {
			toggleSidebar();
		}
		sidebar_tabs.activateTab("tab-"+id);
	}
	
	function containsTab(id) {
		return sidebar_tabs.contains("tab-"+id);
	}
	
	return {
		addTab: addTab,
		show: showSidebar,
		containsTab: containsTab
	}
	
})();