ux/FlipCounter.js

[roojs1] / ux / FlipCounter.js

diff --git a/ux/FlipCounter.js b/ux/FlipCounter.js
index 3de3389..891a65d 100644 (file)
--- a/ux/FlipCounter.js
+++ b/ux/FlipCounter.js
@@ -10,19 +10,20 @@ Roo.ux.FlipCounter = function(options)
         /**
          * @event flip
          * When a box is flipped
-         * @param {Roo.ux.FlipCounter} pane
+         * @param {Roo.ux.FlipCounter} counter
          */
         "flip" : true,
         /**
-         * @event activatepane
-         * When a pane is activated
-         * @param {Roo.bootstrap.dash.TabPane} pane
+         * @event resize
+         * When a box is resized
+         * @param {Roo.ux.FlipCounter} counter
          */
         "resize" : true
         
          
     });
-     
+    this.digits = new Array();
+       
     //this.init();
 
 
@@ -31,52 +32,38 @@ Roo.ux.FlipCounter = function(options)
 Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
     
     speed : 0.2,
+    startnumber : 0,
     
+    digits : false, // array...
+    ulWidth : 0, 
     
-
-;(function ( $, window, document, undefined ) {
-    
-    // Create the defaults once
-    var pluginName = 'flipCounter',
-        defaults = {
-            speed: 0.2,
-            onFlip: function() {},
-            onResize: function() {}
+    getAutoCreate : function(){
+        
+        return {
+            tag: 'ul',
+            cls: 'flipcounter',
+            
         };
-
-    // Constructor
-    function FlipCounter( element, options ) {
-        this.el = $(element);
-        this.options = $.extend({}, defaults, options);
-        this._defaults = defaults;
-        this._name = pluginName;
-        this.init();
-    }
-
-    FlipCounter.prototype.init = function () {
-        var elem = this.el;
-        var startNum = elem.html();
-        if (startNum === "") startNum = "0";
-        elem.html('<ul class="flipcounter"></ul>');
+    },
         
-        this.ul = elem.children('ul');
-        this.ulWidth = 0;
-        this.digits = new Array();
+    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">\
@@ -101,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