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(){
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)
66 this.el.insertHtml('afterBegin', '<li>\
67 <div class="numberwrap">\
68 <div class="flipper_top flipper_top1"></div>\
69 <div class="flipper_top flipper_top2 flipper_top_back">\
71 <div class="rings"></div>\
73 <div class="flipper_top flipper_top_front">\
75 <div class="rings"></div>\
77 <div class="flipper_bottom flipper_bottom4"></div>\
78 <div class="flipper_bottom flipper_bottom3"></div>\
79 <div class="flipper_bottom flipper_bottom2"></div>\
80 <div class="flipper_bottom flipper_bottom1 flipper_bottom_back">\
82 <div class="rings"></div>\
84 <div class="flipper_bottom flipper_bottom_front">\
86 <div class="rings"></div>\
91 var li = this.el.select('li'.true).first();
92 var digit = new Roo.ux.FlipCounter.Digit(li, num);
94 this.digits.push(digit);
97 this.ulWidth = this.ulWidth + digit.el.getWidth(true);
99 'min-width' : this.ulWidth,
100 'min-height' :digit.el.getHeight(true)
105 removeDigit : function ()
107 var digit = this.digits.splice(this.digits.length-1, 1)[0];
109 this.ulWidth = this.ulWidth - digit.el.outerWidth(true);
113 if (this.digits.length % 3 == 0)
115 var comma = this.ul.find('li.comma:first-child');
116 this.ulWidth = this.ulWidth - comma.outerWidth(true);
120 // Update width to current
121 this.el.set( { 'min-width' : this.ulWidth});
124 addSeparator : function (num)
126 this.ul.prepend('<li class="comma">,</li>');
129 var comma = this.ul.find('li.comma:first-child');
130 this.ulWidth = this.ulWidth + comma.outerWidth(true);
131 this.ul.css('min-width', this.ulWidth);
134 FlipCounter.prototype.updateTo = function (num) {
135 var numStr = parseInt(num).toString();
137 // Change the number of digits displayed if needed
138 if (numStr.length != this.digits.length)
140 var diff = numStr.length - this.digits.length;
143 for (i=0; i<diff; i=i+1) {
149 for (i=diff; i<0; i=i+1) {
154 this.options['onResize']();
157 // Change all digit values
158 for (i=0; i<numStr.length; i=i+1)
160 this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
164 function Digit( element, currentNumber ) {
165 currentNumber = parseInt(currentNumber);
167 this.li = $(element);
168 this.topFrontDiv = this.li.find('.flipper_top_front');
169 this.bottomFrontDiv = this.li.find('.flipper_bottom_front');
170 this.topNumBack = this.li.find('.flipper_top_back span');
171 this.topNumFront = this.li.find('.flipper_top_front span');
172 this.bottomNumBack = this.li.find('.flipper_bottom_back span');
173 this.bottomNumFront = this.li.find('.flipper_bottom_front span');
175 this.targetNum = currentNumber;
176 this.currentNum = currentNumber;
177 this.nextNum = currentNumber;
179 this.currentlyAnimating = false;
182 Digit.prototype.flipTo = function (num) {
183 if (this.currentNum === num)
186 this.targetNum = num;
187 if (this.currentlyAnimating)
193 Digit.prototype.animNext = function () {
194 if (this.currentNum == this.targetNum)
196 this.currentlyAnimating = false;
200 var doRandomDelay = !this.currentlyAnimating;
201 this.currentlyAnimating = true;
202 this.nextNum = this.currentNum + 1;
203 if (this.nextNum > 9)
206 var delay = Math.random()/5;
207 if (!doRandomDelay) delay = 0.01;
209 // Animate top flipper
211 digit.topNumBack.html(digit.nextNum);
212 digit.topFrontDiv.tween({
217 duration: this.manager.options.speed,
223 // Animate bottom flipper with delay
224 digit.bottomFrontDiv.tween({
228 time: delay + this.manager.options.speed,
229 duration: this.manager.options.speed * 0.5,
232 onStart: function() {
233 digit.bottomNumFront.html(digit.nextNum);
236 digit.currentNum = digit.nextNum;
237 digit.topNumFront.html(digit.currentNum);
238 digit.topFrontDiv.removeAttr('style', '');
239 digit.bottomNumBack.html(digit.currentNum);
241 digit.manager.options['onFlip']();
247 // A really lightweight plugin wrapper around the constructor,
248 // preventing against multiple instantiations
249 $.fn[pluginName+'Init'] = function ( options ) {
250 return this.each(function () {
251 if (!$.data(this, 'plugin_' + pluginName)) {
252 $.data(this, 'plugin_' + pluginName,
253 new FlipCounter( this, options ));
258 $.fn[pluginName+'Update'] = function ( num ) {
259 return this.each(function () {
260 var obj = $.data(this, 'plugin_' + pluginName);
267 })( jQuery, window, document );