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

   1 /*
   2  * - LGPL
   3  *
   4  * TabPanel
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.TabPanel
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap TabPanel class
  12  * @cfg {Boolean} active panel active
  13  * @cfg {String} html panel content
  14  * @cfg {String} tabId  unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
  15  * @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
  16  * @cfg {String} href click to link..
  17  * @cfg {Boolean} swiping enable swiping on mobile (default true)
  18  *
  19  *
  20  * @constructor
  21  * Create a new TabPanel
  22  * @param {Object} config The config object
  23  */
  24
  25 Roo.bootstrap.TabPanel = function(config){
  26     Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
  27     this.addEvents({
  28         /**
  29              * @event changed
  30              * Fires when the active status changes
  31              * @param {Roo.bootstrap.TabPanel} this
  32              * @param {Boolean} state the new state
  33
  34          */
  35         'changed': true,
  36         /**
  37              * @event beforedeactivate
  38              * Fires before a tab is de-activated - can be used to do validation on a form.
  39              * @param {Roo.bootstrap.TabPanel} this
  40              * @return {Boolean} false if there is an error
  41
  42          */
  43         'beforedeactivate': true
  44      });
  45
  46     this.tabId = this.tabId || Roo.id();
  47
  48 };
  49
  50 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
  51
  52     active: false,
  53     html: false,
  54     tabId: false,
  55     navId : false,
  56     swiping : true,
  57     href : '',
  58
  59     getAutoCreate : function(){
  60         var cfg = {
  61             tag: 'div',
  62             // item is needed for carousel - not sure if it has any effect otherwise
  63             cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
  64             html: this.html || ''
  65         };
  66
  67         if(this.active){
  68             cfg.cls += ' active';
  69         }
  70
  71         if(this.tabId){
  72             cfg.tabId = this.tabId;
  73         }
  74
  75
  76         return cfg;
  77     },
  78
  79     initEvents:  function()
  80     {
  81         var p = this.parent();
  82
  83         this.navId = this.navId || p.navId;
  84
  85         if (typeof(this.navId) != 'undefined') {
  86             // not really needed.. but just in case.. parent should be a NavGroup.
  87             var tg = Roo.bootstrap.TabGroup.get(this.navId);
  88
  89             tg.register(this);
  90
  91             var i = tg.tabs.length - 1;
  92
  93             if(this.active && tg.bullets > 0 && i < tg.bullets){
  94                 tg.setActiveBullet(i);
  95             }
  96         }
  97
  98         if(this.href.length){
  99             this.el.on('click', this.onClick, this);
 100         }
 101
 102         if(Roo.isTouch && this.swiping){
 103             this.el.on("touchstart", this.onTouchStart, this);
 104             this.el.on("touchmove", this.onTouchMove, this);
 105             this.el.on("touchend", this.onTouchEnd, this);
 106         }
 107
 108     },
 109
 110     onRender : function(ct, position)
 111     {
 112         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
 113     },
 114
 115     setActive : function(state)
 116     {
 117         Roo.log("panel - set active " + this.tabId + "=" + state);
 118
 119         this.active = state;
 120         if (!state) {
 121             this.el.removeClass('active');
 122
 123         } else  if (!this.el.hasClass('active')) {
 124             this.el.addClass('active');
 125         }
 126
 127         this.fireEvent('changed', this, state);
 128     },
 129
 130     onClick : function(e)
 131     {
 132         e.preventDefault();
 133
 134         window.location.href = this.href;
 135     },
 136
 137     startX : 0,
 138     startY : 0,
 139     endX : 0,
 140     endY : 0,
 141
 142     onTouchStart : function(e)
 143     {
 144         e.preventDefault();
 145
 146         this.startX = e.browserEvent.touches[0].clientX;
 147         this.startY = e.browserEvent.touches[0].clientY;
 148     },
 149
 150     onTouchMove : function(e)
 151     {
 152         e.preventDefault();
 153
 154         this.endX = e.browserEvent.touches[0].clientX;
 155         this.endY = e.browserEvent.touches[0].clientY;
 156     },
 157
 158     onTouchEnd : function(e)
 159     {
 160         e.preventDefault();
 161
 162         var tabGroup = this.parent();
 163
 164         Roo.log('this.endX - this.startX');
 165         Roo.log(this.endX);
 166         Roo.log(this.startX);
 167         Roo.log(this.endX - this.startX);
 168
 169         if(this.endX - this.startX > 20 ){ // swiping right
 170             tabGroup.showPanelPrev();
 171             return;
 172         }
 173
 174         Roo.log('this.startX - this.endX');
 175         Roo.log(this.startX - this.endX);
 176
 177         if(this.startX - this.endX > 20){ // swiping left
 178             tabGroup.showPanelNext();
 179             return;
 180         }
 181
 182         if(this.href.length){
 183             this.onClick(e);
 184         }
 185
 186     }
 187
 188
 189 });
 190
 191
 192
 193
 194