git.roojs.org Git - roojs1/blob - ux/FlipCounter.js

   1
   2
   3 Roo.ux.FlipCounter = function(options)
   4 {
   5     Roo.ux.FlipCounter.superclass.constructor.call(this, options);
   6
   7     //Roo.apply(this, options);
   8     //this.el = $(element);
   9     //this.options = $.extend({}, defaults, options);
  10     this.addEvents({
  11         // raw events
  12         /**
  13          * @event flip
  14          * When a box is flipped
  15          * @param {Roo.ux.FlipCounter} counter
  16          */
  17         "flip" : true,
  18         /**
  19          * @event resize
  20          * When a box is resized
  21          * @param {Roo.ux.FlipCounter} counter
  22          */
  23         "resize" : true
  24
  25
  26     });
  27     this.digits = new Array();
  28
  29     //this.init();
  30
  31
  32
  33 }
  34 Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
  35
  36     speed : 0.2,
  37     startnumber : 0,
  38     currentNumber : 0,
  39     decimal : 0,
  40
  41     digits : false, // array...
  42     ulWidth : 0,
  43     cls : '',
  44
  45     getAutoCreate : function(){
  46
  47         return {
  48             tag: 'ul',
  49             cls: 'flipcounter ' + this.cls,
  50
  51         };
  52     },
  53
  54     initEvents : function ()
  55     {
  56         var startNum = (1.0*this.startnumber).toFixed(this.decimal);
  57
  58         for (i=startNum.length-1; i>=0; i=i-1)
  59         {
  60             if (startNum[i] == '.') {
  61                 this.addSeparator('.');
  62                 continue;
  63             }
  64             this.addDigit(startNum[i]);
  65         }
  66         this.currentNumber = this.startnumber;
  67     },
  68
  69     addDigit : function (num)
  70     {
  71         // Add separator after every 3rd digit
  72         /*if (this.digits.length % 3 == 0 && this.digits.length != 0)
  73         {
  74             this.addSeparator(',');
  75         }
  76         */
  77
  78
  79         var digit = new Roo.ux.FlipCounter.Digit({ manager : this, currentNumber : num });
  80         digit.manager = this;
  81         this.digits.push(digit);
  82         digit.render(this.el, 0);
  83
  84         // Update width
  85         this.ulWidth = this.ulWidth + digit.el.getWidth(true);
  86         this.el.set({
  87             'min-width' : this.ulWidth,
  88             'min-height' :digit.el.getHeight(true)
  89         });
  90
  91     },
  92
  93     removeDigit : function ()
  94     {
  95         var digit = this.digits.splice(this.digits.length-1, 1)[0];
  96
  97         this.ulWidth = this.ulWidth - digit.el.getWidth(true);
  98         digit.el.remove();
  99
 100         // Remove separators
 101        // if (this.digits.length % 3 == 0)
 102       //  {
 103           //  var comma = this.el.select('li.comma:first-child');
 104           //  this.ulWidth = this.ulWidth - comma.getWidth(true);
 105           //  comma.remove();
 106         //}
 107
 108         // Update width to current
 109         this.el.set( { 'min-width' : this.ulWidth});
 110     },
 111
 112     addSeparator : function (str)
 113     {
 114         var comma = this.el.insertHtml('afterBegin','<li class="comma">'+str+'</li>',true);
 115
 116         // Update width
 117
 118         this.ulWidth = this.ulWidth + comma.getWidth(true);
 119         this.el.set({'min-width' : this.ulWidth});
 120     },
 121
 122     updateTo : function (num)
 123     {
 124         var numStr = (1.0*num).toFixed(this.decimal);
 125
 126         this.currentNumber = num;
 127         // Change the number of digits displayed if needed
 128         if (numStr.length != this.digits.length)
 129         {
 130             var diff = numStr.length - this.digits.length;
 131             Roo.log("DIFF LEN=" +diff);
 132             if (diff > 0)
 133             {
 134                 for (i=0; i<diff; i=i+1) {
 135                     this.addDigit(0);
 136                 }
 137             }
 138             else
 139             {
 140                 for (i=diff; i<0; i=i+1) {
 141                     this.removeDigit();
 142                 }
 143             }
 144
 145             this.fireEvent('onResize',this);
 146         }
 147
 148         // Change all digit values
 149         for (i=0; i<numStr.length; i=i+1)
 150         {
 151             if (numStr[numStr.length - 1 - i] == '.') {
 152                 continue;
 153             }
 154             Roo.log("UPDATE DIGIT=" + i + " to " + numStr[numStr.length - 1 - i]);
 155             this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
 156         }
 157     }
 158
 159 });
 160
 161 Roo.ux.FlipCounter.Digit = function(options)
 162 {
 163     //Roo.apply(this, options);
 164     Roo.ux.FlipCounter.Digit.superclass.constructor.call(this, options);
 165
 166
 167     this.currentNumber = parseInt(this.currentNumber);
 168
 169
 170 }
 171
 172 Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
 173
 174     manager : null, // the flipcounter...
 175     currentNumber : 0,
 176
 177
 178     currentNum : 0,
 179     nextNum : 0,
 180     targetNum : 0,
 181
 182     topFrontDiv  : null,
 183     bottomFrontDiv : null,
 184     topNumBack : null,
 185     topNumFront : null,
 186     bottomNumBack : null,
 187     bottomNumFront : null,
 188
 189
 190
 191
 192     getAutoCreate : function(){
 193
 194         return {
 195                 tag: 'li',
 196                 cn : [
 197                     {
 198                         cls: 'numberwrap',
 199                         cn : [
 200                             { cls : 'flipper_top flipper_top1' },
 201                             {
 202                                 cls : 'flipper_top flipper_top2 flipper_top_back',
 203                                 cn : [
 204                                     { tag: 'span', html: this.currentNumber },
 205                                     { cls : 'rings' }
 206                                 ]
 207
 208                             },
 209                             {
 210                                 cls : 'flipper_top flipper_top_front',
 211                                 cn : [
 212                                     { tag: 'span', html: this.currentNumber },
 213                                     { cls : 'rings' }
 214                                 ]
 215
 216                             },
 217                             { cls : 'flipper_bottom flipper_bottom4' },
 218                             { cls : 'flipper_bottom flipper_bottom3' },
 219                             { cls : 'flipper_bottom flipper_bottom2' },
 220                             {
 221                                 cls : 'flipper_bottom flipper_bottom1 flipper_bottom_back',
 222                                 cn : [
 223                                     { tag: 'span', html: this.currentNumber },
 224                                     { cls : 'rings' }
 225                                 ]
 226                             },
 227                             {
 228                                 cls : 'flipper_bottom flipper_bottom_front',
 229                                 cn : [
 230                                     { tag: 'span', html: this.currentNumber },
 231                                     { cls : 'rings' }
 232                                 ]
 233                             },
 234                         ]
 235                     }
 236                 ]
 237         };
 238     },
 239
 240
 241     initEvents : function()
 242     {
 243
 244
 245
 246         this.topFrontDiv = this.el.select('.flipper_top_front',true).first();
 247         this.bottomFrontDiv = this.el.select('.flipper_bottom_front',true).first();
 248         this.topNumBack = this.el.select('.flipper_top_back span',true).first();
 249         this.topNumFront = this.el.select('.flipper_top_front span',true).first();
 250         this.bottomNumBack = this.el.select('.flipper_bottom_back span',true).first();
 251         this.bottomNumFront = this.el.select('.flipper_bottom_front span',true).first();
 252
 253         this.targetNum = this.currentNumber;
 254         this.currentNum = this.currentNumber;
 255         this.nextNum = this.currentNumber;
 256
 257         this.currentlyAnimating = false;
 258     },
 259
 260     flipTo : function (num)
 261     {
 262         if (this.currentNum === num)
 263             return;
 264
 265         this.targetNum = num;
 266         if (this.currentlyAnimating) {
 267             return;
 268         }
 269
 270         this.animNext();
 271     },
 272
 273     animNext : function ()
 274     {
 275         if (this.currentNum == this.targetNum)
 276         {
 277             this.currentlyAnimating = false;
 278             return;
 279         }
 280
 281         var doRandomDelay = !this.currentlyAnimating;
 282         this.currentlyAnimating = true;
 283         this.nextNum = this.currentNum + 1;
 284         if (this.nextNum > 9) {
 285             this.nextNum = 0;
 286         }
 287
 288         var delay = Math.random()/5;
 289         if (!doRandomDelay) {
 290             delay = 0.01;
 291         }
 292
 293         // Animate top flipper
 294         var digit = this;
 295         digit.topNumBack.dom.innerHTML = digit.nextNum;
 296         (function() {
 297             digit.topFrontDiv.animate(
 298                 {
 299                     scaleY: {from :1, to : 0}
 300                 },
 301                 this.manager.speed, //duration
 302                 function() {}, // oncomplate
 303                 'easeIn', //easing,
 304                 'motion' // desplay type.
 305             );
 306         }).defer(delay, this);
 307
 308         (function() {
 309
 310             digit.bottomNumFront.dom.innerHTML  = digit.nextNum;
 311
 312             digit.bottomFrontDiv.animate(
 313                 {
 314                     scaleY: {from: 0, to : 1},
 315
 316                 },
 317                 this.manager.speed * 0.5, //duration
 318                 function() {
 319                     digit.currentNum = digit.nextNum;
 320                     digit.topNumFront.dom.innerHTML = digit.currentNum;
 321                     digit.topFrontDiv.attr('style', '');
 322                     digit.bottomNumBack.dom.innerHTML = digit.currentNum;
 323
 324                     digit.animNext();
 325                     digit.manager.fireEvent('onFlip', digit.manager);
 326
 327                  }, // oncomplate
 328                 'easeOut', //easing,
 329                 'motion' // desplay type.
 330             )
 331
 332         }).defer(delay + this.manager.speed, this);
 333
 334
 335
 336        //??? digit.bottomFrontDiv. digit.bottomNumFront.html(digit.nextNum);
 337
 338
 339     }
 340 });