plugins/LinkPreview/linkpreview.js

   1 /**
   2  * (c) 2010 StatusNet, Inc.
   3  */
   4
   5 (function() {
   6     var oEmbed = {
   7         api: 'http://oohembed.com/oohembed',
   8         width: 100,
   9         height: 75,
  10         cache: {},
  11         callbacks: {},
  12
  13         /**
  14          * Do a cached oEmbed lookup for the given URL.
  15          *
  16          * @param {String} url
  17          * @param {function} callback
  18          */
  19         lookup: function(url, callback)
  20         {
  21             if (typeof oEmbed.cache[url] == "object") {
  22                 // We already have a successful lookup.
  23                 callback(oEmbed.cache[url]);
  24             } else if (typeof oEmbed.callbacks[url] == "undefined") {
  25                 // No lookup yet... Start it!
  26                 oEmbed.callbacks[url] = [callback];
  27
  28                 oEmbed.rawLookup(url, function(data) {
  29                     oEmbed.cache[url] = data;
  30                     var callbacks = oEmbed.callbacks[url];
  31                     oEmbed.callbacks[url] = undefined;
  32                     for (var i = 0; i < callbacks.length; i++) {
  33                         callbacks[i](data);
  34                     }
  35                 });
  36             } else {
  37                 // A lookup is in progress.
  38                 oEmbed.callbacks[url].push(callback);
  39             }
  40         },
  41
  42         /**
  43          * Do an oEmbed lookup for the given URL.
  44          *
  45          * @fixme proxy through ourselves if possible?
  46          * @fixme use the global thumbnail size settings
  47          *
  48          * @param {String} url
  49          * @param {function} callback
  50          */
  51         rawLookup: function(url, callback)
  52         {
  53             var params = {
  54                 url: url,
  55                 format: 'json',
  56                 maxwidth: oEmbed.width,
  57                 maxheight: oEmbed.height,
  58                 token: $('#token').val()
  59             };
  60             $.get(oEmbed.api, params, function(data, xhr) {
  61                 callback(data);
  62             }, 'json');
  63         }
  64     };
  65
  66     var LinkPreview = {
  67         links: [],
  68
  69         /**
  70          * Find URL links from the source text that may be interesting.
  71          *
  72          * @param {String} text
  73          * @return {Array} list of URLs
  74          */
  75         findLinks: function (text)
  76         {
  77             // @fixme match this to core code
  78             var re = /(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/mg;
  79             var links = [];
  80             var matches;
  81             while ((matches = re.exec(text)) !== null) {
  82                 links.push(matches[1]);
  83             }
  84             return links;
  85         },
  86
  87         /**
  88          * Start looking up info for a link preview...
  89          * May start async data loads.
  90          *
  91          * @param {String} id
  92          * @param {String} url
  93          */
  94         prepLinkPreview: function(id, url)
  95         {
  96             oEmbed.lookup(url, function(data) {
  97                 var thumb = null;
  98                 var width = 100;
  99                 if (typeof data.thumbnail_url == "string") {
 100                     thumb = data.thumbnail_url;
 101                     if (typeof data.thumbnail_width !== "undefined") {
 102                         if (data.thumbnail_width < width) {
 103                             width = data.thumbnail_width;
 104                         }
 105                     }
 106                 } else if (data.type == 'photo' && typeof data.url == "string") {
 107                     thumb = data.url;
 108                     if (typeof data.width !== "undefined") {
 109                         if (data.width < width) {
 110                             width = data.width;
 111                         }
 112                     }
 113                 }
 114                 if (thumb) {
 115                     var link = $('<span class="inline-attachment"><a><img/></a></span>');
 116                     link.find('a')
 117                             .attr('href', url)
 118                             .attr('target', '_blank')
 119                             .last()
 120                         .find('img')
 121                             .attr('src', thumb)
 122                             .attr('width', width)
 123                             .attr('title', data.title || data.url || url);
 124                     $('#' + id).append(link);
 125                 }
 126             });
 127         },
 128
 129         /**
 130          * Update the live preview section with links found in the given text.
 131          * May start async data loads.
 132          *
 133          * @param {String} text: free-form input text
 134          */
 135         previewLinks: function(text)
 136         {
 137             var old = LinkPreview.links;
 138             var links = LinkPreview.findLinks(text);
 139
 140             // Check for existing common elements...
 141             for (var i = 0; i < old.length && i < links.length; i++) {
 142                 if (links[i] != old[i]) {
 143                     // Change an existing entry!
 144                     var id = 'link-preview-' + i;
 145                     $('#' + id).html('');
 146                     LinkPreview.prepLinkPreview(id, links[i]);
 147                 }
 148             }
 149             if (links.length > old.length) {
 150                 // Adding new entries, whee!
 151                 for (var i = old.length; i < links.length; i++) {
 152                     var id = 'link-preview-' + i;
 153                     $('#link-preview').append('<span id="' + id + '"></span>');
 154                     LinkPreview.prepLinkPreview(id, links[i]);
 155                 }
 156             } else if (old.length > links.length) {
 157                 // Remove preview entries for links that have been removed.
 158                 for (var i = links.length; i < old.length; i++) {
 159                     var id = 'link-preview-' + i;
 160                     $('#' + id).remove();
 161                 }
 162             }
 163
 164             LinkPreview.links = links;
 165         },
 166
 167         /**
 168          * Clear out any link preview data.
 169          */
 170         clear: function() {
 171             LinkPreview.links = [];
 172             $('#link-preview').empty();
 173         }
 174     };
 175
 176     SN.Init.LinkPreview = function(params) {
 177         if (params.api) oEmbed.api = params.api;
 178         if (params.width) oEmbed.width = params.width;
 179         if (params.height) oEmbed.height = params.height;
 180
 181         $('#form_notice')
 182             .append('<div id="link-preview" class="thumbnails"></div>')
 183             .bind('reset', function() {
 184                 LinkPreview.clear();
 185             });
 186
 187         // Piggyback on the counter update...
 188         var origCounter = SN.U.Counter;
 189         SN.U.Counter = function(form) {
 190             LinkPreview.previewLinks($('#notice_data-text').val());
 191             return origCounter(form);
 192         }
 193     }
 194 })();