plugins/Realtime/realtimeupdate.js

   1 // add a notice encoded as JSON into the current timeline
   2 //
   3 // TODO: i18n
   4
   5 RealtimeUpdate = {
   6      _userid: 0,
   7      _replyurl: '',
   8      _favorurl: '',
   9      _deleteurl: '',
  10
  11      init: function(userid, replyurl, favorurl, deleteurl)
  12      {
  13         RealtimeUpdate._userid = userid;
  14         RealtimeUpdate._replyurl = replyurl;
  15         RealtimeUpdate._favorurl = favorurl;
  16         RealtimeUpdate._deleteurl = deleteurl;
  17
  18         $(window).blur(function() {
  19           $('#notices_primary .notice').css({
  20             'border-top-color':$('#notices_primary .notice:last').css('border-top-color'),
  21             'border-top-style':'dotted'
  22           });
  23
  24           $('#notices_primary .notice:first').css({
  25             'border-top-color':'#AAAAAA',
  26             'border-top-style':'solid'
  27           });
  28         });
  29      },
  30
  31      receive: function(data)
  32      {
  33           setTimeout(function() {
  34               id = data.id;
  35
  36               // Don't add it if it already exists
  37               if ($("#notice-"+id).length > 0) {
  38                    return;
  39               }
  40
  41               var noticeItem = RealtimeUpdate.makeNoticeItem(data);
  42               $("#notices_primary .notices").prepend(noticeItem);
  43               $("#notices_primary .notice:first").css({display:"none"});
  44               $("#notices_primary .notice:first").fadeIn(1000);
  45               NoticeReply();
  46           }, 500);
  47      },
  48
  49      makeNoticeItem: function(data)
  50      {
  51           user = data['user'];
  52           html = data['html'].replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"');
  53           source = data['source'].replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"');
  54
  55           ni = "<li class=\"hentry notice\" id=\"notice-"+data['id']+"\">"+
  56                "<div class=\"entry-title\">"+
  57                "<span class=\"vcard author\">"+
  58                "<a href=\""+user['profile_url']+"\" class=\"url\">"+
  59                "<img src=\""+user['profile_image_url']+"\" class=\"avatar photo\" width=\"48\" height=\"48\" alt=\""+user['screen_name']+"\"/>"+
  60                "<span class=\"nickname fn\">"+user['screen_name']+"</span>"+
  61                "</a>"+
  62                "</span>"+
  63                "<p class=\"entry-content\">"+html+"</p>"+
  64                "</div>"+
  65                "<div class=\"entry-content\">"+
  66                "<a class=\"timestamp\" rel=\"bookmark\" href=\""+data['url']+"\" >"+
  67                "<abbr class=\"published\" title=\""+data['created_at']+"\">a few seconds ago</abbr>"+
  68                "</a> "+
  69                "<span class=\"source\">"+
  70                "from "+
  71                 "<span class=\"device\">"+source+"</span>"+ // may have a link
  72                "</span>";
  73           if (data['in_reply_to_status_id']) {
  74                ni = ni+" <a class=\"response\" href=\""+data['in_reply_to_status_url']+"\">in context</a>";
  75           }
  76
  77           ni = ni+"</div>"+
  78             "<div class=\"notice-options\">";
  79
  80           if (RealtimeUpdate._userid != 0) {
  81                var input = $("form#form_notice fieldset input#token");
  82                var session_key = input.val();
  83                ni = ni+RealtimeUpdate.makeFavoriteForm(data['id'], session_key);
  84                ni = ni+RealtimeUpdate.makeReplyLink(data['id'], data['user']['screen_name']);
  85                if (RealtimeUpdate._userid == data['user']['id']) {
  86                     ni = ni+RealtimeUpdate.makeDeleteLink(data['id']);
  87                }
  88           }
  89
  90           ni = ni+"</div>"+
  91                "</li>";
  92           return ni;
  93      },
  94
  95      makeFavoriteForm: function(id, session_key)
  96      {
  97           var ff;
  98
  99           ff = "<form id=\"favor-"+id+"\" class=\"form_favor\" method=\"post\" action=\""+RealtimeUpdate._favorurl+"\">"+
 100                 "<fieldset>"+
 101                "<legend>Favor this notice</legend>"+
 102                "<input name=\"token-"+id+"\" type=\"hidden\" id=\"token-"+id+"\" value=\""+session_key+"\"/>"+
 103                "<input name=\"notice\" type=\"hidden\" id=\"notice-n"+id+"\" value=\""+id+"\"/>"+
 104                "<input type=\"submit\" id=\"favor-submit-"+id+"\" name=\"favor-submit-"+id+"\" class=\"submit\" value=\"Favor\" title=\"Favor this notice\"/>"+
 105                 "</fieldset>"+
 106                "</form>";
 107           return ff;
 108      },
 109
 110      makeReplyLink: function(id, nickname)
 111      {
 112           var rl;
 113           rl = "<a class=\"notice_reply\" href=\""+RealtimeUpdate._replyurl+"?replyto="+nickname+"\" title=\"Reply to this notice\">Reply <span class=\"notice_id\">"+id+"</span></a>";
 114           return rl;
 115         },
 116
 117      makeDeleteLink: function(id)
 118      {
 119           var dl, delurl;
 120           delurl = RealtimeUpdate._deleteurl.replace("0000000000", id);
 121
 122           dl = "<a class=\"notice_delete\" href=\""+delurl+"\" title=\"Delete this notice\">Delete</a>";
 123
 124           return dl;
 125      },
 126
 127      addPopup: function(url, timeline, iconurl)
 128      {
 129          $('#notices_primary').css({'position':'relative'});
 130          $('#notices_primary').prepend('<button id="realtime_timeline" title="Pop up in a window">Pop up</button>');
 131
 132          $('#realtime_timeline').css({
 133              'margin':'0 0 11px 0',
 134              'background':'transparent url('+ iconurl + ') no-repeat 0% 30%',
 135              'padding':'0 0 0 20px',
 136              'display':'block',
 137              'position':'absolute',
 138              'top':'-20px',
 139              'right':'0',
 140              'border':'none',
 141              'cursor':'pointer',
 142              'color':$("a").css("color"),
 143              'font-weight':'bold',
 144              'font-size':'1em'
 145          });
 146
 147          $('#realtime_timeline').click(function() {
 148              window.open(url,
 149                          timeline,
 150                          'toolbar=no,resizable=yes,scrollbars=yes,status=yes');
 151
 152              return false;
 153          });
 154      },
 155
 156      initPopupWindow: function()
 157      {
 158          window.resizeTo(500, 550);
 159          $('address').hide();
 160          $('#content').css({'width':'93.5%'});
 161
 162          $('#form_notice').css({
 163             'margin':'18px 0 18px 1.795%',
 164             'width':'93%',
 165             'max-width':'451px'
 166          });
 167
 168          $('#form_notice label[for=notice_data-text], h1').css({'display': 'none'});
 169
 170          $('.notices li:first-child').css({'border-top-color':'transparent'});
 171
 172          $('#form_notice label[for="notice_data-attach"], #form_notice #notice_data-attach').css({'top':'0'});
 173
 174          $('#form_notice #notice_data-attach').css({
 175             'left':'auto',
 176             'right':'0'
 177          });
 178      }
 179 }
 180