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