Client: Reddit thread media

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 90c6cdd00150e6b5bbce97424777075f1f980312..a138328c44ba5465f59edfb07d8b0bba1938cf31 100644 (file)
--- 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 b14d90bbfdf2c2b25fcfd253615d789ea277a340..539f6df13c6b8949e4bcead496ce6ca6564a70d3 100644 (file)
--- 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\r
         if (!this.$content) {\r
             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>');\r
-            console.log(this.$el.data('type'), this.mediaTypes);\r
             this.$content.find('.content').append(this.mediaTypes[this.$el.data('type')].apply(this, []) || 'Not found :(');\r
         }\r
 \r
@@ -1245,7 +1244,7 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
             var that = this;\r
 \r
             $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {\r
-                that.$content.find('div').html(data.html);\r
+                that.$content.find('.content').html(data.html);\r
             });\r
 \r
             return $('<div>Loading tweet..</div>');\r
@@ -1254,6 +1253,42 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
 \r
         image: function () {\r
             return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');\r
+        },\r
+\r
+\r
+        reddit: function () {\r
+            var that = this;\r
+            var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);\r
+\r
+            $.getJSON('http://www.' + matches[0] + '.json?jsonp=?', function (data) {\r
+                console.log('Loaded reddit data', data);\r
+                var post = data[0].data.children[0].data;\r
+                var thumb = '';\r
+\r
+                // Show a thumbnail if there is one\r
+                if (post.thumbnail) {\r
+                    //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';\r
+\r
+                    // Hide the thumbnail if an over_18 image\r
+                    if (post.over_18) {\r
+                        thumb = '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';\r
+                        thumb += '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';\r
+                        thumb += '<img src="' + post.thumbnail + '" class="thumbnail" style="visibility:hidden;" />';\r
+                        thumb += '</span>';\r
+                    } else {\r
+                        thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';\r
+                    }\r
+                }\r
+\r
+                // Build the template string up\r
+                var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. &nbsp;&nbsp; ';\r
+                tmpl += '<i class="icon-arrow-up"></i> <%- ups %> &nbsp;&nbsp; <i class="icon-arrow-down"></i> <%- downs %><br />';\r
+                tmpl += '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';\r
+\r
+                that.$content.find('.content').html(_.template(tmpl, post));\r
+            });\r
+\r
+            return $('<div>Loading Reddit thread..</div>');\r
         }\r
     }\r
 \r
@@ -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>';\r
         }\r
 \r
+        // Is reddit?\r
+        matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);\r
+        if (matches) {\r
+            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>';\r
+        }\r
+\r
         return html;\r
     }\r
 });
\ No newline at end of file