client/src/views/mediamessage.js

   1 _kiwi.view.MediaMessage = Backbone.View.extend({
   2     events: {
   3         'click .media_close': 'close'
   4     },
   5
   6     initialize: function () {
   7         // Get the URL from the data
   8         this.url = this.$el.data('url');
   9     },
  10
  11     toggle: function () {
  12         if (!this.$content || !this.$content.is(':visible')) {
  13             this.open();
  14         } else {
  15             this.close();
  16         }
  17     },
  18
  19     // Close the media content and remove it from display
  20     close: function () {
  21         var that = this;
  22         this.$content.slideUp('fast', function () {
  23             that.$content.remove();
  24         });
  25     },
  26
  27     // Open the media content within its wrapper
  28     open: function () {
  29         // Create the content div if we haven't already
  30         if (!this.$content) {
  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() + ' :(');
  33         }
  34
  35         // Now show the content if not already
  36         if (!this.$content.is(':visible')) {
  37             // Hide it first so the slideDown always plays
  38             this.$content.hide();
  39
  40             // Add the media content and slide it into view
  41             this.$el.append(this.$content);
  42             this.$content.slideDown();
  43         }
  44     },
  45
  46
  47
  48     // Generate the media content for each recognised type
  49     mediaTypes: {
  50         twitter: function () {
  51             var tweet_id = this.$el.data('tweetid');
  52             var that = this;
  53
  54             $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {
  55                 that.$content.find('.content').html(data.html);
  56             });
  57
  58             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_tweet').fetch() + '...</div>');
  59         },
  60
  61
  62         image: function () {
  63             return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
  64         },
  65
  66
  67         imgur: function () {
  68             var that = this;
  69
  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);
  73             });
  74
  75             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_image').fetch() + '...</div>');
  76         },
  77
  78
  79         reddit: function () {
  80             var that = this;
  81             var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);
  82
  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;
  86                 var thumb = '';
  87
  88                 // Show a thumbnail if there is one
  89                 if (post.thumbnail) {
  90                     //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
  91
  92                     // Hide the thumbnail if an over_18 image
  93                     if (post.over_18) {
  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;" />';
  97                         thumb += '</span>';
  98                     } else {
  99                         thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';
 100                     }
 101                 }
 102
 103                 // Build the template string up
 104                 var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. &nbsp;&nbsp; ';
 105                 tmpl += '<i class="icon-arrow-up"></i> <%- ups %> &nbsp;&nbsp; <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>';
 107
 108                 that.$content.find('.content').html(_.template(tmpl, post));
 109             });
 110
 111             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_reddit').fetch() + '...</div>');
 112         },
 113
 114
 115         youtube: function () {
 116             var ytid = this.$el.data('ytid');
 117             var that = this;
 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);
 120
 121             return $('');
 122         },
 123
 124
 125         gist: function () {
 126             var that = this,
 127                 matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(this.url);
 128
 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);
 132             });
 133
 134             return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_gist').fetch() + '...</div>');
 135         }
 136     }
 137     }, {
 138
 139     // Build the closed media HTML from a URL
 140     buildHtml: function (url) {
 141         var html = '', matches;
 142
 143         // Is it an image?
 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>';
 146         }
 147
 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>';
 152         }
 153
 154         // Is it a tweet?
 155         matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);
 156         if (matches) {
 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>';
 158         }
 159
 160         // Is reddit?
 161         matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);
 162         if (matches) {
 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>';
 164         }
 165
 166         // Is youtube?
 167         matches = (/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/gi).exec(url);
 168         if (matches) {
 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>';
 170         }
 171
 172         // Is a github gist?
 173         matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(url);
 174         if (matches) {
 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>';
 176         }
 177
 178         return html;
 179     }
 180 });