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;
54 for (i=startNum.length-1; i>=0; i=i-1)
56 this.addDigit(startNum[i]);
60 addDigit : function (num) {
61 // Add separator after every 3rd digit
62 if (this.digits.length % 3 == 0 && this.digits.length != 0)
67 this.el.insertHtml('afterBegin', '<li>\
68 <div class="numberwrap">\
69 <div class="flipper_top flipper_top1"></div>\
70 <div class="flipper_top flipper_top2 flipper_top_back">\
72 <div class="rings"></div>\
74 <div class="flipper_top flipper_top_front">\
76 <div class="rings"></div>\
78 <div class="flipper_bottom flipper_bottom4"></div>\
79 <div class="flipper_bottom flipper_bottom3"></div>\
80 <div class="flipper_bottom flipper_bottom2"></div>\
81 <div class="flipper_bottom flipper_bottom1 flipper_bottom_back">\
83 <div class="rings"></div>\
85 <div class="flipper_bottom flipper_bottom_front">\
87 <div class="rings"></div>\
92 var li = this.el.select('li'.true).first();
93 var digit = new Roo.ux.FlipCounter.Digit(li, num);
95 this.digits.push(digit);
98 this.ulWidth = this.ulWidth + digit.li.outerWidth(true);
99 this.ul.css('min-width', this.ulWidth);
100 this.ul.css('min-height', digit.li.outerHeight(true));
103 FlipCounter.prototype.removeDigit = function () {
104 var digit = this.digits.splice(this.digits.length-1, 1)[0];
105 this.ulWidth = this.ulWidth - digit.li.outerWidth(true);
109 if (this.digits.length % 3 == 0)
111 var comma = this.ul.find('li.comma:first-child');
112 this.ulWidth = this.ulWidth - comma.outerWidth(true);
116 // Update width to current
117 this.ul.css('min-width', this.ulWidth);
120 FlipCounter.prototype.addSeparator = function (num) {
121 this.ul.prepend('<li class="comma">,</li>');
124 var comma = this.ul.find('li.comma:first-child');
125 this.ulWidth = this.ulWidth + comma.outerWidth(true);
126 this.ul.css('min-width', this.ulWidth);
129 FlipCounter.prototype.updateTo = function (num) {
130 var numStr = parseInt(num).toString();
132 // Change the number of digits displayed if needed
133 if (numStr.length != this.digits.length)
135 var diff = numStr.length - this.digits.length;
138 for (i=0; i<diff; i=i+1) {
144 for (i=diff; i<0; i=i+1) {
149 this.options['onResize']();
152 // Change all digit values
153 for (i=0; i<numStr.length; i=i+1)
155 this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
159 function Digit( element, currentNumber ) {
160 currentNumber = parseInt(currentNumber);
162 this.li = $(element);
163 this.topFrontDiv = this.li.find('.flipper_top_front');
164 this.bottomFrontDiv = this.li.find('.flipper_bottom_front');
165 this.topNumBack = this.li.find('.flipper_top_back span');
166 this.topNumFront = this.li.find('.flipper_top_front span');
167 this.bottomNumBack = this.li.find('.flipper_bottom_back span');
168 this.bottomNumFront = this.li.find('.flipper_bottom_front span');
170 this.targetNum = currentNumber;
171 this.currentNum = currentNumber;
172 this.nextNum = currentNumber;
174 this.currentlyAnimating = false;
177 Digit.prototype.flipTo = function (num) {
178 if (this.currentNum === num)
181 this.targetNum = num;
182 if (this.currentlyAnimating)
188 Digit.prototype.animNext = function () {
189 if (this.currentNum == this.targetNum)
191 this.currentlyAnimating = false;
195 var doRandomDelay = !this.currentlyAnimating;
196 this.currentlyAnimating = true;
197 this.nextNum = this.currentNum + 1;
198 if (this.nextNum > 9)
201 var delay = Math.random()/5;
202 if (!doRandomDelay) delay = 0.01;
204 // Animate top flipper
206 digit.topNumBack.html(digit.nextNum);
207 digit.topFrontDiv.tween({
212 duration: this.manager.options.speed,
218 // Animate bottom flipper with delay
219 digit.bottomFrontDiv.tween({
223 time: delay + this.manager.options.speed,
224 duration: this.manager.options.speed * 0.5,
227 onStart: function() {
228 digit.bottomNumFront.html(digit.nextNum);
231 digit.currentNum = digit.nextNum;
232 digit.topNumFront.html(digit.currentNum);
233 digit.topFrontDiv.removeAttr('style', '');
234 digit.bottomNumBack.html(digit.currentNum);
236 digit.manager.options['onFlip']();
242 // A really lightweight plugin wrapper around the constructor,
243 // preventing against multiple instantiations
244 $.fn[pluginName+'Init'] = function ( options ) {
245 return this.each(function () {
246 if (!$.data(this, 'plugin_' + pluginName)) {
247 $.data(this, 'plugin_' + pluginName,
248 new FlipCounter( this, options ));
253 $.fn[pluginName+'Update'] = function ( num ) {
254 return this.each(function () {
255 var obj = $.data(this, 'plugin_' + pluginName);
262 })( jQuery, window, document );