nicer timestamps

mattb · Jul 22, 2011 · 36a0df8 · 36a0df8
1 parent 65dfe84
commit 36a0df8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/othereplies/othereplies.rb b/othereplies/othereplies.rb
@@ -31,6 +31,7 @@ def deliver_tweet(user, tweet)
       :profileTextColor => tweet.user.profile_text_color,
       :profileLinkColor => tweet.user.profile_link_color,
       :timeStamp => tweet.created_at,
+      :timeStamp_i => Time.parse(tweet.created_at).to_i,
       :utcOffset => tweet.user.utc_offset
   }
   Juggernaut.publish("/tweets/#{user.token}", template_data.to_json)

diff --git a/othereplies/views/twitter.erb b/othereplies/views/twitter.erb
@@ -8,20 +8,47 @@
     <script type="text/javascript">
       var tweet_template = "<div class='bbpBox{{id}}' style='display:none'>";
       tweet_template += "<style type='text/css'>.bbpBox{{id}} {background-image:{{{profileBackgroundImage}}}; background-color: \#{{{profileBackgroundColor}}};padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style>";
-      tweet_template += "<p class='bbpTweet'>{{{tweetText}}}<span class='timestamp'><a title='{{timeStamp}}' href='{{{tweetURL}}}'>{{{timeStamp}}}</a> via {{{source}}} <a href='http://twitter.com/intent/favorite?tweet_id={{id}}'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id={{id}}'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to={{id}}'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/{{screenName}}'><img src='{{profilePic}}' /></a><strong><a href='http://twitter.com/{{screenName}}'>{{realName}}</a></strong><br/>{{screenName}}</span></span></p></div>";
+      tweet_template += "<p class='bbpTweet'>{{{tweetText}}}<span class='timestamp'><a title='{{timeStamp}}' href='{{{tweetURL}}}' class='timestampText' data-timestamp='{{{timeStamp_i}}}'>{{{timeStamp}}}</a> via {{{source}}} <a href='http://twitter.com/intent/favorite?tweet_id={{id}}'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id={{id}}'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to={{id}}'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/{{screenName}}'><img src='{{profilePic}}' /></a><strong><a href='http://twitter.com/{{screenName}}'>{{realName}}</a></strong><br/>{{screenName}}</span></span></p></div>";
+      function prettyDate(date) { // thanks to http://ejohn.org/files/pretty.js
+        var diff = (((new Date()).getTime() - date.getTime()) / 1000),
+            day_diff = Math.floor(diff / 86400);
+
+        if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
+          return;
+
+        return day_diff == 0 && (
+            diff < 60 && "just now" ||
+            diff < 120 && "1 minute ago" ||
+            diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
+            diff < 7200 && "1 hour ago" ||
+            diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
+          day_diff == 1 && "Yesterday" ||
+          day_diff < 7 && day_diff + " days ago" ||
+          day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
+      }
+      function update_timestamps() {
+        $('.timestampText').each(function(idx, elt) {
+            var d = new Date();
+            var ts = $(elt).attr('data-timestamp');
+            d.setTime(parseInt(ts) * 1000);
+            $(elt).html(prettyDate(d));
+          });
+      }
       $(function() {
           var jug = new Juggernaut({ port: <%= @juggernaut_port %>});
-          var n = 0;
-          jug.subscribe("/tweets/<%= @token %>", function(data){
 
+          jug.subscribe("/tweets/<%= @token %>", function(data){
             $($.mustache(tweet_template, $.parseJSON(data))).prependTo($('body')).show(200);
+            update_timestamps();
             $.each($(".tweet"), function(idx, elt) {
               if(idx > 50) {
                 $(elt).remove();
               }
             });
-            n++;
           });
+
+          setInterval(update_timestamps, 60*1000);
+
           setTimeout(function() {
             $('#intro').hide(750);
           },10000);