major doc changes

[roojs1] / Roo / bootstrap / TabPanel.js

diff --git a/Roo/bootstrap/TabPanel.js b/Roo/bootstrap/TabPanel.js
index a3b07fd..1a98371 100644 (file)
--- a/Roo/bootstrap/TabPanel.js
+++ b/Roo/bootstrap/TabPanel.js
@@ -8,11 +8,14 @@
 /**
  * @class Roo.bootstrap.TabPanel
  * @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
  * Bootstrap TabPanel class
  * @cfg {Boolean} active panel active
  * @cfg {String} html panel content
  * @cfg {String} tabId  unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
- * @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
+ * @cfg {String} navId The Roo.bootstrap.nav.Group which triggers show hide ()
+ * @cfg {String} href click to link..
+ * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
  * 
  * 
  * @constructor
@@ -22,7 +25,7 @@
 
 Roo.bootstrap.TabPanel = function(config){
     Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
-     this.addEvents({
+    this.addEvents({
         /**
             * @event changed
             * Fires when the active status changes
@@ -30,8 +33,17 @@ Roo.bootstrap.TabPanel = function(config){
             * @param {Boolean} state the new state
            
          */
-        'changed': true
+        'changed': true,
+        /**
+            * @event beforedeactivate
+            * Fires before a tab is de-activated - can be used to do validation on a form.
+            * @param {Roo.bootstrap.TabPanel} this
+            * @return {Boolean} false if there is an error
+           
+         */
+        'beforedeactivate': true
      });
+    
     this.tabId = this.tabId || Roo.id();
   
 };
@@ -42,11 +54,15 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
     html: false,
     tabId: false,
     navId : false,
-    
+    href : '',
+    touchSlide : false,
     getAutoCreate : function(){
-        var cfg = {
+        
+       
+       var cfg = {
             tag: 'div',
-            cls: 'tab-pane',
+            // item is needed for carousel - not sure if it has any effect otherwise
+            cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
             html: this.html || ''
         };
         
@@ -58,56 +74,46 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
             cfg.tabId = this.tabId;
         }
         
+       
+        
         return cfg;
     },
     
     initEvents:  function()
     {
-        Roo.log('-------- init events on tab panel ---------');
-        
         var p = this.parent();
+        
         this.navId = this.navId || p.navId;
         
         if (typeof(this.navId) != 'undefined') {
             // not really needed.. but just in case.. parent should be a NavGroup.
             var tg = Roo.bootstrap.TabGroup.get(this.navId);
-             Roo.log(['register', tg, this]);
+            
             tg.register(this);
+            
+            var i = tg.tabs.length - 1;
+            
+            if(this.active && tg.bullets > 0 && i < tg.bullets){
+                tg.setActiveBullet(i);
+            }
+        }
+        
+        this.el.on('click', this.onClick, this);
+        
+        if(Roo.isTouch && this.touchSlide){
+            this.el.on("touchstart", this.onTouchStart, this);
+            this.el.on("touchmove", this.onTouchMove, this);
+            this.el.on("touchend", this.onTouchEnd, this);
         }
+        
     },
     
-    
     onRender : function(ct, position)
     {
-       // Roo.log("Call onRender: " + this.xtype);
-        
         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
-        
-        // registration with navgroups..
-        if (this.navId && this.tabId) {
-            var grp = Roo.bootstrap.NavGroup.get(this.navId);
-            if (grp) {
-                //code
-                var item = grp.getNavItem(this.tabId);
-                if (!item) {
-                    Roo.log("could not find navID:"  + this.navId + ", tabId: " + this.tabId);
-                } else {
-                    item.on('changed', function(item, state) {
-                        var tg = Roo.bootstrap.TabGroup.get(this.navId);
-                        if (state) {
-                            tg.showPanel(this)
-                        }
-                        return;
-                        
-                    }, this);
-                }
-            }
-        }
-        
-        
-        
     },
-    setActive: function(state)
+    
+    setActive : function(state)
     {
         Roo.log("panel - set active " + this.tabId + "=" + state);
         
@@ -118,7 +124,61 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
         } else  if (!this.el.hasClass('active')) {
             this.el.addClass('active');
         }
+        
         this.fireEvent('changed', this, state);
+    },
+    
+    onClick : function(e)
+    {
+        e.preventDefault();
+        
+        if(!this.href.length){
+            return;
+        }
+        
+        window.location.href = this.href;
+    },
+    
+    startX : 0,
+    startY : 0,
+    endX : 0,
+    endY : 0,
+    swiping : false,
+    
+    onTouchStart : function(e)
+    {
+        this.swiping = false;
+        
+        this.startX = e.browserEvent.touches[0].clientX;
+        this.startY = e.browserEvent.touches[0].clientY;
+    },
+    
+    onTouchMove : function(e)
+    {
+        this.swiping = true;
+        
+        this.endX = e.browserEvent.touches[0].clientX;
+        this.endY = e.browserEvent.touches[0].clientY;
+    },
+    
+    onTouchEnd : function(e)
+    {
+        if(!this.swiping){
+            this.onClick(e);
+            return;
+        }
+        
+        var tabGroup = this.parent();
+        
+        if(this.endX > this.startX){ // swiping right
+            tabGroup.showPanelPrev();
+            return;
+        }
+        
+        if(this.startX > this.endX){ // swiping left
+            tabGroup.showPanelNext();
+            return;
+        }
     }