3 Roo.ux.FlipCounter = function(options)
5 Roo.ux.FlipCounter.superclass.constructor.call(this, options);
7 //Roo.apply(this, options);
8 //this.el = $(element);
9 //this.options = $.extend({}, defaults, options);
14 * When a box is flipped
15 * @param {Roo.ux.FlipCounter} counter
20 * When a box is resized
21 * @param {Roo.ux.FlipCounter} counter
27 this.digits = new Array();
34 Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
41 digits : false, // array...
45 getAutoCreate : function(){
49 cls: 'flipcounter ' + this.cls,
54 initEvents : function ()
58 var startNum = (1.0*this.startnumber).toFixed(this.decimal);
59 //Roo.log("STARTNUmber: " + startNum);
61 for (i=startNum.length-1; i>=0; i=i-1)
63 if (startNum[i] == '.') {
64 this.addSeparator('.');
67 this.addDigit(startNum[i]);
69 this.currentNumber = this.startnumber;
72 addDigit : function (num)
75 //Roo.log("Add digit "+ num);
76 // Add separator after every 3rd digit
77 if (this.decimal == 0 && this.digits.length % 3 == 0 && this.digits.length != 0) {
78 this.addSeparator(',');
83 var digit = new Roo.ux.FlipCounter.Digit({ manager : this, currentNumber : num });
85 this.digits.push(digit);
86 digit.render(this.el, 0);
89 this.ulWidth = this.ulWidth + digit.el.getWidth(true);
91 'min-width' : this.ulWidth,
92 'min-height' :digit.el.getHeight(true)
97 removeDigit : function ()
99 var digit = this.digits.splice(this.digits.length-1, 1)[0];
101 this.ulWidth = this.ulWidth - digit.el.getWidth(true);
105 if (this.decimal == 0 & this.digits.length % 3 == 0)
107 var comma = this.el.select('li.comma:first-child');
108 this.ulWidth = this.ulWidth - comma.getWidth(true);
112 // Update width to current
113 this.el.set( { 'min-width' : this.ulWidth});
116 addSeparator : function (str)
118 var comma = this.el.insertHtml('afterBegin','<li class="comma">'+str+'</li>',true);
122 this.ulWidth = this.ulWidth + comma.getWidth(true);
123 this.el.set({'min-width' : this.ulWidth});
126 updateTo : function (num)
128 var numStr = (1.0*num).toFixed(this.decimal);
130 this.currentNumber = num;
132 var dl = this.digits.length + (this.decimal > 0 ? 1 : 0);
133 // Change the number of digits displayed if needed
134 if (numStr.length != dl)
136 var diff = numStr.length - dl;
137 //Roo.log("DIFF LEN=" +diff);
140 for (i=0; i<diff; i=i+1) {
146 for (i=diff; i<0; i=i+1) {
151 this.fireEvent('onResize',this);
154 // Change all digit values
156 for (i=0, n=0; i<numStr.length; i=i+1)
158 if (numStr[numStr.length - 1 - i] == '.') {
161 //Roo.log("UPDATE DIGIT=" + i + " to " + numStr[numStr.length - 1 - i]);
162 this.digits[n++].flipTo(numStr[numStr.length - 1 - i]);
168 Roo.ux.FlipCounter.Digit = function(options)
170 //Roo.apply(this, options);
171 Roo.ux.FlipCounter.Digit.superclass.constructor.call(this, options);
174 this.currentNumber = parseInt(this.currentNumber);
179 Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
181 manager : null, // the flipcounter...
190 bottomFrontDiv : null,
193 bottomNumBack : null,
194 bottomNumFront : null,
199 getAutoCreate : function(){
201 //Roo.log("render with cn=" + this.currentNumber);
208 { cls : 'flipper_top flipper_top1' },
210 cls : 'flipper_top flipper_top2 flipper_top_back',
212 { tag: 'span', html: ""+this.currentNumber },
218 cls : 'flipper_top flipper_top_front',
220 { tag: 'span', html: ""+this.currentNumber },
225 { cls : 'flipper_bottom flipper_bottom4' },
226 { cls : 'flipper_bottom flipper_bottom3' },
227 { cls : 'flipper_bottom flipper_bottom2' },
229 cls : 'flipper_bottom flipper_bottom1 flipper_bottom_back',
231 { tag: 'span', html: ""+this.currentNumber },
236 cls : 'flipper_bottom flipper_bottom_front',
238 { tag: 'span', html: ""+this.currentNumber },
249 initEvents : function()
254 this.topFrontDiv = this.el.select('.flipper_top_front',true).first();
255 this.bottomFrontDiv = this.el.select('.flipper_bottom_front',true).first();
256 this.topNumBack = this.el.select('.flipper_top_back span',true).first();
257 this.topNumFront = this.el.select('.flipper_top_front span',true).first();
258 this.bottomNumBack = this.el.select('.flipper_bottom_back span',true).first();
259 this.bottomNumFront = this.el.select('.flipper_bottom_front span',true).first();
261 this.targetNum = this.currentNumber;
262 this.currentNum = this.currentNumber;
263 this.nextNum = this.currentNumber;
265 this.currentlyAnimating = false;
268 flipTo : function (num)
270 if (this.currentNum === num)
273 this.targetNum = num;
274 if (this.currentlyAnimating) {
281 animNext : function ()
283 if (this.currentNum == this.targetNum)
285 this.currentlyAnimating = false;
289 var doRandomDelay = !this.currentlyAnimating;
290 this.currentlyAnimating = true;
291 this.nextNum = this.currentNum + 1;
292 if (this.nextNum > 9) {
296 var delay = Math.random()/5;
297 if (!doRandomDelay) {
301 // Animate top flipper
303 digit.topNumBack.dom.innerHTML = digit.nextNum;
305 digit.topFrontDiv.animate(
307 scaleY: {from :1, to : 0}
309 this.manager.speed, //duration
310 function() {}, // oncomplate
312 'motion' // desplay type.
314 }).defer(delay, this);
318 digit.bottomNumFront.dom.innerHTML = digit.nextNum;
320 digit.bottomFrontDiv.animate(
322 scaleY: {from: 0, to : 1},
325 this.manager.speed * 0.5, //duration
327 digit.currentNum = digit.nextNum;
328 digit.topNumFront.dom.innerHTML = digit.currentNum;
329 digit.topFrontDiv.attr('style', '');
330 digit.bottomNumBack.dom.innerHTML = digit.currentNum;
333 digit.manager.fireEvent('onFlip', digit.manager);
337 'motion' // desplay type.
340 }).defer(delay + this.manager.speed, this);
344 //??? digit.bottomFrontDiv. digit.bottomNumFront.html(digit.nextNum);