3 Roo.ux.FlipCounter = function(options)
5 Roo.apply(this, options);
6 //this.el = $(element);
7 //this.options = $.extend({}, defaults, options);
15 Roo.extend(Roo.ux.FlipCounter, Roo.Component, {
21 ;(function ( $, window, document, undefined ) {
23 // Create the defaults once
24 var pluginName = 'flipCounter',
27 onFlip: function() {},
28 onResize: function() {}
32 function FlipCounter( element, options ) {
34 this.options = $.extend({}, defaults, options);
35 this._defaults = defaults;
36 this._name = pluginName;
40 FlipCounter.prototype.init = function () {
42 var startNum = elem.html();
43 if (startNum === "") startNum = "0";
44 elem.html('<ul class="flipcounter"></ul>');
46 this.ul = elem.children('ul');
48 this.digits = new Array();
50 for (i=startNum.length-1; i>=0; i=i-1)
52 this.addDigit(startNum[i]);
56 FlipCounter.prototype.addDigit = function (num) {
57 // Add separator after every 3rd digit
58 if (this.digits.length % 3 == 0 && this.digits.length != 0)
63 this.ul.prepend('<li>\
64 <div class="numberwrap">\
65 <div class="flipper_top flipper_top1"></div>\
66 <div class="flipper_top flipper_top2 flipper_top_back">\
68 <div class="rings"></div>\
70 <div class="flipper_top flipper_top_front">\
72 <div class="rings"></div>\
74 <div class="flipper_bottom flipper_bottom4"></div>\
75 <div class="flipper_bottom flipper_bottom3"></div>\
76 <div class="flipper_bottom flipper_bottom2"></div>\
77 <div class="flipper_bottom flipper_bottom1 flipper_bottom_back">\
79 <div class="rings"></div>\
81 <div class="flipper_bottom flipper_bottom_front">\
83 <div class="rings"></div>\
88 var li = this.ul.find('li:first-child');
89 var digit = new Digit(li, num);
91 this.digits.push(digit);
94 this.ulWidth = this.ulWidth + digit.li.outerWidth(true);
95 this.ul.css('min-width', this.ulWidth);
96 this.ul.css('min-height', digit.li.outerHeight(true));
99 FlipCounter.prototype.removeDigit = function () {
100 var digit = this.digits.splice(this.digits.length-1, 1)[0];
101 this.ulWidth = this.ulWidth - digit.li.outerWidth(true);
105 if (this.digits.length % 3 == 0)
107 var comma = this.ul.find('li.comma:first-child');
108 this.ulWidth = this.ulWidth - comma.outerWidth(true);
112 // Update width to current
113 this.ul.css('min-width', this.ulWidth);
116 FlipCounter.prototype.addSeparator = function (num) {
117 this.ul.prepend('<li class="comma">,</li>');
120 var comma = this.ul.find('li.comma:first-child');
121 this.ulWidth = this.ulWidth + comma.outerWidth(true);
122 this.ul.css('min-width', this.ulWidth);
125 FlipCounter.prototype.updateTo = function (num) {
126 var numStr = parseInt(num).toString();
128 // Change the number of digits displayed if needed
129 if (numStr.length != this.digits.length)
131 var diff = numStr.length - this.digits.length;
134 for (i=0; i<diff; i=i+1) {
140 for (i=diff; i<0; i=i+1) {
145 this.options['onResize']();
148 // Change all digit values
149 for (i=0; i<numStr.length; i=i+1)
151 this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
155 function Digit( element, currentNumber ) {
156 currentNumber = parseInt(currentNumber);
158 this.li = $(element);
159 this.topFrontDiv = this.li.find('.flipper_top_front');
160 this.bottomFrontDiv = this.li.find('.flipper_bottom_front');
161 this.topNumBack = this.li.find('.flipper_top_back span');
162 this.topNumFront = this.li.find('.flipper_top_front span');
163 this.bottomNumBack = this.li.find('.flipper_bottom_back span');
164 this.bottomNumFront = this.li.find('.flipper_bottom_front span');
166 this.targetNum = currentNumber;
167 this.currentNum = currentNumber;
168 this.nextNum = currentNumber;
170 this.currentlyAnimating = false;
173 Digit.prototype.flipTo = function (num) {
174 if (this.currentNum === num)
177 this.targetNum = num;
178 if (this.currentlyAnimating)
184 Digit.prototype.animNext = function () {
185 if (this.currentNum == this.targetNum)
187 this.currentlyAnimating = false;
191 var doRandomDelay = !this.currentlyAnimating;
192 this.currentlyAnimating = true;
193 this.nextNum = this.currentNum + 1;
194 if (this.nextNum > 9)
197 var delay = Math.random()/5;
198 if (!doRandomDelay) delay = 0.01;
200 // Animate top flipper
202 digit.topNumBack.html(digit.nextNum);
203 digit.topFrontDiv.tween({
208 duration: this.manager.options.speed,
214 // Animate bottom flipper with delay
215 digit.bottomFrontDiv.tween({
219 time: delay + this.manager.options.speed,
220 duration: this.manager.options.speed * 0.5,
223 onStart: function() {
224 digit.bottomNumFront.html(digit.nextNum);
227 digit.currentNum = digit.nextNum;
228 digit.topNumFront.html(digit.currentNum);
229 digit.topFrontDiv.removeAttr('style', '');
230 digit.bottomNumBack.html(digit.currentNum);
232 digit.manager.options['onFlip']();
238 // A really lightweight plugin wrapper around the constructor,
239 // preventing against multiple instantiations
240 $.fn[pluginName+'Init'] = function ( options ) {
241 return this.each(function () {
242 if (!$.data(this, 'plugin_' + pluginName)) {
243 $.data(this, 'plugin_' + pluginName,
244 new FlipCounter( this, options ));
249 $.fn[pluginName+'Update'] = function ( num ) {
250 return this.each(function () {
251 var obj = $.data(this, 'plugin_' + pluginName);
258 })( jQuery, window, document );