diff --git a/plugins/LinkPreview/linkpreview.js b/plugins/LinkPreview/linkpreview.js index 0c0eb734ec..407934c5ae 100644 --- a/plugins/LinkPreview/linkpreview.js +++ b/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) { - callback(data); - }, 'json'); + $.ajax({ + url: oEmbed.api, + data: params, + dataType: 'json', + success: function(data, xhr) { + callback(data); + }, + 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 {String} url + * @param {number} col: column number to insert preview into */ - 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 = $(''); 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]) { - // Change an existing entry! - var id = 'link-preview-' + i; - $('#' + id).html(''); - LinkPreview.prepLinkPreview(id, links[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! + LinkPreview.prepLinkPreview(i); + } } } if (links.length > old.length) { // Adding new entries, whee! - for (var i = old.length; i < links.length; i++) { - var id = 'link-preview-' + i; - $('#link-preview').append(''); - LinkPreview.prepLinkPreview(id, links[i]); + for (i = old.length; i < links.length; i++) { + LinkPreview.addPreviewArea(i); + LinkPreview.prepLinkPreview(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++) { - var id = 'link-preview-' + i; - $('#' + id).remove(); + for (i = links.length; i < old.length; i++) { + LinkPreview.clearLink(i); } } + }, - LinkPreview.links = links; + addPreviewArea: function(col) { + var id = 'link-preview-' + col; + $('#link-preview').append(''); + }, + + 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'); }, /**