client/assets/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     // Close the media content and remove it from display
  12     close: function () {
  13         var that = this;
  14         this.$content.slideUp('fast', function () {
  15             that.$content.remove();
  16         });
  17     },
  18
  19     // Open the media content within its wrapper
  20     open: function () {
  21         // Create the content div if we haven't already
  22         if (!this.$content) {
  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 :(');
  25         }
  26
  27         // Now show the content if not already
  28         if (!this.$content.is(':visible')) {
  29             // Hide it first so the slideDown always plays
  30             this.$content.hide();
  31
  32             // Add the media content and slide it into view
  33             this.$el.append(this.$content);
  34             this.$content.slideDown();
  35         }
  36     },
  37
  38
  39
  40     // Generate the media content for each recognised type
  41     mediaTypes: {
  42         twitter: function () {
  43             var tweet_id = this.$el.data('tweetid');
  44             var that = this;
  45
  46             $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {
  47                 that.$content.find('.content').html(data.html);
  48             });
  49
  50             return $('<div>Loading tweet..</div>');
  51         },
  52
  53
  54         image: function () {
  55             return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
  56         },
  57
  58
  59         reddit: function () {
  60             var that = this;
  61             var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);
  62
  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;
  66                 var thumb = '';
  67
  68                 // Show a thumbnail if there is one
  69                 if (post.thumbnail) {
  70                     //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
  71
  72                     // Hide the thumbnail if an over_18 image
  73                     if (post.over_18) {
  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;" />';
  77                         thumb += '</span>';
  78                     } else {
  79                         thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';
  80                     }
  81                 }
  82
  83                 // Build the template string up
  84                 var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. &nbsp;&nbsp; ';
  85                 tmpl += '<i class="icon-arrow-up"></i> <%- ups %> &nbsp;&nbsp; <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>';
  87
  88                 that.$content.find('.content').html(_.template(tmpl, post));
  89             });
  90
  91             return $('<div>Loading Reddit thread..</div>');
  92         }
  93     }
  94
  95 }, {
  96
  97     // Build the closed media HTML from a URL
  98     buildHtml: function (url) {
  99         var html = '', matches;
 100
 101         // Is it an image?
 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>';
 104         }
 105
 106         // Is it a tweet?
 107         matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);
 108         if (matches) {
 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>';
 110         }
 111
 112         // Is reddit?
 113         matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);
 114         if (matches) {
 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>';
 116         }
 117
 118         return html;
 119     }
 120 });