Creando plugins en jQuery: Widget para Twitter básico

Resultado final jQueryTwitterWidget

Últimamente ando dándole vueltas al tema de la autoría de plugins en jQuery; pequeños snippets o utilidades que hagan la vida un poco más fácil a la comunidad, o por lo menos a mí en la repetición de algunas tareas. Así que os traigo el primer proyecto realizado aprovechando un código que tuve que programar para un widget simplón de Twitter. El código es primerizo, no paso de funciones y al menos uso $.extends para las opciones personalizables, pero el tema de métodos y demás lo dejo para el capítulo siguiente 😉

( function($){

//Variables globales
$.fn.jsonP = "";
$.fn.object = "";

//La función principal
$.fn.twitterWidgetUL = function(opciones) {

opciones_int = $.extend( $.fn.twitterWidgetUL.opciones_default, opciones );

//Referencia al objeto pasado del DOM
$.fn.object = $(this);

//El intervalo que servirá para ir actualizando el objeto DOM
setInterval(function(){
$.fn.llamadaTwitter(opciones_int.user);
}, opciones_int.tiempo);

$.fn.llamadaTwitter(opciones_int.user);
return true;
};

//Las opciones por defecto si no se pasa ninguna
$.fn.twitterWidgetUL.opciones_default = {
user:"tonijota", // Mi twitter 🙂
tiempo: 60000, //10 minutos
};

//Aquí está la llamada GET json a Twitter
$.fn.llamadaTwitter = function (user)
{
var ul_twitter = "";
jsonTwitter = "http://twitter.com/statuses/user_timeline.json?screen_name="+user+"&callback=?";
$.ajax({
url:jsonTwitter,
dataType:'jsonp',
success: function(data){
$.fn.jsonP = data;
ul_twitter = $.fn.listaTuits();
$.fn.object.html(ul_twitter);
}
});

};

//Construimos el HTML
$.fn.listaTuits = function()
{
var str_html = "";
// Descomenta esta línea y la penúltima si quieres usar otro elemento DOM donde meter la lista
// str_html = "
<ul>
</ul><ul>";</ul>

&nbsp;
<ul>
</ul><ul>for (i=0; i&lt; $.fn.jsonP.length; i++)</ul>

&nbsp;
<ul>
</ul><ul>{</ul>

&nbsp;
<ul>
</ul><ul>clase_alternate = (i % 2 == 0) ? "odd" : "even";</ul>

&nbsp;
<ul>
</ul><ul>str_html = str_html + "</ul>

&nbsp;
<ul>
	<li class="&quot;+ clase_alternate +&quot;">" +
"<img src="&quot;+ $.fn.jsonP[i].user.profile_image_url +&quot;" alt="" />" +
$.fn.CrearLinks($.fn.jsonP[i].text) +
"" +
$.fn.fechaTwitter($.fn.jsonP[i].created_at) +
"

" +
"";
}

str_html = str_html + "</li>
</ul>
";
return str_html;
};

//Pasamos el formato de fecha de Twitter, algo infumable (created_at) a algo más decente.
$.fn.fechaTwitter = function (time){
var date = new Date(time)

var mes = date.getMonth().toString();
var hora = date.getHours().toString();
var dia = date.getDate().toString();
var minutos = date.getMinutes().toString();
var segundos = date.getSeconds().toString();

if (mes.length &lt; 2) mes = '0' + mes;
if (segundos.length &lt; 2) segundos = '0' + segundos;
if (minutos.length &lt; 2) minutos = "0" + minutos;
if (dia.length &lt; 2) dia = "0" + dia;
if (hora.length &lt; 2) hora = "0" + hora;

return dia+"/"+mes+"/"+date.getFullYear()+" "+hora+":"+minutos+":"+segundos;
};

//Una expresioncilla regular para pasar los enlaces planos de texto a links anchor html
$.fn.CrearLinks = function (texto) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/ig;
return texto.replace(exp,"<a href="$1">$1");
};</a>

})(jQuery);

Es fácil personalizar a través de CSS, aunque por defecto se incluye una hoja de estilos no será muy complicado.

No me he esmerado mucho comentándo el código, pero tampoco se trataba de que fuera un tutorial básico. Mientras mi GitHub encuentra su cabeza os subo el enlace a Megaupload.

Descargar jQueryTwitterWidget.rar
B067CDE67F27E40D4E4EC7DD8576754A