git.roojs.org Git - roojs1/blob - Roo/bootstrap/dash/TabBox.js

   1 /*
   2  * - LGPL
   3  *
   4  * TabBox
   5  *
   6  */
   7 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
   8
   9 /**
  10  * @class Roo.bootstrap.dash.TabBox
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap TabBox class
  13  * @cfg {String} title Title of the TabBox
  14  * @cfg {String} icon Icon of the TabBox
  15  * @cfg {Boolean} showtabs (true|false) show the tabs default true
  16  * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
  17  *
  18  * @constructor
  19  * Create a new TabBox
  20  * @param {Object} config The config object
  21  */
  22
  23
  24 Roo.bootstrap.dash.TabBox = function(config){
  25     Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
  26     this.addEvents({
  27         // raw events
  28         /**
  29          * @event addpane
  30          * When a pane is added
  31          * @param {Roo.bootstrap.dash.TabPane} pane
  32          */
  33         "addpane" : true,
  34         /**
  35          * @event activatepane
  36          * When a pane is activated
  37          * @param {Roo.bootstrap.dash.TabPane} pane
  38          */
  39         "activatepane" : true
  40
  41
  42     });
  43
  44     this.panes = [];
  45 };
  46
  47 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
  48
  49     title : '',
  50     icon : false,
  51     showtabs : true,
  52     tabScrollable : false,
  53
  54     getChildContainer : function()
  55     {
  56         return this.el.select('.tab-content', true).first();
  57     },
  58
  59     getAutoCreate : function(){
  60
  61         var header = {
  62             tag: 'li',
  63             cls: 'pull-left header',
  64             html: this.title,
  65             cn : []
  66         };
  67
  68         if(this.icon){
  69             header.cn.push({
  70                 tag: 'i',
  71                 cls: 'fa ' + this.icon
  72             });
  73         }
  74
  75         var h = {
  76             tag: 'ul',
  77             cls: 'nav nav-tabs pull-right',
  78             cn: [
  79                 header
  80             ]
  81         };
  82
  83         if(this.tabScrollable){
  84             h = {
  85                 tag: 'div',
  86                 cls: 'tab-header',
  87                 cn: [
  88                     {
  89                         tag: 'ul',
  90                         cls: 'nav nav-tabs pull-right',
  91                         cn: [
  92                             header
  93                         ]
  94                     }
  95                 ]
  96             };
  97         }
  98
  99         var cfg = {
 100             tag: 'div',
 101             cls: 'nav-tabs-custom',
 102             cn: [
 103                 h,
 104                 {
 105                     tag: 'div',
 106                     cls: 'tab-content no-padding',
 107                     cn: []
 108                 }
 109             ]
 110         };
 111
 112         return  cfg;
 113     },
 114     initEvents : function()
 115     {
 116         //Roo.log('add add pane handler');
 117         this.on('addpane', this.onAddPane, this);
 118     },
 119      /**
 120      * Updates the box title
 121      * @param {String} html to set the title to.
 122      */
 123     setTitle : function(value)
 124     {
 125         this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
 126     },
 127     onAddPane : function(pane)
 128     {
 129         this.panes.push(pane);
 130         //Roo.log('addpane');
 131         //Roo.log(pane);
 132         // tabs are rendere left to right..
 133         if(!this.showtabs){
 134             return;
 135         }
 136
 137         var ctr = this.el.select('.nav-tabs', true).first();
 138
 139
 140         var existing = ctr.select('.nav-tab',true);
 141         var qty = existing.getCount();;
 142
 143
 144         var tab = ctr.createChild({
 145             tag : 'li',
 146             cls : 'nav-tab' + (qty ? '' : ' active'),
 147             cn : [
 148                 {
 149                     tag : 'a',
 150                     href:'#',
 151                     html : pane.title
 152                 }
 153             ]
 154         }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
 155         pane.tab = tab;
 156
 157         tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
 158         if (!qty) {
 159             pane.el.addClass('active');
 160         }
 161
 162
 163     },
 164     onTabClick : function(ev,un,ob,pane)
 165     {
 166         //Roo.log('tab - prev default');
 167         ev.preventDefault();
 168
 169
 170         this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
 171         pane.tab.addClass('active');
 172         //Roo.log(pane.title);
 173         this.getChildContainer().select('.tab-pane',true).removeClass('active');
 174         // technically we should have a deactivate event.. but maybe add later.
 175         // and it should not de-activate the selected tab...
 176         this.fireEvent('activatepane', pane);
 177         pane.el.addClass('active');
 178         pane.fireEvent('activate');
 179
 180
 181     },
 182
 183     getActivePane : function()
 184     {
 185         var r = false;
 186         Roo.each(this.panes, function(p) {
 187             if(p.el.hasClass('active')){
 188                 r = p;
 189                 return false;
 190             }
 191
 192             return;
 193         });
 194
 195         return r;
 196     }
 197
 198
 199 });
 200
 201