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