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>');
62 $.getJSON('http://api.imgur.com/oembed?url=' + this.url
, function (data
) {
63 var img_html
= '<a href="' + data
.url
+ '" target="_blank"><img height="100" src="' + data
.url
+ '" /></a>';
64 that
.$content
.find('.content').html(img_html
);
67 return $('<div>Loading image..</div>');
73 var matches
= (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url
);
75 $.getJSON('http://www.' + matches
[0] + '.json?jsonp=?', function (data
) {
76 console
.log('Loaded reddit data', data
);
77 var post
= data
[0].data
.children
[0].data
;
80 // Show a thumbnail if there is one
82 //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
84 // Hide the thumbnail if an over_18 image
86 thumb
= '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
87 thumb
+= '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
88 thumb
+= '<img src="' + post
.thumbnail
+ '" class="thumbnail" style="visibility:hidden;" />';
91 thumb
= '<img src="' + post
.thumbnail
+ '" class="thumbnail" />';
95 // Build the template string up
96 var tmpl
= '<div>' + thumb
+ '<b><%- title %></b><br />Posted by <%- author %>. ';
97 tmpl
+= '<i class="icon-arrow-up"></i> <%- ups %> <i class="icon-arrow-down"></i> <%- downs %><br />';
98 tmpl
+= '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';
100 that
.$content
.find('.content').html(_
.template(tmpl
, post
));
103 return $('<div>Loading Reddit thread..</div>');
107 youtube: function () {
108 var ytid
= this.$el
.data('ytid');
110 var yt_html
= '<iframe width="480" height="270" src="https://www.youtube.com/embed/'+ ytid
+'?feature=oembed" frameborder="0" allowfullscreen=""></iframe>';
111 that
.$content
.find('.content').html(yt_html
);
119 matches
= (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(this.url
);
121 $.getJSON('https://gist.github.com/'+matches
[1]+'.json?callback=?' + (matches
[2] || ''), function (data
) {
122 $('body').append('<link rel="stylesheet" href="' + data
.stylesheet
+ '" type="text/css" />');
123 that
.$content
.find('.content').html(data
.div
);
126 return $('<div>Loading gist..</div>');
131 // Build the closed media HTML from a URL
132 buildHtml: function (url
) {
133 var html
= '', matches
;
136 if (url
.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
137 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>';
140 // Is this an imgur link not picked up by the images regex?
141 matches
= (/imgur\.com\/[^/]*(?!=\.[^!.]+($|\?))/ig
).exec(url
);
142 if (matches
&& !url
.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
143 html
+= '<span class="media imgur" data-type="imgur" data-url="' + url
+ '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';
147 matches
= (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url
);
149 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>';
153 matches
= (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url
);
155 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>';
159 matches
= (/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/gi).exec(url
);
161 html
+= '<span class="media youtube" data-type="youtube" data-url="' + url
+ '" data-ytid="' + matches
[1] + '" title="YouTube Video"><a class="open"><i class="icon-chevron-right"></i></a></span>';
165 matches
= (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(url
);
167 html
+= '<span class="media gist" data-type="gist" data-url="' + url
+ '" data-gist_id="' + matches
[1] + '" title="GitHub Gist"><a class="open"><i class="icon-chevron-right"></i></a></span>';