dgbuilder/public/red/ui/tabs.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
  17
  18
  19 RED.tabs = (function() {
  20
  21
  22     function createTabs(options) {
  23         var tabs = {};
  24
  25         var ul = $("#"+options.id)
  26         ul.addClass("red-ui-tabs");
  27         ul.children().first().addClass("active");
  28         ul.children().addClass("red-ui-tab");
  29
  30         function onTabClick() {
  31             activateTab($(this));
  32             return false;
  33         }
  34
  35         function onTabDblClick() {
  36             if (options.ondblclick) {
  37                 options.ondblclick(tabs[$(this).attr('href').slice(1)]);
  38             }
  39             return false;
  40         }
  41
  42         function activateTab(link) {
  43             if (typeof link === "string") {
  44                 link = ul.find("a[href='#"+link+"']");
  45             }
  46             if (!link.parent().hasClass("active")) {
  47                 ul.children().removeClass("active");
  48                 link.parent().addClass("active");
  49                 if (options.onchange) {
  50                     options.onchange(tabs[link.attr('href').slice(1)]);
  51                 }
  52             }
  53         }
  54
  55         function updateTabWidths() {
  56             var tabs = ul.find("li.red-ui-tab");
  57             var width = ul.width();
  58             var tabCount = tabs.size();
  59             var tabWidth = (width-6-(tabCount*7))/tabCount;
  60             var pct = 100*tabWidth/width;
  61             tabs.css({width:pct+"%"});
  62         }
  63
  64         ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);
  65         updateTabWidths();
  66
  67
  68         function removeTab(id) {
  69             var li = ul.find("a[href='#"+id+"']").parent();
  70             if (li.hasClass("active")) {
  71                 var tab = li.prev();
  72                 if (tab.size() === 0) {
  73                     tab = li.next();
  74                 }
  75                 activateTab(tab.find("a"));
  76             }
  77             li.remove();
  78             if (options.onremove) {
  79                 options.onremove(tabs[id]);
  80             }
  81             delete tabs[id];
  82             updateTabWidths();
  83         }
  84
  85         return {
  86             addTab: function(tab) {
  87                 tabs[tab.id] = tab;
  88                 var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
  89                 var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
  90                 link.html(tab.label);
  91
  92                 link.on("click",onTabClick);
  93                 link.on("dblclick",onTabDblClick);
  94                 if (tab.closeable) {
  95                     var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
  96                     closeLink.html('<i class="fa fa-times" />');
  97
  98                     closeLink.on("click",function(event) {
  99                         removeTab(tab.id);
 100                     });
 101                 }
 102                 updateTabWidths();
 103                 if (options.onadd) {
 104                     options.onadd(tab);
 105                 }
 106                 link.attr("title",tab.label);
 107                 if (ul.find("li.red-ui-tab").size() == 1) {
 108                     activateTab(link);
 109                 }
 110             },
 111             removeTab: removeTab,
 112             activateTab: activateTab,
 113             resize: updateTabWidths,
 114             count: function() {
 115                 return ul.find("li.red-ui-tab").size();
 116             },
 117             contains: function(id) {
 118                 return ul.find("a[href='#"+id+"']").length > 0;
 119             }
 120
 121         }
 122     }
 123
 124     return {
 125         create: createTabs
 126     }
 127 })();