ux/FlipCounter.js

[roojs1] / ux / FlipCounter.js

diff --git a/ux/FlipCounter.js b/ux/FlipCounter.js
index a18a936..108e3e1 100644 (file)
--- a/ux/FlipCounter.js
+++ b/ux/FlipCounter.js
@@ -2,7 +2,7 @@
 
 Roo.ux.FlipCounter = function(options)
 {
-    Roo.bootstrap.FlipCounter.superclass.constructor.call(this, config);
+    Roo.ux.FlipCounter.superclass.constructor.call(this, options);
     
     //Roo.apply(this, options);
     //this.el = $(element);
@@ -35,15 +35,18 @@ Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
     
     speed : 0.2,
     startnumber : 0,
+    currentNumber : 0,
+    decimal : 0,
     
     digits : false, // array...
-    ulWidth : 0, 
+    ulWidth : 0,
+    cls : '',
     
     getAutoCreate : function(){
         
         return {
             tag: 'ul',
-            cls: 'flipcounter',
+            cls: 'flipcounter ' + this.cls,
             
         };
     },
@@ -56,23 +59,28 @@ Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
         {
             this.addDigit(startNum[i]);
         }
+        this.currentNumber = this.startnumber;
     },
     
     addDigit : function (num)
     {
         // Add separator after every 3rd digit
-        if (this.digits.length % 3 == 0 && this.digits.length != 0)
+        /*if (this.digits.length % 3 == 0 && this.digits.length != 0)
         {
-            this.addSeparator();
+            this.addSeparator(',');
         }
+        */
         
-         
-        
+         if (this.digits.length % 3 == 0 && this.digits.length != 0)
+        {
+            this.addSeparator();
+        }
+          
         
         var digit = new Roo.ux.FlipCounter.Digit({ manager : this, currentNumber : num });
         digit.manager = this;
         this.digits.push(digit);
-        digit.render(this.el);
+        digit.render(this.el, 0);
          
         // Update width
         this.ulWidth = this.ulWidth + digit.el.getWidth(true);
@@ -87,8 +95,8 @@ Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
     {
         var digit = this.digits.splice(this.digits.length-1, 1)[0];
         
-        this.ulWidth = this.ulWidth - digit.el.outerWidth(true);
-        digit.li.remove();
+        this.ulWidth = this.ulWidth - digit.el.getWidth(true);
+        digit.el.remove();
         
         // Remove separators
         if (this.digits.length % 3 == 0)
@@ -116,6 +124,7 @@ Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
     {
         var numStr = parseInt(num).toString();
         
+        this.currentNumber = num;
         // Change the number of digits displayed if needed
         if (numStr.length != this.digits.length)
         {
@@ -147,7 +156,9 @@ Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
 
 Roo.ux.FlipCounter.Digit = function(options)
 {
-    Roo.apply(this, options);
+    //Roo.apply(this, options);
+    Roo.ux.FlipCounter.Digit.superclass.constructor.call(this, options);
+
     
     this.currentNumber = parseInt(this.currentNumber);
     
@@ -158,6 +169,10 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
 
     manager : null, // the flipcounter... 
     currentNumber : 0,
+    
+    
+    currentNum : 0,
+    nextNum : 0,
     targetNum : 0,
     
     topFrontDiv  : null,
@@ -168,6 +183,8 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
     bottomNumFront : null,
     
     
+    
+    
     getAutoCreate : function(){
         
         return {
@@ -180,7 +197,7 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
                             {
                                 cls : 'flipper_top flipper_top2 flipper_top_back',
                                 cn : [
-                                    { tag: 'span', html: num },
+                                    { tag: 'span', html: this.currentNumber },
                                     { cls : 'rings' }
                                 ]
                         
@@ -188,7 +205,7 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
                             {
                                 cls : 'flipper_top flipper_top_front',
                                 cn : [
-                                    { tag: 'span', html: num },
+                                    { tag: 'span', html: this.currentNumber },
                                     { cls : 'rings' }
                                 ]
                         
@@ -199,14 +216,14 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
                             {
                                 cls : 'flipper_bottom flipper_bottom1 flipper_bottom_back',
                                 cn : [
-                                    { tag: 'span', html: num },
+                                    { tag: 'span', html: this.currentNumber },
                                     { cls : 'rings' }
                                 ]
                             },
                             {
                                 cls : 'flipper_bottom flipper_bottom_front',
                                 cn : [
-                                    { tag: 'span', html: num },
+                                    { tag: 'span', html: this.currentNumber },
                                     { cls : 'rings' }
                                 ]
                             },
@@ -222,16 +239,16 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
         
          
         
-        this.topFrontDiv = this.el.select('.flipper_top_front',true);
-        this.bottomFrontDiv = this.el.select('.flipper_bottom_front',true);
-        this.topNumBack = this.el.select('.flipper_top_back span',true);
-        this.topNumFront = this.el.select('.flipper_top_front span',true);
-        this.bottomNumBack = this.el.select('.flipper_bottom_back span',true);
-        this.bottomNumFront = this.el.select('.flipper_bottom_front span',true);
+        this.topFrontDiv = this.el.select('.flipper_top_front',true).first();
+        this.bottomFrontDiv = this.el.select('.flipper_bottom_front',true).first();
+        this.topNumBack = this.el.select('.flipper_top_back span',true).first();
+        this.topNumFront = this.el.select('.flipper_top_front span',true).first();
+        this.bottomNumBack = this.el.select('.flipper_bottom_back span',true).first();
+        this.bottomNumFront = this.el.select('.flipper_bottom_front span',true).first();
         
-        this.targetNum = currentNumber;
-        this.currentNum = currentNumber;
-        this.nextNum = currentNumber;
+        this.targetNum = this.currentNumber;
+        this.currentNum = this.currentNumber;
+        this.nextNum = this.currentNumber;
         
         this.currentlyAnimating = false;
     },
@@ -271,7 +288,7 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
         
         // Animate top flipper
         var digit = this;
-        digit.topNumBack.html(digit.nextNum);
+        digit.topNumBack.dom.innerHTML = digit.nextNum;
         (function() {
             digit.topFrontDiv.animate(
                 {
@@ -293,7 +310,7 @@ Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
                     scaleY: {from: 0, to : 1},
                     
                 },
-                this.manager.options.speed * 0.5, //duration
+                this.manager.speed * 0.5, //duration
                 function() {
                     digit.currentNum = digit.nextNum;
                     digit.topNumFront.dom.innerHTML = digit.currentNum;