Datas Relativas no Blogue com jQuery

Como a maior parte dos utilizadores da plataforma Blogger já notou, o Blogger implementou um novo sistema de comentários aninhados tipo fórum que tem dado muita dor de cabeça a quem gosta de personalizar tudo no blogue e não só. XD

Desde o inicio, o novo sistema de comentários tem sido fértil em bugs e com varias falhas, o que fez com que muitos voltassem ao sistema antigo ou mudassem para o sistema em pop-up. Para esses utilizadores, caso queiram voltar a ter um sistema de comentários tipo fórum mas sem os bugs do novo sistema, recomendo o artigo Comentarios anidados sin el nuevo código no excelente blogue do JMuir onde ele mostra uma maneira de obter o mesmo efeito com o sistema antigo, mas numa versão mais estável.

Eu ainda não testei mas pelo que vi no Vagabundia, parece-me uma boa alternativa. :D

No meu caso, ainda não desisti do novo sistema e tenho-me divertido a tentar domar a besta. Que querem? Gosto de desafios! =D

O que me traz ao assunto deste artigo, como corrigir a maneira como se apresenta a data em que os comentários são publicados.
Como sabem, um dos bugs do novo sistema é que a data e hora a que os comentários são publicados são apresentados na versão inglesa e isso nunca me agradou.

Ora quando criei este template, quis fazer com que nas paginas de arquivo e etc, a data aparecesse tipo "publicado há x dias", algo que consegui com um pouco de jQuery e um script criado por Dan Drinkard. :D

Basicamente, o que o script faz é transformar em texto quando tempo passou desde a data existente.

Abaixo, está o script que traduzi para português e que utilizo aqui:

Ver Código

# Código

<script type='text/javascript'>
//<![CDATA[
// DATAS RELATIVAS
/**
* jQ plugin adapted from 37s' relative date tool
* Takes the format of "Jan 15, 2007 15:45:00 GMT" and converts it to a relative time
* @see http://37signals.com/svn/posts/1557-javascript-makes-relative-times-compatible-with-caching
*/
(function($, window, undefined){

$.fn.relativeDate = function(opts){
var defaults = {
dateGetter: function(el){
return $(el).text();
}
},
options = $.extend({}, defaults, opts),
time_ago_in_words_with_parsing = function(from) {
var date = new Date;
date.setTime(Date.parse(from));
return time_ago_in_words(date);
},
time_ago_in_words = function(from) {
return distance_of_time_in_words(new Date, from);
},
distance_of_time_in_words = function(to, from) {
var distance_in_seconds = ((to - from) / 1000);
var distance_in_minutes = Math.floor(distance_in_seconds / 60);

if (distance_in_minutes == 0) { return 'há menos de um minuto'; }
if (distance_in_minutes == 1) { return 'há um minuto'; }
if (distance_in_minutes < 45) { return 'há ' + distance_in_minutes + ' minutos'; }
if (distance_in_minutes < 90) { return 'há cerca de uma hora'; }
if (distance_in_minutes < 1440) { return 'há cerca de ' + Math.round(distance_in_minutes / 60) + ' horas'; }
if (distance_in_minutes < 2880) { return 'há um dia'; }
if (distance_in_minutes < 43200) { return 'há ' + Math.floor(distance_in_minutes / 1440) + ' dias'; }
if (distance_in_minutes < 86400) { return 'há cerca de um mês'; }
if (distance_in_minutes < 525960) { return 'há ' + Math.floor(distance_in_minutes / 43200) + ' meses'; }
if (distance_in_minutes < 1051199) { return 'há cerca de um ano'; }

return 'há mais de ' + Math.floor(distance_in_minutes / 525960) + ' anos';
}

return $(this).each(function(){
date_str = options.dateGetter(this);
$(this).html(time_ago_in_words_with_parsing(date_str));
});
};

})(jQuery, window);
//]]>
</script>

Ocultar Código

Não esquecer que para funcionar, devem ter a biblioteca Jquery instalada no blogue. Podem ver neste artigo como colocar. Depois basta copiar o código acima e colocar abaixo de onde está a chamada ao Jquery, mas recomendo que caso tenham outros scripts ou mesmo que não seja o caso, testem primeiro num blogue de testes pois a localização (abaixo ou acima) de outros scripts pode entrar em conflito e causar que alguma coisa deixe de funcionar correctamente.

Agora vem a parte que me deu trabalho a descobrir, o script do Blogger que faz os comentários funcionarem e que faz com que a data apareça em versão inglesa também faz com que essa data apareça com oito horas de diferença da nossa aqui em Portugal.
Devido a esse bug, ao colocar a chamada que faz o script funcionar, devemos também colocar mais uma linha de código para acrescentar que a data está com oito horas a mais.

Aqui está o código para fazer a chamada da data relativa, completo com a linha extra marcada a roxo. Ao implementarem este script, caso não tenham o vosso blogue em hora de Portugal, recomendo que testem primeiro sem a essa linha e depois de testarem como fica nos comentários, a acrescentem editada para o vosso fuso horário.

# Código

<script type='text/javascript'>
//<![CDATA[
$(".datetime a").append(" -0800")

$(".datetime a").relativeDate();
//]]>
</script>

Este código deve ser colocado ABAIXO de

# Código

<div id='comment-holder'>
<data:post.commentHtml/>
</div>

que encontram em Editar HTML, com Expandir modelos do widget marcado.

E é isso, salvem o modelo e vejam como ficou. ;)

Numa outra nota, o script para os emoticons que utilizo aqui também foi alterado e agora além de nos comentários, também mostra emoticons no elemento dos comentários recentes e nos artigos que escrevo. Finalmente acabou de cada vez que quero colocar um emoticon num artigo, ter que que colocar uma imagem. =D
Ao colocar este novo script, tive que alterar alguns dos códigos dos emoticons porque os códigos antigos não funcionavam bem mas não acho que isso seja um grande problema. ;D

Até breve. :-F