LinkPreview plugin more or less functioning (though not pretty), using oohembed remote lookup and fixed sizes.

1 files changed, 54 insertions, 3 deletions

diff --git a/plugins/LinkPreview/linkpreview.js b/plugins/LinkPreview/linkpreview.js
index f6a4dc34f..eae6dfd43 100644
--- a/plugins/LinkPreview/linkpreview.js
+++ b/plugins/LinkPreview/linkpreview.js
@@ -12,7 +12,7 @@ $(function() {
     function findLinks(text)
     {
         // @fixme match this to core code
-        var re = /(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/g;
+        var re = /(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/mg;
         var links = [];
         var matches;
         while ((matches = re.exec(text)) !== null) {
@@ -22,6 +22,30 @@ $(function() {
     }
 
     /**
+     * Do an oEmbed lookup for the given URL.
+     *
+     * @fixme proxy through ourselves if possible?
+     * @fixme use the global thumbnail size settings
+     *
+     * @param {String} url
+     * @param {function} callback
+     */
+    function oEmbedLookup(url, callback)
+    {
+        var api = 'http://oohembed.com/oohembed';
+        var params = {
+            url: url,
+            format: 'json',
+            maxwidth: 100,
+            maxheight: 75,
+            callback: '?'
+        };
+        $.get(api, params, function(data, xhr) {
+            callback(data);
+        }, 'jsonp');
+    }
+
+    /**
      * Start looking up info for a link preview...
      * May start async data loads.
      *
@@ -30,7 +54,32 @@ $(function() {
      */
     function prepLinkPreview(id, url)
     {
-        console.log(id, url);
+        oEmbedLookup(url, function(data) {
+            var thumb = null;
+            var width = 100;
+            if (typeof data.thumbnail_url == "string") {
+                thumb = data.thumbnail_url;
+                if (typeof data.thumbnail_width !== "undefined") {
+                    if (data.thumbnail_width < width) {
+                        width = data.thumbnail_width;
+                    }
+                }
+            } else if (data.type == 'photo' && typeof data.url == "string") {
+                thumb = data.url;
+                if (typeof data.width !== "undefined") {
+                    if (data.width < width) {
+                        width = data.width;
+                    }
+                }
+            }
+            if (thumb) {
+                var img = $('<img/>')
+                    .attr('src', thumb)
+                    .attr('width', width)
+                    .attr('title', data.title || data.url || url);
+                $('#' + id).append(img);
+            }
+        });
     }
 
     /**
@@ -42,12 +91,14 @@ $(function() {
     function previewLinks(text)
     {
         var links = findLinks(text);
+        $('#link-preview').html('');
         for (var i = 0; i < links.length; i++) {
             var id = 'link-preview-' + i;
+            $('#link-preview').append('<span id="' + id + '"></span>');
             prepLinkPreview(id, links[i]);
         }
     }
-
+    $('#form_notice').append('<div id="link-preview"></div>');
     $('#notice_data-text').change(function() {
        var text = $(this).val();
        previewLinks(text);