ux/FlipCounter.js

[roojs1] / ux / FlipCounter.js

diff --git a/ux/FlipCounter.js b/ux/FlipCounter.js
index e902e11..891a65d 100644 (file)
--- a/ux/FlipCounter.js
+++ b/ux/FlipCounter.js
@@ -22,7 +22,8 @@ Roo.ux.FlipCounter = function(options)
         
          
     });
-     
+    this.digits = new Array();
+       
     //this.init();
 
 
@@ -31,35 +32,38 @@ Roo.ux.FlipCounter = function(options)
 Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
     
     speed : 0.2,
+    startnumber : 0,
     
-     
-    init : function ()
-    {
-        var elem = this.el;
-        var startNum = elem.dom.innerHTML();
-        if (startNum === "") {
-            startNum = "0";
-        }
-        elem.html('<ul class="flipcounter"></ul>');
+    digits : false, // array...
+    ulWidth : 0, 
+    
+    getAutoCreate : function(){
         
-        this.ul = elem.children('ul');
-        this.ulWidth = 0;
-        this.digits = new Array();
+        return {
+            tag: 'ul',
+            cls: 'flipcounter',
+            
+        };
+    },
+        
+    init : function ()
+    { 
+        var startNum = ""+ this.startnumber;
         
         for (i=startNum.length-1; i>=0; i=i-1)
         {
             this.addDigit(startNum[i]);
         }
-    };
+    },
     
-    FlipCounter.prototype.addDigit = function (num) {
+    addDigit : function (num) {
         // Add separator after every 3rd digit
         if (this.digits.length % 3 == 0 && this.digits.length != 0)
         {
             this.addSeparator();
         }
         
-        this.ul.prepend('<li>\
+        this.el.insertHtml('afterBegin', '<li>\
             <div class="numberwrap">\
                 <div class="flipper_top flipper_top1"></div>\
                 <div class="flipper_top flipper_top2 flipper_top_back">\
@@ -84,35 +88,41 @@ Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
             </div>\
         </li>');
         
-        var li = this.ul.find('li:first-child');
-        var digit = new Digit(li, num);
+        var li = this.el.select('li'.true).first();
+        var digit = new Roo.ux.FlipCounter.Digit(li, num);
         digit.manager = this;
         this.digits.push(digit);
         
         // Update width
-        this.ulWidth = this.ulWidth + digit.li.outerWidth(true);
-        this.ul.css('min-width', this.ulWidth);
-        this.ul.css('min-height', digit.li.outerHeight(true));
-    };
+        this.ulWidth = this.ulWidth + digit.el.getWidth(true);
+        this.el.set({
+            'min-width' : this.ulWidth,
+            'min-height' :digit.el.getHeight(true)
+        });
+        
+    },
     
-    FlipCounter.prototype.removeDigit = function () {
+    removeDigit : function ()
+    {
         var digit = this.digits.splice(this.digits.length-1, 1)[0];
-        this.ulWidth = this.ulWidth - digit.li.outerWidth(true);
+        
+        this.ulWidth = this.ulWidth - digit.el.outerWidth(true);
         digit.li.remove();
         
         // Remove separators
         if (this.digits.length % 3 == 0)
         {
-            var comma = this.ul.find('li.comma:first-child');
-            this.ulWidth = this.ulWidth - comma.outerWidth(true);
+            var comma = this.el.select('li.comma:first-child');
+            this.ulWidth = this.ulWidth - comma.getWidth(true);
             comma.remove();
         }
         
         // Update width to current
-        this.ul.css('min-width', this.ulWidth);
+        this.el.set( { 'min-width' : this.ulWidth});
     }
     
-    FlipCounter.prototype.addSeparator = function (num) {
+    addSeparator : function (num)
+    {
         this.ul.prepend('<li class="comma">,</li>');
         
         // Update width