jQuery Timeago, Time Span ala Facebook

Update waktu ala Facebook dengan jQuery ini terinspirasi ketika saya ingin membuat aplikasi web dengan sedikit meniru-niru teknologi Facebook. Tahu sendiri, teknologi Facebook menarik sekali untuk dijiplak, karena begitu canggih dan hebat (menurut saya). Salah satunya yaiu update waktu  ala Facebook pada saat kita update atau komen status teman kita di jejaring sosial itu. Mari kita mulai.
Jika masih kurang paham, Saya beri sedikit gambaran. Coba perhatikan ketika Anda update status, terlihat disana waktu Anda update status. Memang bukan berupa tanggal dan waktu. Biasanya jika Anda baru saja update, maka akan ditulis "Baru Saja". Kemudian setelah beberepa menit kemudian, secara automatis berubah, "beberapa menit yang lalu", kemudian berubah lagi "beberapa jam yang lalu" dan seterusnya sesuai jeda waktu Anda menulis status hingga sekarang. Tanpa adanya refresh dari Anda. Berkat dorongan saya yang selalu ingin tahu, saya googling di Internet mengenai itu. Ternyata, tidak cukup banyak  informasi yang saya dapat. Mungkin berkaitan dengan kata kunci. Sampai akhirnya saya bertanya kepada para master-master web developer di sebuah forum. Hasilnya, ternyata ada sebuah plugin jQuery yang memang menyediakan fitur untuk update waktu secara dinamis. Plugin itu diberi nama jQuery timeago. Untuk penggunaannya sama seperti plugin jQuery lainnya. Atau anda bisa liat di situs resminya. Saya merasa cukuplah jika menggunakan itu, sampai akhirnya ada masalah yang saya dapatkan. Setelah setahun saya membuat aplikasi itu saya melihat kejanggalan. Ternyata jika sudah bertahun-tahun tidak dikembalikan ke format tanggalyang diinginkan. Jadi jika seminggu tetap bernilai balik,"a week ago", sebulan, "a month ago" begitu pula dengan tahunan. Jelek sekali. Puter-puter otak, saya harus mengubah plugin. Tapi saya nggak punya cukup skill untuk buat plugin atau edit punya orang. Walhasil saya kembali mencoba-dan mencoba. Dan hasilnya,saya berhasil membuat Sintak (bukan plugin) untuk mengupdate waktu ala facebook. Ini dia script-nyah.

function timeago(){
$('.timeago').each(function(){
>var time = $(this).attr('title');
var mytime = parse(time).getTime();
var result = distance( mytime )
  var seconds = result / 1000;
  var minutes = seconds / 60;
  var hours = minutes / 60;
  var days = hours / 24;
  var years = days / 365;
   
  if( seconds <= 45){
   $(this).text( 'Baru Saja');
  }else if( seconds > 45 && minutes <= 2){
   $(this).text( 'Sekitar satu menit yang lalu.' );
  }else if( minutes > 2 && minutes <= 30){
   $(this).text( Math.round(minutes)+' menit yang lalu.' );
  }else if( minutes > 30 && minutes < 45){
   $(this).text( 'Sekitar setengah jam yang lalu.' );
  }else if( minutes >= 45 && hours < 1){
   $(this).text( Math.round(minutes) + ' menit yang lalu.' );
  }else if( hours > 1 && days < 1){
   $(this).text( Math.round(hours)+' jam yang lalu.' );
  }else if( days > 1 && days < 2){
   var jam = parse(time).getHours();
if(jam<=23 && (jam-12) > 0){
    jam = (jam-12) + ' petang';
}else{
    jam = jam + ' siang';
}
$(this).text( 'Kemarin, sekitar pukul ' + (jam) );
  }else{
return;
  }
   
 });
 setTimeout("timeago()", 60000);
}
 
function distance(id){
 var today = new Date();
 return today.getTime()-id;
}
 
function parse(time){
 var date = time.replace(/\.\d\d\d+/,"").replace(/-/,"/").replace(/-/,"/").replace(/T/," ")
.replace(/Z/," UTC").replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2");
 var datei = new Date(date);
 return datei;
}

Cara menggunakkannya tinggal buat tag abbr dengan. Tanggal pada title harus berformat ISO8601, Ini contohnya:

<abbrclass="timeago"title="2012-04-12T21:30:05+0800"> Thursday, 4 April 2012</abbr>

Oke. Sekian tulisan saya untuk Update waktu ala Facebook dengan jQuery Timeago.