roojs-all.js

[roojs1] / examples / bootstrap / dashboard3.slidetest.js

diff --git a/examples/bootstrap/dashboard3.slidetest.js b/examples/bootstrap/dashboard3.slidetest.js
index 9a8458c..c85c7b6 100644 (file)
--- a/examples/bootstrap/dashboard3.slidetest.js
+++ b/examples/bootstrap/dashboard3.slidetest.js
@@ -1,9 +1,29 @@
 
 
-dashboard3.slidetest = function (el,dir)
+dashboard3.slidetest = function (tbb)
 {
-    this.el = el;
-    this.dir = dir;
+    
+    
+    this.tba =  Roo.bootstrap.NavGroup.get(tbb.navId).getActive();
+    this.tbb = tbb;
+    if (!this.tba) {
+        alert("could not get active tab");
+        return;
+    }
+    if (this.tba.tabId == this.tbb.tabId) {
+        return; // same tab...
+    }
+    
+    
+    this.el = tba.el;
+    this.nel = tbb.el;
+    
+    // we can work out the direction based on the sequence..
+    this.pel = this.el.findParent('.tab-content', 3, true);
+    var cn = this.pel.select('.tab-pane',true);
+    this.dir = cn.indexOf(this.nel) -  cn.indexOf(this.el);
+    
+    
     this.slide();
 }
 Roo.apply(dashboard3.slidetest.prototype, {
@@ -17,7 +37,7 @@ Roo.apply(dashboard3.slidetest.prototype, {
         
         // first tabcontent - needs overflow hidden..
         
-        this.pel = this.el.findParent('.tab-content', 3, true);
+        
         this.pel.setStyle('overflow', 'hidden');
         var obox = this.pel.getBox(true,true);
         
@@ -33,17 +53,17 @@ Roo.apply(dashboard3.slidetest.prototype, {
             
         });
         // need to fix the left/right....
-        var panes = this.pel.select('.tab-pane',true);
-        var ix = panes.indexOf(this.el);
         
-        // dir = 1...
-        
-        this.nel = panes.item(ix+1);
         var nbox = this.nel.getBox();
+        // if dir = 1 - then put on right..
+        
+        var start = this.dir > 0 ? (box.width + obox.x + 50 ) : (-1 * (box.width + 50)) + obox.x;
+        
+        var end = this.dir > 0 ? -1 * (box.width + 50 ) : (box.width + obox.x + 50 );
         
         this.nel.setStyle({
             position: 'absolute',
-            left : (box.width + obox.x + 50 ) + 'px',
+            left : start + 'px',
             top : 0,
             width : box.width + 'px',
             height: nbox.height+ 'px',
@@ -51,43 +71,51 @@ Roo.apply(dashboard3.slidetest.prototype, {
         this.nel.addClass('active');
         
         // now we need to animate the both boxes moving from box.width + obox.x + 50 --> obox.x
-        
+        var _t = this;
         this.nel.animate({
             left : {
-                from : (box.width + obox.x + 50 ),
+                from : start,
                 to : obox.x 
             }
-        }, this.completeSlide.createDelegate(this), 'easeOut', 'run');
+        }, 0.5,function() { _t.completeSlide(); }, 'easeOut', 'run');
         
         this.el.animate({
             left : {
                 from : obox.x , 
-                to : -1 * (box.width + 50 )
+                to : end 
             }
-        }, dashboard3.slidetest.completeSlide, 'easeOut', 'run');
+        }, 0.5, false, 'easeOut', 'run');
         
         
         
     },
     completeSlide : function()
     {
-          return;
-          this.pel.setStyle('overflow', '');
+        // remove styles + classes.. that we have added..
+        this.nel.removeClass('active');
+        this.pel.setStyle('overflow', '');
+          
+        // reset the styles
           this.nel.setStyle({
-            position: 'relative',
+            position: '',
             left : '',
             top : '',
             width :'',
             height: ''
           });
+          
+          
+          
           this.el.setStyle({
-            position: 'relative',
+            position: '',
             left : '',
             top : '',
             width :'',
             height: ''
-          });  
-    
+        });
+        // apply the data..
+        this.tba.setActive(false);
+        this.tbb.setActive(true);
         
     }