mercadolibre/chico — Issue #435: countdown: create a component
Author: lquintana
Created: 2011-11-04 20:11:57+00:00
State: open

I need a countodown component to show the countdown character below an input field in a form.

*now im using the code below*

/**
* Countdown component
*
* @autor: Leandro Linares
* @autor: Guillermo Paz
* @version: 1.1 (Next steps: Increase display font weight when count is "downing")
* @revision: 07/10/10
*
*/

var countdown = {
/**
*	Configuration
*/
init: function(m) {
if (!$.isArray(m)) {
throw("Countdown: Can't start without a configuration."); return;
} else { // each configuration
$(m).each(function(i,e){ countdown.make(e); });
}
},

/**
*	Map of elements and references in the DOM
*/
triggers: [],

/**
*	Build a reference of triggers and for each one of them construct a new Count()
*/
make: function(e){
var indexPushed = countdown.triggers.push(e);
countdown.triggers[indexPushed-1].countdown = new countdown.Count(e);
},

/**
* Count Constructor
*/
Count: function(e) {

// Configuration
var that = this;
var t = $(e.trigger);
var d = $(e.display);
var maxLength = d.html();
d.html(maxLength - t.val().length); // if T have text on load
var lastLength = t.val().length;

// Function
this.proccess = function(){
var len = t.val().length;
var num = parseInt(d.html());

// CountDown
if(len > lastLength && len <= maxLength){
d.html(num - (len - lastLength)); lastLength = len;
// CountUp
}else if(len < lastLength && len >= 0){
d.html(num - (len - lastLength)); lastLength = len;
// Limit
}else if(len > lastLength && len > maxLength){
t.val(t.val().substr(0, maxLength));
};
};

// Events
t.bind('keyup',that.proccess)
.bind('keypress',that.proccess)
.bind('paste', function(){ setTimeout(that.proccess, 0) });
}
}

*and instanciate this with:*

countdown.init([
{
trigger: '#title',
display: '#display'
}
]);