git.roojs.org Git - roojs1/blob - ux/FlipCounter.js

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