plugins/LinkPreview/linkpreview.js

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