2009-09-24 06:07:20 +09:00
// add a notice encoded as JSON into the current timeline
//
// TODO: i18n
RealtimeUpdate = {
_userid : 0 ,
_replyurl : '' ,
_favorurl : '' ,
_deleteurl : '' ,
2009-10-19 00:10:49 +09:00
_updatecounter : 0 ,
2009-09-24 06:07:20 +09:00
init : function ( userid , replyurl , favorurl , deleteurl )
{
RealtimeUpdate . _userid = userid ;
RealtimeUpdate . _replyurl = replyurl ;
RealtimeUpdate . _favorurl = favorurl ;
RealtimeUpdate . _deleteurl = deleteurl ;
2009-09-27 23:06:39 +09:00
2009-10-19 00:10:49 +09:00
DT = document . title ;
2009-09-27 23:06:39 +09:00
$ ( window ) . blur ( function ( ) {
$ ( '#notices_primary .notice' ) . css ( {
'border-top-color' : $ ( '#notices_primary .notice:last' ) . css ( 'border-top-color' ) ,
'border-top-style' : 'dotted'
} ) ;
$ ( '#notices_primary .notice:first' ) . css ( {
'border-top-color' : '#AAAAAA' ,
'border-top-style' : 'solid'
} ) ;
2009-10-19 00:10:49 +09:00
RealtimeUpdate . _updatecounter = 0 ;
document . title = DT ;
2009-10-07 01:04:36 +09:00
return false ;
2009-09-27 23:06:39 +09:00
} ) ;
2009-09-24 06:07:20 +09:00
} ,
receive : function ( data )
{
2009-09-30 22:29:37 +09:00
setTimeout ( function ( ) {
id = data . id ;
// Don't add it if it already exists
if ( $ ( "#notice-" + id ) . length > 0 ) {
return ;
}
2009-10-19 00:10:49 +09:00
2009-09-30 22:29:37 +09:00
var noticeItem = RealtimeUpdate . makeNoticeItem ( data ) ;
$ ( "#notices_primary .notices" ) . prepend ( noticeItem ) ;
$ ( "#notices_primary .notice:first" ) . css ( { display : "none" } ) ;
$ ( "#notices_primary .notice:first" ) . fadeIn ( 1000 ) ;
NoticeReply ( ) ;
2009-10-19 00:10:49 +09:00
RealtimeUpdate . _updatecounter += 1 ;
document . title = '(' + RealtimeUpdate . _updatecounter + ') ' + DT ;
2009-09-30 22:29:37 +09:00
} , 500 ) ;
2009-09-24 06:07:20 +09:00
} ,
makeNoticeItem : function ( data )
{
user = data [ 'user' ] ;
html = data [ 'html' ] . replace ( /&/g , '&' ) . replace ( /</g , '<' ) . replace ( />/g , '>' ) . replace ( /"/g , '"' ) ;
source = data [ 'source' ] . replace ( /&/g , '&' ) . replace ( /</g , '<' ) . replace ( />/g , '>' ) . replace ( /"/g , '"' ) ;
ni = "<li class=\"hentry notice\" id=\"notice-" + data [ 'id' ] + "\">" +
"<div class=\"entry-title\">" +
"<span class=\"vcard author\">" +
"<a href=\"" + user [ 'profile_url' ] + "\" class=\"url\">" +
"<img src=\"" + user [ 'profile_image_url' ] + "\" class=\"avatar photo\" width=\"48\" height=\"48\" alt=\"" + user [ 'screen_name' ] + "\"/>" +
"<span class=\"nickname fn\">" + user [ 'screen_name' ] + "</span>" +
"</a>" +
"</span>" +
"<p class=\"entry-content\">" + html + "</p>" +
"</div>" +
"<div class=\"entry-content\">" +
"<a class=\"timestamp\" rel=\"bookmark\" href=\"" + data [ 'url' ] + "\" >" +
"<abbr class=\"published\" title=\"" + data [ 'created_at' ] + "\">a few seconds ago</abbr>" +
"</a> " +
"<span class=\"source\">" +
"from " +
2009-09-22 04:17:37 +09:00
"<span class=\"device\">" + source + "</span>" + // may have a link
2009-09-24 06:07:20 +09:00
"</span>" ;
if ( data [ 'in_reply_to_status_id' ] ) {
ni = ni + " <a class=\"response\" href=\"" + data [ 'in_reply_to_status_url' ] + "\">in context</a>" ;
}
2009-09-22 04:17:37 +09:00
2009-09-24 06:07:20 +09:00
ni = ni + "</div>" +
2009-09-22 04:17:37 +09:00
"<div class=\"notice-options\">" ;
2009-09-24 06:07:20 +09:00
if ( RealtimeUpdate . _userid != 0 ) {
var input = $ ( "form#form_notice fieldset input#token" ) ;
var session _key = input . val ( ) ;
ni = ni + RealtimeUpdate . makeFavoriteForm ( data [ 'id' ] , session _key ) ;
ni = ni + RealtimeUpdate . makeReplyLink ( data [ 'id' ] , data [ 'user' ] [ 'screen_name' ] ) ;
if ( RealtimeUpdate . _userid == data [ 'user' ] [ 'id' ] ) {
2009-07-15 04:26:39 +09:00
ni = ni + RealtimeUpdate . makeDeleteLink ( data [ 'id' ] ) ;
2009-09-24 06:07:20 +09:00
}
}
2009-09-22 04:17:37 +09:00
2009-09-24 06:07:20 +09:00
ni = ni + "</div>" +
"</li>" ;
return ni ;
} ,
2009-09-22 04:17:37 +09:00
2009-09-24 06:07:20 +09:00
makeFavoriteForm : function ( id , session _key )
{
var ff ;
2009-09-22 04:17:37 +09:00
2009-09-24 06:07:20 +09:00
ff = "<form id=\"favor-" + id + "\" class=\"form_favor\" method=\"post\" action=\"" + RealtimeUpdate . _favorurl + "\">" +
2009-09-22 04:17:37 +09:00
"<fieldset>" +
2009-09-24 06:07:20 +09:00
"<legend>Favor this notice</legend>" +
"<input name=\"token-" + id + "\" type=\"hidden\" id=\"token-" + id + "\" value=\"" + session _key + "\"/>" +
"<input name=\"notice\" type=\"hidden\" id=\"notice-n" + id + "\" value=\"" + id + "\"/>" +
"<input type=\"submit\" id=\"favor-submit-" + id + "\" name=\"favor-submit-" + id + "\" class=\"submit\" value=\"Favor\" title=\"Favor this notice\"/>" +
2009-09-22 04:17:37 +09:00
"</fieldset>" +
2009-09-24 06:07:20 +09:00
"</form>" ;
return ff ;
} ,
makeReplyLink : function ( id , nickname )
{
var rl ;
rl = "<a class=\"notice_reply\" href=\"" + RealtimeUpdate . _replyurl + "?replyto=" + nickname + "\" title=\"Reply to this notice\">Reply <span class=\"notice_id\">" + id + "</span></a>" ;
return rl ;
2009-09-22 04:17:37 +09:00
} ,
2009-09-24 06:07:20 +09:00
makeDeleteLink : function ( id )
{
var dl , delurl ;
delurl = RealtimeUpdate . _deleteurl . replace ( "0000000000" , id ) ;
2009-09-22 04:17:37 +09:00
2009-09-24 06:07:20 +09:00
dl = "<a class=\"notice_delete\" href=\"" + delurl + "\" title=\"Delete this notice\">Delete</a>" ;
2009-09-22 04:17:37 +09:00
2009-09-24 06:07:20 +09:00
return dl ;
2009-09-24 04:24:12 +09:00
} ,
2009-09-24 07:04:39 +09:00
addPopup : function ( url , timeline , iconurl )
2009-09-24 04:24:12 +09:00
{
2009-09-30 21:48:15 +09:00
$ ( '#notices_primary' ) . css ( { 'position' : 'relative' } ) ;
$ ( '#notices_primary' ) . prepend ( '<button id="realtime_timeline" title="Pop up in a window">Pop up</button>' ) ;
2009-09-27 20:49:18 +09:00
2009-09-24 06:58:35 +09:00
$ ( '#realtime_timeline' ) . css ( {
2009-09-30 21:48:15 +09:00
'margin' : '0 0 11px 0' ,
2009-09-27 05:25:47 +09:00
'background' : 'transparent url(' + iconurl + ') no-repeat 0% 30%' ,
'padding' : '0 0 0 20px' ,
2009-09-24 06:58:35 +09:00
'display' : 'block' ,
2009-09-30 21:48:15 +09:00
'position' : 'absolute' ,
'top' : '-20px' ,
'right' : '0' ,
2009-09-24 06:58:35 +09:00
'border' : 'none' ,
2009-09-27 05:25:47 +09:00
'cursor' : 'pointer' ,
'color' : $ ( "a" ) . css ( "color" ) ,
'font-weight' : 'bold' ,
'font-size' : '1em'
2009-09-24 06:58:35 +09:00
} ) ;
2009-09-27 20:49:18 +09:00
2009-09-24 06:58:35 +09:00
$ ( '#realtime_timeline' ) . click ( function ( ) {
window . open ( url ,
2009-09-24 07:04:39 +09:00
timeline ,
2009-09-24 06:58:35 +09:00
'toolbar=no,resizable=yes,scrollbars=yes,status=yes' ) ;
2009-09-27 20:49:18 +09:00
2009-09-24 06:58:35 +09:00
return false ;
} ) ;
2009-09-24 07:02:42 +09:00
} ,
initPopupWindow : function ( )
{
2009-09-27 21:21:49 +09:00
window . resizeTo ( 500 , 550 ) ;
2009-09-24 07:02:42 +09:00
$ ( 'address' ) . hide ( ) ;
2009-09-27 21:26:01 +09:00
$ ( '#content' ) . css ( { 'width' : '93.5%' } ) ;
2009-09-27 20:49:18 +09:00
$ ( '#form_notice' ) . css ( {
2009-09-27 21:22:56 +09:00
'margin' : '18px 0 18px 1.795%' ,
2009-09-27 21:43:40 +09:00
'width' : '93%' ,
'max-width' : '451px'
2009-09-27 20:49:18 +09:00
} ) ;
2009-09-27 21:15:37 +09:00
2009-09-27 21:38:40 +09:00
$ ( '#form_notice label[for=notice_data-text], h1' ) . css ( { 'display' : 'none' } ) ;
2009-09-27 21:15:37 +09:00
2009-09-27 23:06:39 +09:00
$ ( '.notices li:first-child' ) . css ( { 'border-top-color' : 'transparent' } ) ;
2009-09-27 21:40:35 +09:00
$ ( '#form_notice label[for="notice_data-attach"], #form_notice #notice_data-attach' ) . css ( { 'top' : '0' } ) ;
2009-09-27 21:59:01 +09:00
$ ( '#form_notice #notice_data-attach' ) . css ( {
'left' : 'auto' ,
'right' : '0'
} ) ;
2009-09-24 06:07:20 +09:00
}
}
2009-09-22 04:17:37 +09:00