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