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             };
  59             $.get(oEmbed.api, params, function(data, xhr) {
  60                 callback(data);
  61             }, 'json');
  62         }
  63     };
  64
  65     /**
  66      * Find URL links from the source text that may be interesting.
  67      *
  68      * @param {String} text
  69      * @return {Array} list of URLs
  70      */
  71     function findLinks(text)
  72     {
  73         // @fixme match this to core code
  74         var re = /(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/mg;
  75         var links = [];
  76         var matches;
  77         while ((matches = re.exec(text)) !== null) {
  78             links.push(matches[1]);
  79         }
  80         return links;
  81     }
  82
  83     /**
  84      * Start looking up info for a link preview...
  85      * May start async data loads.
  86      *
  87      * @param {String} id
  88      * @param {String} url
  89      */
  90     function prepLinkPreview(id, url)
  91     {
  92         oEmbed.lookup(url, function(data) {
  93             var thumb = null;
  94             var width = 100;
  95             if (typeof data.thumbnail_url == "string") {
  96                 thumb = data.thumbnail_url;
  97                 if (typeof data.thumbnail_width !== "undefined") {
  98                     if (data.thumbnail_width < width) {
  99                         width = data.thumbnail_width;
 100                     }
 101                 }
 102             } else if (data.type == 'photo' && typeof data.url == "string") {
 103                 thumb = data.url;
 104                 if (typeof data.width !== "undefined") {
 105                     if (data.width < width) {
 106                         width = data.width;
 107                     }
 108                 }
 109             }
 110             if (thumb) {
 111                 var link = $('<span class="inline-attachment"><a><img/></a></span>');
 112                 link.find('a')
 113                         .attr('href', url)
 114                         .attr('target', '_blank')
 115                         .last()
 116                     .find('img')
 117                         .attr('src', thumb)
 118                         .attr('width', width)
 119                         .attr('title', data.title || data.url || url);
 120                 $('#' + id).append(link);
 121             }
 122         });
 123     }
 124
 125     /**
 126      * Update the live preview section with links found in the given text.
 127      * May start async data loads.
 128      *
 129      * @param {String} text: free-form input text
 130      */
 131     function previewLinks(text)
 132     {
 133         var links = findLinks(text);
 134         $('#link-preview').html('');
 135         for (var i = 0; i < links.length; i++) {
 136             var id = 'link-preview-' + i;
 137             $('#link-preview').append('<span id="' + id + '"></span>');
 138             prepLinkPreview(id, links[i]);
 139         }
 140     }
 141
 142     SN.Init.LinkPreview = function(params) {
 143         if (params.api) oEmbed.api = params.api;
 144         if (params.width) oEmbed.width = params.width;
 145         if (params.height) oEmbed.height = params.height;
 146
 147         $('#form_notice').append('<div id="link-preview" class="thumbnails"></div>');
 148
 149         // Piggyback on the counter update...
 150         var origCounter = SN.U.Counter;
 151         SN.U.Counter = function(form) {
 152             previewLinks($('#notice_data-text').val());
 153             return origCounter(form);
 154         }
 155     }
 156 })();