dgbuilder/public/red/ui/sidebar.js

   1 /**
   2  * Copyright 2013 IBM Corp.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  **/
  16 RED.sidebar = (function() {
  17
  18     //$('#sidebar').tabs();
  19     var sidebar_tabs = RED.tabs.create({
  20         id:"sidebar-tabs",
  21         onchange:function(tab) {
  22             $("#sidebar-content").children().hide();
  23             $("#"+tab.id).show();
  24         },
  25         onremove: function(tab) {
  26             $("#"+tab.id).remove();
  27         }
  28     });
  29     function addTab(title,content,closeable) {
  30         $("#sidebar-content").append(content);
  31         $(content).hide();
  32         sidebar_tabs.addTab({id:"tab-"+title,label:title,closeable:closeable});
  33         //content.style.position = "absolute";
  34         //$('#sidebar').tabs("refresh");
  35     }
  36
  37     function removeTab(title) {
  38         sidebar_tabs.removeTab("tab-"+title);
  39     }
  40
  41     var sidebarSeparator =  {};
  42     $("#sidebar-separator").draggable({
  43             axis: "x",
  44             start:function(event,ui) {
  45                 sidebarSeparator.closing = false;
  46                 sidebarSeparator.opening = false;
  47                 var winWidth = $(window).width();
  48                 sidebarSeparator.start = ui.position.left;
  49                 sidebarSeparator.chartWidth = $("#workspace").width();
  50                 sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
  51
  52
  53                 if (!RED.menu.isSelected("btn-sidebar")) {
  54                     sidebarSeparator.opening = true;
  55                     var newChartRight = 15;
  56                     $("#sidebar").addClass("closing");
  57                     $("#workspace").css("right",newChartRight);
  58                     $("#chart-zoom-controls").css("right",newChartRight+20);
  59                     $("#sidebar").width(0);
  60                     RED.menu.setSelected("btn-sidebar",true);
  61                     RED.view.resize();
  62                 }
  63
  64
  65                 sidebarSeparator.width = $("#sidebar").width();
  66             },
  67             drag: function(event,ui) {
  68                 var d = ui.position.left-sidebarSeparator.start;
  69                 var newSidebarWidth = sidebarSeparator.width-d;
  70                 if (sidebarSeparator.opening) {
  71                     newSidebarWidth -= 13;
  72                 }
  73
  74                 if (newSidebarWidth > 150) {
  75                     if (sidebarSeparator.chartWidth+d < 200) {
  76                         ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
  77                         d = ui.position.left-sidebarSeparator.start;
  78                         newSidebarWidth = sidebarSeparator.width-d;
  79                     }
  80                 }
  81
  82                 if (newSidebarWidth < 150) {
  83                     if (!sidebarSeparator.closing) {
  84                         $("#sidebar").addClass("closing");
  85                         sidebarSeparator.closing = true;
  86                     }
  87                     if (!sidebarSeparator.opening) {
  88                         newSidebarWidth = 150;
  89                         ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
  90                         d = ui.position.left-sidebarSeparator.start;
  91                     }
  92                 } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
  93                     sidebarSeparator.closing = false;
  94                     $("#sidebar").removeClass("closing");
  95                 }
  96
  97                 var newChartRight = sidebarSeparator.chartRight-d;
  98                 $("#workspace").css("right",newChartRight);
  99                 $("#chart-zoom-controls").css("right",newChartRight+20);
 100                 $("#sidebar").width(newSidebarWidth);
 101
 102                 sidebar_tabs.resize();
 103                 RED.view.resize();
 104
 105             },
 106             stop:function(event,ui) {
 107                 RED.view.resize();
 108                 if (sidebarSeparator.closing) {
 109                     $("#sidebar").removeClass("closing");
 110                     RED.menu.setSelected("btn-sidebar",false);
 111                     if ($("#sidebar").width() < 180) {
 112                         $("#sidebar").width(180);
 113                         $("#workspace").css("right",208);
 114                         $("#chart-zoom-controls").css("right",228);
 115                     }
 116                 }
 117                 $("#sidebar-separator").css("left","auto");
 118                 $("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px");
 119             }
 120     });
 121
 122     function toggleSidebar(state) {
 123         if (!state) {
 124             $("#main-container").addClass("sidebar-closed");
 125         } else {
 126             $("#main-container").removeClass("sidebar-closed");
 127         }
 128     }
 129
 130     function showSidebar(id) {
 131         RED.menu.setSelected("btn-sidebar",true);
 132         sidebar_tabs.activateTab("tab-"+id);
 133     }
 134
 135     function containsTab(id) {
 136         return sidebar_tabs.contains("tab-"+id);
 137     }
 138
 139
 140     $(function() {
 141         RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("btn-sidebar",!RED.menu.isSelected("btn-sidebar"));d3.event.preventDefault();});
 142         showSidebar("info");
 143     });
 144
 145
 146     return {
 147         addTab: addTab,
 148         removeTab: removeTab,
 149         show: showSidebar,
 150         containsTab: containsTab,
 151         toggleSidebar: toggleSidebar
 152     }
 153
 154 })();