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