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');
12 if (!this.$content
|| !this.$content
.is(':visible')) {
19 // Close the media content and remove it from display
22 this.$content
.slideUp('fast', function () {
23 that
.$content
.remove();
27 // Open the media content within its wrapper
29 // Create the content div if we haven't already
31 this.$content
= $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> ' + _kiwi
.global
.i18n
.translate('client_views_mediamessage_close').fetch() + '</a><br /><div class="content"></div></div>');
32 this.$content
.find('.content').append(this.mediaTypes
[this.$el
.data('type')].apply(this, []) || _kiwi
.global
.i18n
.translate('client_views_mediamessage_notfound').fetch() + ' :(');
35 // Now show the content if not already
36 if (!this.$content
.is(':visible')) {
37 // Hide it first so the slideDown always plays
40 // Add the media content and slide it into view
41 this.$el
.append(this.$content
);
42 this.$content
.slideDown();
48 // Generate the media content for each recognised type
50 twitter: function () {
51 var tweet_id
= this.$el
.data('tweetid');
54 $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id
+ '&callback=?', function (data
) {
55 that
.$content
.find('.content').html(data
.html
);
58 return $('<div>' + _kiwi
.global
.i18n
.translate('client_views_mediamessage_load_tweet').fetch() + '...</div>');
63 return $('<a href="' + this.url
+ '" target="_blank"><img height="100" src="' + this.url
+ '" /></a>');
70 $.getJSON('http://api.imgur.com/oembed?url=' + this.url
, function (data
) {
71 var img_html
= '<a href="' + data
.url
+ '" target="_blank"><img height="100" src="' + data
.url
+ '" /></a>';
72 that
.$content
.find('.content').html(img_html
);
75 return $('<div>' + _kiwi
.global
.i18n
.translate('client_views_mediamessage_load_image').fetch() + '...</div>');
81 var matches
= (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url
);
83 $.getJSON('http://www.' + matches
[0] + '.json?jsonp=?', function (data
) {
84 console
.log('Loaded reddit data', data
);
85 var post
= data
[0].data
.children
[0].data
;
88 // Show a thumbnail if there is one
90 //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
92 // Hide the thumbnail if an over_18 image
94 thumb
= '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
95 thumb
+= '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
96 thumb
+= '<img src="' + post
.thumbnail
+ '" class="thumbnail" style="visibility:hidden;" />';
99 thumb
= '<img src="' + post
.thumbnail
+ '" class="thumbnail" />';
103 // Build the template string up
104 var tmpl
= '<div>' + thumb
+ '<b><%- title %></b><br />Posted by <%- author %>. ';
105 tmpl
+= '<i class="icon-arrow-up"></i> <%- ups %> <i class="icon-arrow-down"></i> <%- downs %><br />';
106 tmpl
+= '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';
108 that
.$content
.find('.content').html(_
.template(tmpl
, post
));
111 return $('<div>' + _kiwi
.global
.i18n
.translate('client_views_mediamessage_load_reddit').fetch() + '...</div>');
115 youtube: function () {
116 var ytid
= this.$el
.data('ytid');
118 var yt_html
= '<iframe width="480" height="270" src="https://www.youtube.com/embed/'+ ytid
+'?feature=oembed" frameborder="0" allowfullscreen=""></iframe>';
119 that
.$content
.find('.content').html(yt_html
);
127 matches
= (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(this.url
);
129 $.getJSON('https://gist.github.com/'+matches
[1]+'.json?callback=?' + (matches
[2] || ''), function (data
) {
130 $('body').append('<link rel="stylesheet" href="' + data
.stylesheet
+ '" type="text/css" />');
131 that
.$content
.find('.content').html(data
.div
);
134 return $('<div>' + _kiwi
.global
.i18n
.translate('client_views_mediamessage_load_gist').fetch() + '...</div>');
139 // Build the closed media HTML from a URL
140 buildHtml: function (url
) {
141 var html
= '', matches
;
144 if (url
.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
145 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>';
148 // Is this an imgur link not picked up by the images regex?
149 matches
= (/imgur\.com\/[^/]*(?!=\.[^!.]+($|\?))/ig
).exec(url
);
150 if (matches
&& !url
.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
151 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>';
155 matches
= (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url
);
157 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>';
161 matches
= (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url
);
163 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>';
167 matches
= (/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/gi).exec(url
);
169 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>';
173 matches
= (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(url
);
175 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>';