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