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