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