Contribuciónes al plugin de jQuery prettyDay

Hace un tiempo en un post anterior había comentado a cerca de un plugin de jQuery que muestra la fecha bonita y de como echarlo andar en wordpress.

El «detalle» del post es que para que tuviera soporte completo para la lengua española los invitaba a descargar el plugin desde mi «versión« ya que de momento se encontraba abierto  un ticket de cambios propuestos(un pull request).

Pues bien hace un par de días dicho cambio ya fue agregado, ahora para que tengas soporte completo en la lengua española + soporte de meses y años, no se requiere de otra cosa mas que seguir la documentación oficial del plugin.

O descargar el plugin desde el repositorio principal(ya no del mío) y jugar con el demo:

https://github.com/jzaefferer/jquery-prettydate/pull/12

Me encanta esto del git y el github clonar repositorios jugar con ellos como si fuesen recetas de cocina, mismas recetas que «heackeamos» para compartir y de repente cuando te das cuenta  estas discutiendo con ciertos chefs que te alientan a ser mas exigentes con uno mismo cada día.

Fecha en formato bonito un plugin de jQuery corriendo en wordpress

Hace un par de años John Resig el autor de jQuery escribió un árticulo muy bonito donde anunciaba una pequeña función que imprimía el día en un formato mas humano al cual denomino pretty-date , la función básicamente es la siguiente:

/*  prettyDate
 * 
 * recibe una fecha en formato ISO8601
 * y devuelve la fecha en formato bonito
 */

function prettyDate(time){
	// Lo primero que hace es obtener la diferencia
	// de la fecha pasada con la fecha actual
	var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
	    diff = (((new Date()).getTime() - date.getTime()) / 1000),
	    day_diff = Math.floor(diff / 86400);

	//Si la diferencia es invalida, quiere decir que el argumento pasado por el
	// usuario es invalido por lo cual regresa null
	if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
		return;

 //Finalmente va atrapando el rango de los las diferencias para así devolver el resultado
	return day_diff == 0 && (
			diff < 60 && "just now" ||
			diff < 120 && "1 minute ago" ||
			diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
			diff < 7200 && "1 hour ago" ||
			diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
		day_diff == 1 && "Yesterday" ||
		day_diff < 7 && day_diff + " days ago" ||
		day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

Posteriormente esta función se convirtió en un plugin de jQuery mantenido por jzaefferer (uno de los dev. del nucleo de jQuery). Pero… si analizamos detenidamente el código anterior del cual esta basado el  plugin nos daremos cuenta que  cuando la fechas rebasaba la semana el plugin truena, como se puede ver en el siguiente demo :S.

Este plugin lo empece a utilizar para la página de la Academia de Software Libre , sin mas me decidí a agregarle el soporte para meses y años, ademas de agregarle soporte para la lengua española (ver detalles de la confirmación), algunos de estos cambios están disponibles en la versión 1.1 disponible en el repositorio de jzaefferer sin embargo de momento la traducción completa esta disponible en mi repositorio (aunque quizás cuando lea esto mis cambios ya se hayan integrado).

Como usar este plugin es muy simple y personalizable

Una vez que obtengamos el plugin podemos usarlo de la siguiente manera:

<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate-es.js"></script>
    <script>
        jQuery(function ($) {
            $(".entryDate").prettyDate({attribute: "datetime"});
        });
    </script>
</head>
<body>
  <time datetime="2012-10-29T18:12:02+00:00" itemprop="dateCreated">
  </time>
</body>

Veamos lo primero que hacemos es cargar la librería jQuery, posteriormente el plugin (prettydate.js) y finalmente su traducción al español (jquery.prettydate-es.js ojo el orden importa).

Luego en el ready de jQuery mandamos a llamar a los elementos que pertenezcan a la clase .entryDate para aplicarles el plugin, al momento de mandarle el argumento {attribute: "datetime"} estamos indicando que el atributo a convertir sera el datetime, si no indicamos esto por defecto buscaría el atributo title

   $(".entryDate").prettyDate({attribute: "datetime"});

Hechando andar este plugin en WordPress

Bien lo primero que tenemos que hacer es mandar a llamar las librerias necesarias, por ejemplo deberíamos agregar en el header.php o footer.php de nuestra plantilla las siguientes lineas:

<?php
$rootPath = get_bloginfo('template_directory');
?>
<script src="<?php echo $rootPath; ?>js/jquery.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate-es.js"></script>
<script language="Javascript"  type="text/javascript">
$(function() {
    $(".entry-date").prettyDate({attribute: "datetime"});
});
</script>

Una vez que tenemos esto estamos diciendo que le muestre la fecha en formato bonito a los elementos que pertenezcan a la clase entry-date y que a la vez tengan atributo datetime en formato ISO-8601 correcto, por lo cual faltaría generar dicha la salida desde nuestro tema de worpdress.

Finalmente en la cabecera del código de nuestro artículos agregamos el siguiente código en php:

<?php

printf( 
     '<a href="%1$s" title="%2$s" rel="bookmark">'.
     '<time itemprop="dateCreated" datetime="%3$s">%4$s</time></a>',
     get_bloginfo('url') . '/' . get_the_time('Y/m/d'),//Aqui la liga deberia de ir a los posts de ese día
     'Artículos del día ' . get_the_date(),
     get_the_time( 'c' ),
     get_the_date()
    );

Sólo como dato informativo la funcion

get_the_time

con el argumento ‘c’ regresa la fecha en formato ISO como lo indica en su API wordpress.
Quizás esto lo debería de meter en alguna función y agregarlo en su archivo function.php de la manera siguiente:

 if ( ! function_exists( 'mitema_pretty_date_post' ) ) :
function mitema_pretty_date_post() {
    // el código mostrado anteriormente
}
endif;

De esta forma solo bastaría con mandar a llamar la función para re-utilizarla, en el single.php o en el loop.php, content.php, etc… podría agregar:

mitema_pretty_date_post();