1 _kiwi
.view
.MediaMessage
= Backbone
.View
.extend({
3 'click .media_close': 'close'
6 initialize: function () {
7 // Get the URL from the data
8 this.url
= this.$el
.data('url');
11 // Close the media content and remove it from display
14 this.$content
.slideUp('fast', function () {
15 that
.$content
.remove();
19 // Open the media content within its wrapper
21 // Create the content div if we haven't already
23 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>');
24 this.$content
.find('.content').append(this.mediaTypes
[this.$el
.data('type')].apply(this, []) || 'Not found :(');
27 // Now show the content if not already
28 if (!this.$content
.is(':visible')) {
29 // Hide it first so the slideDown always plays
32 // Add the media content and slide it into view
33 this.$el
.append(this.$content
);
34 this.$content
.slideDown();
40 // Generate the media content for each recognised type
42 twitter: function () {
43 var tweet_id
= this.$el
.data('tweetid');
46 $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id
+ '&callback=?', function (data
) {
47 that
.$content
.find('.content').html(data
.html
);
50 return $('<div>Loading tweet..</div>');
55 return $('<a href="' + this.url
+ '" target="_blank"><img height="100" src="' + this.url
+ '" /></a>');
61 var matches
= (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url
);
63 $.getJSON('http://www.' + matches
[0] + '.json?jsonp=?', function (data
) {
64 console
.log('Loaded reddit data', data
);
65 var post
= data
[0].data
.children
[0].data
;
68 // Show a thumbnail if there is one
70 //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
72 // Hide the thumbnail if an over_18 image
74 thumb
= '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
75 thumb
+= '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
76 thumb
+= '<img src="' + post
.thumbnail
+ '" class="thumbnail" style="visibility:hidden;" />';
79 thumb
= '<img src="' + post
.thumbnail
+ '" class="thumbnail" />';
83 // Build the template string up
84 var tmpl
= '<div>' + thumb
+ '<b><%- title %></b><br />Posted by <%- author %>. ';
85 tmpl
+= '<i class="icon-arrow-up"></i> <%- ups %> <i class="icon-arrow-down"></i> <%- downs %><br />';
86 tmpl
+= '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';
88 that
.$content
.find('.content').html(_
.template(tmpl
, post
));
91 return $('<div>Loading Reddit thread..</div>');
97 // Build the closed media HTML from a URL
98 buildHtml: function (url
) {
99 var html
= '', matches
;
102 if (url
.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
103 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>';
107 matches
= (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url
);
109 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>';
113 matches
= (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url
);
115 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>';