Roo.ux.FlipCounter = function(options)
{
- Roo.apply(this, options);
+ Roo.ux.FlipCounter.superclass.constructor.call(this, options);
+
+ //Roo.apply(this, options);
//this.el = $(element);
//this.options = $.extend({}, defaults, options);
- this.addEvents({
+ this.addEvents({
// raw events
/**
* @event flip
});
-
+ this.digits = new Array();
+
//this.init();
speed : 0.2,
startnumber : 0,
+ currentNumber : 0,
+ decimal : 0,
digits : false, // array...
-
+ ulWidth : 0,
+ cls : '',
getAutoCreate : function(){
return {
tag: 'ul',
- cls: 'flipcounter',
+ cls: 'flipcounter ' + this.cls,
};
},
- init : function ()
+ initEvents : function ()
{
- var startNum = ""+ this.startnumber;
- this.ulWidth = 0;
- this.digits = new Array();
+
+
+ var startNum = (1.0*this.startnumber).toFixed(this.decimal);
+ //Roo.log("STARTNUmber: " + startNum);
for (i=startNum.length-1; i>=0; i=i-1)
{
+ if (startNum[i] == '.') {
+ this.addSeparator('.');
+ continue;
+ }
this.addDigit(startNum[i]);
}
+ this.currentNumber = this.startnumber;
},
- addDigit : function (num) {
+ addDigit : function (num)
+ {
+
+ //Roo.log("Add digit "+ num);
// Add separator after every 3rd digit
- if (this.digits.length % 3 == 0 && this.digits.length != 0)
- {
- this.addSeparator();
+ if (this.decimal == 0 && this.digits.length % 3 == 0 && this.digits.length != 0) {
+ this.addSeparator(',');
}
- this.el.insertHtml('afterBegin', '<li>\
- <div class="numberwrap">\
- <div class="flipper_top flipper_top1"></div>\
- <div class="flipper_top flipper_top2 flipper_top_back">\
- <span>'+num+'</span>\
- <div class="rings"></div>\
- </div>\
- <div class="flipper_top flipper_top_front">\
- <span>'+num+'</span>\
- <div class="rings"></div>\
- </div>\
- <div class="flipper_bottom flipper_bottom4"></div>\
- <div class="flipper_bottom flipper_bottom3"></div>\
- <div class="flipper_bottom flipper_bottom2"></div>\
- <div class="flipper_bottom flipper_bottom1 flipper_bottom_back">\
- <span>'+num+'</span>\
- <div class="rings"></div>\
- </div>\
- <div class="flipper_bottom flipper_bottom_front">\
- <span>'+num+'</span>\
- <div class="rings"></div>\
- </div>\
- </div>\
- </li>');
+
- var li = this.el.select('li'.true).first();
- var digit = new Roo.ux.FlipCounter.Digit(li, num);
+ var digit = new Roo.ux.FlipCounter.Digit({ manager : this, currentNumber : num });
digit.manager = this;
this.digits.push(digit);
-
+ digit.render(this.el, 0);
+
// Update width
- this.ulWidth = this.ulWidth + digit.li.outerWidth(true);
- this.ul.css('min-width', this.ulWidth);
- this.ul.css('min-height', digit.li.outerHeight(true));
- };
+ this.ulWidth = this.ulWidth + digit.el.getWidth(true);
+ this.el.set({
+ 'min-width' : this.ulWidth,
+ 'min-height' :digit.el.getHeight(true)
+ });
+
+ },
- FlipCounter.prototype.removeDigit = function () {
+ removeDigit : function ()
+ {
var digit = this.digits.splice(this.digits.length-1, 1)[0];
- this.ulWidth = this.ulWidth - digit.li.outerWidth(true);
- digit.li.remove();
+
+ this.ulWidth = this.ulWidth - digit.el.getWidth(true);
+ digit.el.remove();
// Remove separators
- if (this.digits.length % 3 == 0)
+ if (this.decimal == 0 & this.digits.length % 3 == 0)
{
- var comma = this.ul.find('li.comma:first-child');
- this.ulWidth = this.ulWidth - comma.outerWidth(true);
+ var comma = this.el.select('li.comma:first-child');
+ this.ulWidth = this.ulWidth - comma.getWidth(true);
comma.remove();
}
// Update width to current
- this.ul.css('min-width', this.ulWidth);
- }
+ this.el.set( { 'min-width' : this.ulWidth});
+ },
- FlipCounter.prototype.addSeparator = function (num) {
- this.ul.prepend('<li class="comma">,</li>');
+ addSeparator : function (str)
+ {
+ var comma = this.el.insertHtml('afterBegin','<li class="comma">'+str+'</li>',true);
// Update width
- var comma = this.ul.find('li.comma:first-child');
- this.ulWidth = this.ulWidth + comma.outerWidth(true);
- this.ul.css('min-width', this.ulWidth);
- };
+
+ this.ulWidth = this.ulWidth + comma.getWidth(true);
+ this.el.set({'min-width' : this.ulWidth});
+ },
- FlipCounter.prototype.updateTo = function (num) {
- var numStr = parseInt(num).toString();
+ updateTo : function (num)
+ {
+ var numStr = (1.0*num).toFixed(this.decimal);
+ this.currentNumber = num;
+
+ var dl = this.digits.length + (this.decimal > 0 ? 1 : 0);
// Change the number of digits displayed if needed
- if (numStr.length != this.digits.length)
+ if (numStr.length != dl)
{
- var diff = numStr.length - this.digits.length;
+ var diff = numStr.length - dl;
+ //Roo.log("DIFF LEN=" +diff);
if (diff > 0)
{
for (i=0; i<diff; i=i+1) {
}
}
- this.options['onResize']();
+ this.fireEvent('onResize',this);
}
// Change all digit values
- for (i=0; i<numStr.length; i=i+1)
+
+ for (i=0, n=0; i<numStr.length; i=i+1)
{
- this.digits[i].flipTo(numStr[numStr.length - 1 - i]);
+ if (numStr[numStr.length - 1 - i] == '.') {
+ continue;
+ }
+ //Roo.log("UPDATE DIGIT=" + i + " to " + numStr[numStr.length - 1 - i]);
+ this.digits[n++].flipTo(numStr[numStr.length - 1 - i]);
}
- };
+ }
+
+});
+
+Roo.ux.FlipCounter.Digit = function(options)
+{
+ //Roo.apply(this, options);
+ Roo.ux.FlipCounter.Digit.superclass.constructor.call(this, options);
+
+
+ this.currentNumber = parseInt(this.currentNumber);
+
+
+}
+
+Roo.extend(Roo.ux.FlipCounter.Digit, Roo.bootstrap.Component, {
+
+ manager : null, // the flipcounter...
+ currentNumber : 0,
+
+
+ currentNum : 0,
+ nextNum : 0,
+ targetNum : 0,
+
+ topFrontDiv : null,
+ bottomFrontDiv : null,
+ topNumBack : null,
+ topNumFront : null,
+ bottomNumBack : null,
+ bottomNumFront : null,
- function Digit( element, currentNumber ) {
- currentNumber = parseInt(currentNumber);
+
+
+
+ getAutoCreate : function(){
- this.li = $(element);
- this.topFrontDiv = this.li.find('.flipper_top_front');
- this.bottomFrontDiv = this.li.find('.flipper_bottom_front');
- this.topNumBack = this.li.find('.flipper_top_back span');
- this.topNumFront = this.li.find('.flipper_top_front span');
- this.bottomNumBack = this.li.find('.flipper_bottom_back span');
- this.bottomNumFront = this.li.find('.flipper_bottom_front span');
+ //Roo.log("render with cn=" + this.currentNumber);
+ return {
+ tag: 'li',
+ cn : [
+ {
+ cls: 'numberwrap',
+ cn : [
+ { cls : 'flipper_top flipper_top1' },
+ {
+ cls : 'flipper_top flipper_top2 flipper_top_back',
+ cn : [
+ { tag: 'span', html: ""+this.currentNumber },
+ { cls : 'rings' }
+ ]
+
+ },
+ {
+ cls : 'flipper_top flipper_top_front',
+ cn : [
+ { tag: 'span', html: ""+this.currentNumber },
+ { cls : 'rings' }
+ ]
+
+ },
+ { cls : 'flipper_bottom flipper_bottom4' },
+ { cls : 'flipper_bottom flipper_bottom3' },
+ { cls : 'flipper_bottom flipper_bottom2' },
+ {
+ cls : 'flipper_bottom flipper_bottom1 flipper_bottom_back',
+ cn : [
+ { tag: 'span', html: ""+this.currentNumber },
+ { cls : 'rings' }
+ ]
+ },
+ {
+ cls : 'flipper_bottom flipper_bottom_front',
+ cn : [
+ { tag: 'span', html: ""+this.currentNumber },
+ { cls : 'rings' }
+ ]
+ },
+ ]
+ }
+ ]
+ };
+ },
+
+
+ initEvents : function()
+ {
- this.targetNum = currentNumber;
- this.currentNum = currentNumber;
- this.nextNum = currentNumber;
+
+
+ this.topFrontDiv = this.el.select('.flipper_top_front',true).first();
+ this.bottomFrontDiv = this.el.select('.flipper_bottom_front',true).first();
+ this.topNumBack = this.el.select('.flipper_top_back span',true).first();
+ this.topNumFront = this.el.select('.flipper_top_front span',true).first();
+ this.bottomNumBack = this.el.select('.flipper_bottom_back span',true).first();
+ this.bottomNumFront = this.el.select('.flipper_bottom_front span',true).first();
+
+ this.targetNum = this.currentNumber;
+ this.currentNum = this.currentNumber;
+ this.nextNum = this.currentNumber;
this.currentlyAnimating = false;
- }
+ },
- Digit.prototype.flipTo = function (num) {
+ flipTo : function (num)
+ {
if (this.currentNum === num)
return;
this.targetNum = num;
- if (this.currentlyAnimating)
+ if (this.currentlyAnimating) {
return;
+ }
this.animNext();
- };
+ },
- Digit.prototype.animNext = function () {
+ animNext : function ()
+ {
if (this.currentNum == this.targetNum)
{
this.currentlyAnimating = false;
var doRandomDelay = !this.currentlyAnimating;
this.currentlyAnimating = true;
this.nextNum = this.currentNum + 1;
- if (this.nextNum > 9)
+ if (this.nextNum > 9) {
this.nextNum = 0;
+ }
var delay = Math.random()/5;
- if (!doRandomDelay) delay = 0.01;
+ if (!doRandomDelay) {
+ delay = 0.01;
+ }
// Animate top flipper
var digit = this;
- digit.topNumBack.html(digit.nextNum);
- digit.topFrontDiv.tween({
- transform: {
- start: 'scaleY(1)',
- stop: 'scaleY(0)',
- time: delay,
- duration: this.manager.options.speed,
- units: '',
- effect: 'easeIn'
- }
- }).play();
+ digit.topNumBack.dom.innerHTML = digit.nextNum;
+ (function() {
+ digit.topFrontDiv.animate(
+ {
+ scaleY: {from :1, to : 0}
+ },
+ this.manager.speed, //duration
+ function() {}, // oncomplate
+ 'easeIn', //easing,
+ 'motion' // desplay type.
+ );
+ }).defer(delay, this);
- // Animate bottom flipper with delay
- digit.bottomFrontDiv.tween({
- transform: {
- start: 'scaleY(0)',
- stop: 'scaleY(1)',
- time: delay + this.manager.options.speed,
- duration: this.manager.options.speed * 0.5,
- units: '',
- effect: 'easeOut',
- onStart: function() {
- digit.bottomNumFront.html(digit.nextNum);
+ (function() {
+
+ digit.bottomNumFront.dom.innerHTML = digit.nextNum;
+
+ digit.bottomFrontDiv.animate(
+ {
+ scaleY: {from: 0, to : 1},
+
},
- onStop: function() {
+ this.manager.speed * 0.5, //duration
+ function() {
digit.currentNum = digit.nextNum;
- digit.topNumFront.html(digit.currentNum);
- digit.topFrontDiv.removeAttr('style', '');
- digit.bottomNumBack.html(digit.currentNum);
+ digit.topNumFront.dom.innerHTML = digit.currentNum;
+ digit.topFrontDiv.attr('style', '');
+ digit.bottomNumBack.dom.innerHTML = digit.currentNum;
+
digit.animNext();
- digit.manager.options['onFlip']();
- }
- }
- }).play();
- }
-
- // A really lightweight plugin wrapper around the constructor,
- // preventing against multiple instantiations
- $.fn[pluginName+'Init'] = function ( options ) {
- return this.each(function () {
- if (!$.data(this, 'plugin_' + pluginName)) {
- $.data(this, 'plugin_' + pluginName,
- new FlipCounter( this, options ));
- }
- });
- }
+ digit.manager.fireEvent('onFlip', digit.manager);
+
+ }, // oncomplate
+ 'easeOut', //easing,
+ 'motion' // desplay type.
+ )
+
+ }).defer(delay + this.manager.speed, this);
+
+
+
+ //??? digit.bottomFrontDiv. digit.bottomNumFront.html(digit.nextNum);
- $.fn[pluginName+'Update'] = function ( num ) {
- return this.each(function () {
- var obj = $.data(this, 'plugin_' + pluginName);
- if (obj) {
- obj.updateTo(num);
- }
- });
+
}
-
-})( jQuery, window, document );
\ No newline at end of file
+});
\ No newline at end of file
projects / roojs1 / blobdiff