Ticket #2921: cleanup on LinkPreview to make fewer requests while typing. Will now wait for each link's preview request to complete (successfully or unsuccessfully) before re-running it)

plugins/LinkPreview/linkpreview.js

@@ -3,6 +3,9 @@
  */
 
 (function() {
+    /**
+     * Quickie wrapper around ooembed JSON lookup
+     */
     var oEmbed = {
         api: 'http://oohembed.com/oohembed',
         width: 100,
@@ -57,14 +60,24 @@
                 maxheight: oEmbed.height,
                 token: $('#token').val()
             };
-            $.get(oEmbed.api, params, function(data, xhr) {
+            $.ajax({
+                url: oEmbed.api,
+                data: params,
+                dataType: 'json',
+                success: function(data, xhr) {
                     callback(data);
-            }, 'json');
+                },
+                error: function(xhr, textStatus, errorThrown) {
+                    callback(null);
+                }
+            });
         }
     };
 
     var LinkPreview = {
         links: [],
+        state: [],
+        refresh: [],
 
         /**
          * Find URL links from the source text that may be interesting.
@@ -88,22 +101,26 @@
          * Start looking up info for a link preview...
          * May start async data loads.
          *
-         * @param {String} id
+         * @param {number} col: column number to insert preview into
-         * @param {String} url
          */
-        prepLinkPreview: function(id, url)
+        prepLinkPreview: function(col)
         {
+            var id = 'link-preview-' + col;
+            var url = LinkPreview.links[col];
+            LinkPreview.refresh[col] = false;
+            LinkPreview.markLoading(col);
+
             oEmbed.lookup(url, function(data) {
                 var thumb = null;
                 var width = 100;
-                if (typeof data.thumbnail_url == "string") {
+                if (data && 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") {
+                } else if (data && data.type == 'photo' && typeof data.url == "string") {
                     thumb = data.url;
                     if (typeof data.width !== "undefined") {
                         if (data.width < width) {
@@ -111,6 +128,7 @@
                         }
                     }
                 }
+
                 if (thumb) {
                     var link = $('<span class="inline-attachment"><a><img/></a></span>');
                     link.find('a')
@@ -121,7 +139,19 @@
                             .attr('src', thumb)
                             .attr('width', width)
                             .attr('title', data.title || data.url || url);
+                    $('#' + id).empty();
                     $('#' + id).append(link);
+                } else {
+                    // No thumbnail available or error retriving it.
+                    LinkPreview.clearLink(col);
+                }
+
+                if (LinkPreview.refresh[col]) {
+                    // Darn user has typed more characters.
+                    // Go fetch another link!
+                    LinkPreview.prepLinkPreview(col);
+                } else {
+                    LinkPreview.markDone(col);
                 }
             });
         },
@@ -134,34 +164,57 @@
          */
         previewLinks: function(text)
         {
+            var i;
             var old = LinkPreview.links;
             var links = LinkPreview.findLinks(text);
+            LinkPreview.links = links;
 
             // Check for existing common elements...
-            for (var i = 0; i < old.length && i < links.length; i++) {
+            for (i = 0; i < old.length && i < links.length; i++) {
                 if (links[i] != old[i]) {
+                    if (LinkPreview.state[i] == "loading") {
+                        // Slate this column for a refresh when this one's done.
+                        LinkPreview.refresh[i] = true;
+                    } else {
                         // Change an existing entry!
-                    var id = 'link-preview-' + i;
+                        LinkPreview.prepLinkPreview(i);
-                    $('#' + id).html('');
+                    }
-                    LinkPreview.prepLinkPreview(id, links[i]);
                 }
             }
             if (links.length > old.length) {
                 // Adding new entries, whee!
-                for (var i = old.length; i < links.length; i++) {
+                for (i = old.length; i < links.length; i++) {
-                    var id = 'link-preview-' + i;
+                    LinkPreview.addPreviewArea(i);
-                    $('#link-preview').append('<span id="' + id + '"></span>');
+                    LinkPreview.prepLinkPreview(i);
-                    LinkPreview.prepLinkPreview(id, links[i]);
                 }
             } else if (old.length > links.length) {
                 // Remove preview entries for links that have been removed.
-                for (var i = links.length; i < old.length; i++) {
+                for (i = links.length; i < old.length; i++) {
-                    var id = 'link-preview-' + i;
+                    LinkPreview.clearLink(i);
-                    $('#' + id).remove();
                 }
             }
+        },
 
-            LinkPreview.links = links;
+        addPreviewArea: function(col) {
+            var id = 'link-preview-' + col;
+            $('#link-preview').append('<span id="' + id + '"></span>');
+        },
+
+        clearLink: function(col) {
+            var id = 'link-preview-' + col;
+            $('#' + id).html('');
+        },
+
+        markLoading: function(col) {
+            LinkPreview.state[col] = "loading";
+            var id = 'link-preview-' + col;
+            $('#' + id).attr('style', 'opacity: 0.5');
+        },
+
+        markDone: function(col) {
+            LinkPreview.state[col] = "done";
+            var id = 'link-preview-' + col;
+            $('#' + id).removeAttr('style');
         },
 
         /**