From: Darren <darren@darrenwhitlen.com>
Date: Sat, 24 Nov 2012 01:42:41 +0000 (+0000)
Subject: Client: Reddit thread media
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=b9149cd0fb2d0362b58320341f6db653f5feff03;p=KiwiIRC.git

Client: Reddit thread media
---

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 90c6cdd..a138328 100644
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -343,8 +343,34 @@ html, body { height:100%; }
 
 #kiwi.theme_relaxed .messages .msg .media { margin-left:0.5em; }
 #kiwi.theme_relaxed .messages .msg .media .media_close { font-size:0.9em; }
-#kiwi.theme_relaxed .messages .msg .media .media_content { margin:10px 0 0 10px; }
+#kiwi.theme_relaxed .messages .msg .media .media_content { margin:10px 0 0 10px; overflow:hidden; }
 #kiwi.theme_relaxed .messages .msg .media .media_content img { padding:3px; border:1px solid gray; }
+#kiwi.theme_relaxed .messages .msg .media .media_content > .content {
+    background: white;
+    overflow: hidden;
+    padding: 10px;
+    border: #DDD 1px solid;
+    border-top-color: #EEE;
+    border-bottom-color: #BBB;
+    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    float: left;
+}
+
+#kiwi.theme_relaxed .messages .msg .media.twitter .media_content > .content {
+    background: transparent;
+    border:none;
+    overflow: hidden;
+    box-shadow: none;
+    padding: 0;
+}
+#kiwi.theme_relaxed .messages .msg .media.reddit .thumbnail_nsfw {
+    display: inline-block;
+    float: left;
+}
+#kiwi.theme_relaxed .messages .msg .media.reddit .thumbnail { float:left; margin-right: 0.5em; }
 
 
 #kiwi.theme_relaxed #memberlists {
diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index b14d90b..539f6df 100644
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -1221,7 +1221,6 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
         // Create the content div if we haven't already
         if (!this.$content) {
             this.$content = $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> Close media</a><br /><div class="content"></div></div>');
-            console.log(this.$el.data('type'), this.mediaTypes);
             this.$content.find('.content').append(this.mediaTypes[this.$el.data('type')].apply(this, []) || 'Not found :(');
         }
 
@@ -1245,7 +1244,7 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
             var that = this;
 
             $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {
-                that.$content.find('div').html(data.html);
+                that.$content.find('.content').html(data.html);
             });
 
             return $('<div>Loading tweet..</div>');
@@ -1254,6 +1253,42 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
 
         image: function () {
             return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
+        },
+
+
+        reddit: function () {
+            var that = this;
+            var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);
+
+            $.getJSON('http://www.' + matches[0] + '.json?jsonp=?', function (data) {
+                console.log('Loaded reddit data', data);
+                var post = data[0].data.children[0].data;
+                var thumb = '';
+
+                // Show a thumbnail if there is one
+                if (post.thumbnail) {
+                    //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
+
+                    // Hide the thumbnail if an over_18 image
+                    if (post.over_18) {
+                        thumb = '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
+                        thumb += '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
+                        thumb += '<img src="' + post.thumbnail + '" class="thumbnail" style="visibility:hidden;" />';
+                        thumb += '</span>';
+                    } else {
+                        thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';
+                    }
+                }
+
+                // Build the template string up
+                var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. &nbsp;&nbsp; ';
+                tmpl += '<i class="icon-arrow-up"></i> <%- ups %> &nbsp;&nbsp; <i class="icon-arrow-down"></i> <%- downs %><br />';
+                tmpl += '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';
+
+                that.$content.find('.content').html(_.template(tmpl, post));
+            });
+
+            return $('<div>Loading Reddit thread..</div>');
         }
     }
 
@@ -1274,6 +1309,12 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
             html += '<span class="media twitter" data-type="twitter" data-url="' + url + '" data-tweetid="' + matches[2] + '" title="Show tweet information"><a class="open"><i class="icon-chevron-right"></i></a></span>';
         }
 
+        // Is reddit?
+        matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);
+        if (matches) {
+            html += '<span class="media reddit" data-type="reddit" data-url="' + url + '" title="Reddit thread"><a class="open"><i class="icon-chevron-right"></i></a></span>';
+        }
+
         return html;
     }
 });
\ No newline at end of file