Client: Inline media refactor + twitter type

diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index fbccdd5dcc8915ff8c6e006f6bcd19da2ff43c2c..b14d90bbfdf2c2b25fcfd253615d789ea277a340 100644 (file)
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -1220,8 +1220,9 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
     open: function () {\r
         // 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>');\r
-            this.$content.append('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');\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
         // Now show the content if not already\r
@@ -1233,20 +1234,46 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
             this.$el.append(this.$content);\r
             this.$content.slideDown();\r
         }\r
+    },\r
+\r
+\r
+\r
+    // Generate the media content for each recognised type\r
+    mediaTypes: {\r
+        twitter: function () {\r
+            var tweet_id = this.$el.data('tweetid');\r
+            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
+            });\r
+\r
+            return $('<div>Loading tweet..</div>');\r
+        },\r
+\r
+\r
+        image: function () {\r
+            return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');\r
+        }\r
     }\r
 \r
 }, {\r
 \r
     // Build the closed media HTML from a URL\r
     buildHtml: function (url) {\r
-        var html = '';\r
+        var html = '', matches;\r
 \r
         // Is it an image?\r
         if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {\r
-            html += '<span class="media" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';\r
+            html += '<span class="media image" data-type="image" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';\r
+        }\r
+\r
+        // Is it a tweet?\r
+        matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);\r
+        if (matches) {\r
+            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
         return html;\r
     }\r
-}\r
-);
\ No newline at end of file
+});
\ No newline at end of file