Juitter prettyDate

Juitter ist ein Twitter Widget basierend auf jQuery. Damit kann man Twitter nach gewissen Keywords durchsuchen und die Anzeige als Widget mit wenig Code auf seiner Seite einbinden. Das alles ist rein clientseitig, was es noch einfacher macht.

Das geht so:
Juitter (1.0) runterladen, in sein Projekt kopieren.

Javascript einbinden:

<script language="javascript" src="/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script language="javascript" src="/app/js/jquery.juitter.js" type="text/javascript"></script>
<script language="javascript" src="/app/js/system.js" type="text/javascript"></script>

Container in die Seite einbinden:

<div id="juitterContainer"></div>

CSS einfügen:

#juitterContainer { overflow: auto; padding: 2px; font-size: 12px; height: 650px; width: 419px; border: 1px solid silver }
/*JUITTER PLUGIN CSS*/
#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */
/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */
/* Bellow the CSS for the avatar image */
#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}
#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/
#juitterContainer .extLink{} /*CSS for the external links*/
#juitterContainer .hashLink{} /*CSS for the hash links
*/ /*end of Juitter CSS*/

und fertig!

Die Konfiguration geht in der system.js.
Dort kann man die zu suchenden Keywords einstellen, die Update Intervalle und noch einiges mehr.

Was noch etwas verbesserungswürdig ist, ist die Datumsanzeige, hier nimmt Juitter ganz einfach das von Twitter übergebene RFC 2822 Datum und stellt es dar.

Das geht auch schöner!
Dazu hab ich das jQuery PrettyDate Plugin genommen und mit Juitter gebündelt.
Also Plugin noch einbinden:

<script language="javascript" src="/app/js/jquery.prettydate.js" type="text/javascript"></script>

Dann Juitter ein wenig aufgebohrt, so dass man nun in der system.js eine dateFormat option hat:

//set your Date Format:
//locale: uses JS toLocaleString
//pretty: uses prettyformat like so: 3 Days ago
//normal: RFC 2822 formatted date

dateFormat: "pretty"

Sprach Einstellungen für prettyDate sind auch möglich:

$.prettyDate.messages = {
now : "gerade eben",
minute : "vor einer Minute",
minutes : $.prettyDate.template("vor {0} Minuten"),
hour : "vor einer Stunde",
hours : $.prettyDate.template("vor {0} Stunden"),
yesterday : "Gestern", days : $.prettyDate.template("vor {0} Tagen"),
weeks : $.prettyDate.template("vor {0} Wochen")

}

Und schon ist es ein bißchen schicker!
Den Bundle gibts hier (juitter.dateimproved) zum download.
Alles weitgehend ungetested und ohne Gewähr.
Bleibt zu hoffen, dass es in die nächste Juitter Version integriert wird.