Skip to content
julho 25, 2008 / cassiomarques

Usando o plugin timeago do JQuery no Rails

Atualizando (31/08/2008): Agora o timeago possui suporte à internacionalização, ao contrário do que está escrito abaixo (na época deste post o plugin não possuia tal recurso). Dentre os idiomas incluídos está o Português.

Na última edição do podcast do RailsEnvy, os caras falaram de um plugin bem legal para o JQuery, o timeago. A idéia desse plugin é criar elementos na página que indiquem tempo decorrido, mas por extenso. Esse tempo pode ser qualquer coisa: o tempo que uma página está aberta, a quantidade de dias que um chamado está aberto, etc. O interessante é que com o timeago, o elemento da página que exibe o intervalo de tempo é atualizado automaticamente. Se você abrir uma página e esperar tempo suficiente, verá que o texto muda. Todo o processamento ocorre do lado cliente, liberando o servidor desta tarefa.
No site do timeago existe um pequeno helper para o Rails, para gerar o html necessário de maneira bastante simples. Tudo o que você precisa fazer é incluir os arquivos javascript do jQuery (se você já usa o JRails o seu javascript_include_tag :defaults já faz isso) e o arquivo javascript do timeago.

Bom, o código do helper que existe na página do timeago é assim

def timeago(time, options = {})
  options[:class] ||= "timeago"
  content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time
end

O que acontece é que o timeago precisa de uma string de data no formato iso8601, por exemplo 2008-07-17T09:24:17Z. O Ruby possui, na classe Time, o método Time.iso8601, o que facilita bastante nossa vida. Basta fazer meu_timestamp.iso8601 e você já tem uma string no formato iso8601 prontinha. O que o helper faz é criar uma tag “attr” e colocar no atributo “title” a string no formato iso8601.
Mas e se o atributo do meu model for uma data e não um timestamp? Ai é o pulo do gato: A classe Date não tem o método iso8601. Neste caso, vamos precisar alterar um pouco o helper, para aceitar tanto atributos que você mapeou na sua migration como :date quanto :datetime. A alteração é simples:

def timeago(time, options = {})
    options[:class] ||= "timeago"
    time = time.to_time unless time.kind_of?(Time)
    content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time

Agora basta fazer assim na sua view:

<%= timeago(@seu_objeto.um_datetime) %>

Detalhe: Óbviamente todo o texto criado pelo timeago está em inglês e não há qualquer mecanismo de internacionalização. Se você quiser deixar tudo em português (foi o que eu fiz) basta abrir o arquivo jquery.timeago.js e colocar o seu texto lá. Em por exemplo fiz assim (o arquivo é pequeno e voc com certeza irá se localizar facilmente)

//….
var words = seconds < 45 && "menos de um minuto" || seconds < 90 && "cerca de um minuto" || minutes < 45 && Math.round(minutes) + " minutos" || minutes < 90 && "cerca de uma hora" || hours < 24 && "cerca de " + Math.round(hours) + " horas" || hours < 48 && "um dia" || days < 30 && Math.floor(days) + " dias" || days < 60 && "cerca de um mês" || days < 365 && Math.floor(days / 30) + " meses" || years < 2 && "cerca de um ano" || Math.floor(years) + " anos"; //... [/source]

2 Comentários

Deixe um comentário
  1. Ryan McGeary / ago 31 2008 7:03 pm

    Just an update. Timeago now has locale support.

  2. cassiomarques / set 1 2008 1:26 am

    Ok @Ryan, thank you :-)

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: