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 ()
56 var startNum = ""+ this.startnumber;
58 for (i=startNum.length-1; i>=0; i=i-1)
60 this.addDigit(startNum[i]);
62 this.currentNumber = this.startnumber;
65 addDigit : function (num)
67 // Add separator after every 3rd digit
68 if (this.digits.length % 3 == 0 && this.digits.length != 0)
75 var digit = new Roo.ux.FlipCounter.Digit({ manager : this, currentNumber : num });
77 this.digits.push(digit);
78 digit.render(this.el, 0);
81 this.ulWidth = this.ulWidth + digit.el.getWidth(true);
83 'min-width' : this.ulWidth,
84 'min-height' :digit.el.getHeight(true)
89 removeDigit : function ()
91 var digit = this.digits.splice(this.digits.length-1, 1)[0];
93 this.ulWidth = this.ulWidth - digit.el.getWidth(true);
97 if (this.digits.length % 3 == 0)
99 var comma = this.el.select('li.comma:first-child');
100 this.ulWidth = this.ulWidth - comma.getWidth(true);
104 // Update width to current
105 this.el.set( { 'min-width' : this.ulWidth});
108 addSeparator : function (num)
110 var comma = this.el.insertHtml('afterBegin','<li class="comma">,</li>',true);
114 this.ulWidth = this.ulWidth + comma.getWidth(true);
115 this.el.set({'min-width' : this.ulWidth});
118 updateTo : function (num)
120 var numStr = parseInt(num).toString();
122 this.currentNumber = num;
123 // Change the number of digits displayed if needed
124 if (numStr.length != this.digits.length)
126 var diff = numStr.length - this.digits.length;
129 for (i=0; i<diff; i=i+1) {
135 for (i=diff; i<0; i=i+1) {
140 this.fireEvent('onResize',this);
143 // Change all digit values
144 for (i=0; i<numStr.length; i=i+1)
146 this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
152 Roo.ux.FlipCounter.Digit = function(options)
154 //Roo.apply(this, options);
155 Roo.ux.FlipCounter.Digit.superclass.constructor.call(this, options);
158 this.currentNumber = parseInt(this.currentNumber);
163 Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
165 manager : null, // the flipcounter...
174 bottomFrontDiv : null,
177 bottomNumBack : null,
178 bottomNumFront : null,
183 getAutoCreate : function(){
191 { cls : 'flipper_top flipper_top1' },
193 cls : 'flipper_top flipper_top2 flipper_top_back',
195 { tag: 'span', html: this.currentNumber },
201 cls : 'flipper_top flipper_top_front',
203 { tag: 'span', html: this.currentNumber },
208 { cls : 'flipper_bottom flipper_bottom4' },
209 { cls : 'flipper_bottom flipper_bottom3' },
210 { cls : 'flipper_bottom flipper_bottom2' },
212 cls : 'flipper_bottom flipper_bottom1 flipper_bottom_back',
214 { tag: 'span', html: this.currentNumber },
219 cls : 'flipper_bottom flipper_bottom_front',
221 { tag: 'span', html: this.currentNumber },
232 initEvents : function()
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();
244 this.targetNum = this.currentNumber;
245 this.currentNum = this.currentNumber;
246 this.nextNum = this.currentNumber;
248 this.currentlyAnimating = false;
251 flipTo : function (num)
253 if (this.currentNum === num)
256 this.targetNum = num;
257 if (this.currentlyAnimating) {
264 animNext : function ()
266 if (this.currentNum == this.targetNum)
268 this.currentlyAnimating = false;
272 var doRandomDelay = !this.currentlyAnimating;
273 this.currentlyAnimating = true;
274 this.nextNum = this.currentNum + 1;
275 if (this.nextNum > 9) {
279 var delay = Math.random()/5;
280 if (!doRandomDelay) {
284 // Animate top flipper
286 digit.topNumBack.dom.innerHTML = digit.nextNum;
288 digit.topFrontDiv.animate(
290 scaleY: {from :1, to : 0}
292 this.manager.speed, //duration
293 function() {}, // oncomplate
295 'motion' // desplay type.
297 }).defer(delay, this);
301 digit.bottomNumFront.dom.innerHTML = digit.nextNum;
303 digit.bottomFrontDiv.animate(
305 scaleY: {from: 0, to : 1},
308 this.manager.speed * 0.5, //duration
310 digit.currentNum = digit.nextNum;
311 digit.topNumFront.dom.innerHTML = digit.currentNum;
312 digit.topFrontDiv.attr('style', '');
313 digit.bottomNumBack.dom.innerHTML = digit.currentNum;
316 digit.manager.fireEvent('onFlip', digit.manager);
320 'motion' // desplay type.
323 }).defer(delay + this.manager.speed, this);
327 //??? digit.bottomFrontDiv. digit.bottomNumFront.html(digit.nextNum);