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