3 Roo.ux.FlipCounter = function(options)
5 Roo.bootstrap.FlipCounter.superclass.constructor.call(this, config);
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, {
39 digits : false, // array...
42 getAutoCreate : function(){
51 initEvents : function ()
53 var startNum = ""+ this.startnumber;
55 for (i=startNum.length-1; i>=0; i=i-1)
57 this.addDigit(startNum[i]);
61 addDigit : function (num)
63 // Add separator after every 3rd digit
64 if (this.digits.length % 3 == 0 && this.digits.length != 0)
72 var digit = new Roo.ux.FlipCounter.Digit({ manager : this, currentNumber : num });
74 this.digits.push(digit);
75 digit.render(this.el);
78 this.ulWidth = this.ulWidth + digit.el.getWidth(true);
80 'min-width' : this.ulWidth,
81 'min-height' :digit.el.getHeight(true)
86 removeDigit : function ()
88 var digit = this.digits.splice(this.digits.length-1, 1)[0];
90 this.ulWidth = this.ulWidth - digit.el.outerWidth(true);
94 if (this.digits.length % 3 == 0)
96 var comma = this.el.select('li.comma:first-child');
97 this.ulWidth = this.ulWidth - comma.getWidth(true);
101 // Update width to current
102 this.el.set( { 'min-width' : this.ulWidth});
105 addSeparator : function (num)
107 var comma = this.el.insertHtml('afterBegin','<li class="comma">,</li>',true);
111 this.ulWidth = this.ulWidth + comma.getWidth(true);
112 this.el.set({'min-width' : this.ulWidth});
115 updateTo : function (num)
117 var numStr = parseInt(num).toString();
119 // Change the number of digits displayed if needed
120 if (numStr.length != this.digits.length)
122 var diff = numStr.length - this.digits.length;
125 for (i=0; i<diff; i=i+1) {
131 for (i=diff; i<0; i=i+1) {
136 this.fireEvent('onResize',this);
139 // Change all digit values
140 for (i=0; i<numStr.length; i=i+1)
142 this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
148 Roo.ux.FlipCounter.Digit = function(options)
150 Roo.apply(this, options);
152 this.currentNumber = parseInt(this.currentNumber);
157 Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
159 manager : null, // the flipcounter...
164 bottomFrontDiv : null,
167 bottomNumBack : null,
168 bottomNumFront : null,
171 getAutoCreate : function(){
179 { cls : 'flipper_top flipper_top1' },
181 cls : 'flipper_top flipper_top2 flipper_top_back',
183 { tag: 'span', html: num },
189 cls : 'flipper_top flipper_top_front',
191 { tag: 'span', html: num },
196 { cls : 'flipper_bottom flipper_bottom4' },
197 { cls : 'flipper_bottom flipper_bottom3' },
198 { cls : 'flipper_bottom flipper_bottom2' },
200 cls : 'flipper_bottom flipper_bottom1 flipper_bottom_back',
202 { tag: 'span', html: num },
207 cls : 'flipper_bottom flipper_bottom_front',
209 { tag: 'span', html: num },
220 initEvents : function()
225 this.topFrontDiv = this.el.select('.flipper_top_front',true);
226 this.bottomFrontDiv = this.el.select('.flipper_bottom_front',true);
227 this.topNumBack = this.el.select('.flipper_top_back span',true);
228 this.topNumFront = this.el.select('.flipper_top_front span',true);
229 this.bottomNumBack = this.el.select('.flipper_bottom_back span',true);
230 this.bottomNumFront = this.el.select('.flipper_bottom_front span',true);
232 this.targetNum = currentNumber;
233 this.currentNum = currentNumber;
234 this.nextNum = currentNumber;
236 this.currentlyAnimating = false;
239 flipTo : function (num)
241 if (this.currentNum === num)
244 this.targetNum = num;
245 if (this.currentlyAnimating) {
252 animNext : function ()
254 if (this.currentNum == this.targetNum)
256 this.currentlyAnimating = false;
260 var doRandomDelay = !this.currentlyAnimating;
261 this.currentlyAnimating = true;
262 this.nextNum = this.currentNum + 1;
263 if (this.nextNum > 9) {
267 var delay = Math.random()/5;
268 if (!doRandomDelay) {
272 // Animate top flipper
274 digit.topNumBack.html(digit.nextNum);
276 digit.topFrontDiv.animate(
278 scaleY: {from :1, to : 0}
280 this.manager.speed, //duration
281 function() {}, // oncomplate
283 'motion' // desplay type.
285 }).defer(delay, this);
289 digit.bottomNumFront.dom.innerHTML = digit.nextNum;
291 digit.bottomFrontDiv.animate(
293 scaleY: {from: 0, to : 1},
296 this.manager.options.speed * 0.5, //duration
298 digit.currentNum = digit.nextNum;
299 digit.topNumFront.dom.innerHTML = digit.currentNum;
300 digit.topFrontDiv.attr('style', '');
301 digit.bottomNumBack.dom.innerHTML = digit.currentNum;
304 digit.manager.fireEvent('onFlip', digit.manager);
308 'motion' // desplay type.
311 }).defer(delay + this.manager.speed, this);
315 //??? digit.bottomFrontDiv. digit.bottomNumFront.html(digit.nextNum);