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