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