3 Roo.ux.FlipCounter = function(options)
5 Roo.apply(this, options);
6 //this.el = $(element);
7 //this.options = $.extend({}, defaults, options);
12 * When a box is flipped
13 * @param {Roo.ux.FlipCounter} counter
18 * When a box is resized
19 * @param {Roo.ux.FlipCounter} counter
25 this.digits = new Array();
32 Roo.extend(Roo.ux.FlipCounter, Roo.bootstrap.Component, {
37 digits : false, // array...
40 getAutoCreate : function(){
49 initEvents : function ()
51 var startNum = ""+ this.startnumber;
53 for (i=startNum.length-1; i>=0; i=i-1)
55 this.addDigit(startNum[i]);
59 addDigit : function (num) {
60 // Add separator after every 3rd digit
61 if (this.digits.length % 3 == 0 && this.digits.length != 0)
68 var li = this.el.select('li', true).first();
69 var digit = new Roo.ux.FlipCounter.Digit(li, num);
71 this.digits.push(digit);
72 digit.render(this.el);
75 this.ulWidth = this.ulWidth + digit.el.getWidth(true);
77 'min-width' : this.ulWidth,
78 'min-height' :digit.el.getHeight(true)
83 removeDigit : function ()
85 var digit = this.digits.splice(this.digits.length-1, 1)[0];
87 this.ulWidth = this.ulWidth - digit.el.outerWidth(true);
91 if (this.digits.length % 3 == 0)
93 var comma = this.el.select('li.comma:first-child');
94 this.ulWidth = this.ulWidth - comma.getWidth(true);
98 // Update width to current
99 this.el.set( { 'min-width' : this.ulWidth});
102 addSeparator : function (num)
104 var comma = this.el.insertHtml('afterBegin','<li class="comma">,</li>',true);
108 this.ulWidth = this.ulWidth + comma.getWidth(true);
109 this.el.set({'min-width' : this.ulWidth});
112 updateTo : function (num)
114 var numStr = parseInt(num).toString();
116 // Change the number of digits displayed if needed
117 if (numStr.length != this.digits.length)
119 var diff = numStr.length - this.digits.length;
122 for (i=0; i<diff; i=i+1) {
128 for (i=diff; i<0; i=i+1) {
133 this.fireEvent('onResize',this);
136 // Change all digit values
137 for (i=0; i<numStr.length; i=i+1)
139 this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
145 Roo.ux.FlipCounter.Digit = function(options)
147 //Roo.apply(this, options);
149 this.currentNumber = this.parseInt(this.currentNumber);
152 Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
158 bottomFrontDiv : null,
161 bottomNumBack : null,
162 bottomNumFront : null,
165 getAutoCreate : function(){
173 { cls : 'flipper_top flipper_top1' },
175 cls : 'flipper_top flipper_top2 flipper_top_back',
177 { tag: 'span', html: num },
183 cls : 'flipper_top flipper_top_front',
185 { tag: 'span', html: num },
190 { cls : 'flipper_bottom flipper_bottom4' },
191 { cls : 'flipper_bottom flipper_bottom3' },
192 { cls : 'flipper_bottom flipper_bottom2' },
194 cls : 'flipper_bottom flipper_bottom1 flipper_bottom_back',
196 { tag: 'span', html: num },
201 cls : 'flipper_bottom flipper_bottom_front',
203 { tag: 'span', html: num },
214 initEvents : function()
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);
226 this.targetNum = currentNumber;
227 this.currentNum = currentNumber;
228 this.nextNum = currentNumber;
230 this.currentlyAnimating = false;
233 flipTo : function (num)
235 if (this.currentNum === num)
238 this.targetNum = num;
239 if (this.currentlyAnimating) {
246 animNext : function ()
248 if (this.currentNum == this.targetNum)
250 this.currentlyAnimating = false;
254 var doRandomDelay = !this.currentlyAnimating;
255 this.currentlyAnimating = true;
256 this.nextNum = this.currentNum + 1;
257 if (this.nextNum > 9) {
261 var delay = Math.random()/5;
262 if (!doRandomDelay) {
266 // Animate top flipper
268 digit.topNumBack.html(digit.nextNum);
270 digit.topFrontDiv.animate(
272 scaleY: {from :1, to : 0}
274 this.manager.speed, //duration
275 function() {}, // oncomplate
277 'motion' // desplay type.
279 }).defer(delay, this);
283 digit.bottomNumFront.dom.innerHTML = digit.nextNum;
285 digit.bottomFrontDiv.animate(
287 scaleY: {from: 0, to : 1},
290 this.manager.options.speed * 0.5, //duration
292 digit.currentNum = digit.nextNum;
293 digit.topNumFront.dom.innerHTML = digit.currentNum;
294 digit.topFrontDiv.attr('style', '');
295 digit.bottomNumBack.dom.innerHTML = digit.currentNum;
298 digit.manager.fireEvent('onFlip', digit.manager);
302 'motion' // desplay type.
305 }).defer(delay + this.manager.speed, this);
309 //??? digit.bottomFrontDiv. digit.bottomNumFront.html(digit.nextNum);