gnu-social/plugins/LinkPreview/js/linkpreview.js

271 lines
9.3 KiB
JavaScript
Raw Normal View History

2010-11-17 05:41:35 +09:00
/**
* (c) 2010 StatusNet, Inc.
*/
(function() {
/**
* Quickie wrapper around ooembed JSON lookup
*/
var oEmbed = {
api: 'https://noembed.com/embed',
width: 100,
height: 75,
cache: {},
callbacks: {},
/**
* Do a cached oEmbed lookup for the given URL.
*
* @param {String} url
* @param {function} callback
*/
lookup: function(url, callback)
{
if (typeof oEmbed.cache[url] == "object") {
// We already have a successful lookup.
callback(oEmbed.cache[url]);
} else if (typeof oEmbed.callbacks[url] == "undefined") {
// No lookup yet... Start it!
oEmbed.callbacks[url] = [callback];
oEmbed.rawLookup(url, function(data) {
oEmbed.cache[url] = data;
var callbacks = oEmbed.callbacks[url];
oEmbed.callbacks[url] = undefined;
for (var i = 0; i < callbacks.length; i++) {
callbacks[i](data);
}
});
} else {
// A lookup is in progress.
oEmbed.callbacks[url].push(callback);
}
},
/**
* 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
*/
rawLookup: function(url, callback)
{
var params = {
url: url,
format: 'json',
maxwidth: oEmbed.width,
maxheight: oEmbed.height,
token: $('#token').val()
};
$.ajax({
url: oEmbed.api,
data: params,
dataType: 'json',
success: function(data, xhr) {
callback(data);
},
error: function(xhr, textStatus, errorThrown) {
callback(null);
}
});
}
};
SN.Init.LinkPreview = function(params) {
if (params.api) oEmbed.api = params.api;
if (params.width) oEmbed.width = params.width;
if (params.height) oEmbed.height = params.height;
}
// Piggyback on the counter update...
var origCounter = SN.U.Counter;
SN.U.Counter = function(form) {
var preview = form.data('LinkPreview');
if (preview) {
preview.previewLinks(form.find('.notice_data-text:first').val());
}
return origCounter(form);
}
// Customize notice form init...
var origSetup = SN.Init.NoticeFormSetup;
SN.Init.NoticeFormSetup = function(form) {
origSetup(form);
form
.bind('reset', function() {
LinkPreview.clear();
});
var LinkPreview = {
links: [],
state: [],
refresh: [],
/**
* Find URL links from the source text that may be interesting.
*
* @param {String} text
* @return {Array} list of URLs
*/
findLinks: function (text)
{
// @fixme match this to core code
var re = /(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/mg;
var links = [];
var matches;
while ((matches = re.exec(text)) !== null) {
links.push(matches[1]);
}
return links;
},
ensureArea: function() {
if (form.find('.link-preview').length < 1) {
form.append('<div class="notice-status link-preview thumbnails"></div>');
}
},
/**
* Start looking up info for a link preview...
* May start async data loads.
*
* @param {number} col: column number to insert preview into
*/
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 (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 && data.type == 'photo' && typeof data.url == "string") {
thumb = data.url;
if (typeof data.width !== "undefined") {
if (data.width < width) {
width = data.width;
}
}
}
if (thumb) {
LinkPreview.ensureArea();
var link = $('<span class="inline-attachment"><a><img/></a></span>');
link.find('a')
.attr('href', url)
.attr('target', '_blank')
.last()
.find('img')
.attr('src', thumb)
.attr('width', width)
.attr('title', data.title || data.url || url);
form.find('.' + id)
.empty()
.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);
}
});
},
/**
* Update the live preview section with links found in the given text.
* May start async data loads.
*
* @param {String} text: free-form input text
*/
previewLinks: function(text)
{
var i;
var old = LinkPreview.links;
var links = LinkPreview.findLinks(text);
LinkPreview.links = links;
// Check for existing common elements...
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!
LinkPreview.prepLinkPreview(i);
}
}
}
if (links.length > old.length) {
// Adding new entries, whee!
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 (i = links.length; i < old.length; i++) {
LinkPreview.clearLink(i);
}
}
if (links.length == 0) {
LinkPreview.clear();
}
},
addPreviewArea: function(col) {
LinkPreview.ensureArea();
var id = 'link-preview-' + col;
if (form.find('.' + id).length < 1) {
form.find('.link-preview').append('<span class="' + id + '"></span>');
}
},
clearLink: function(col) {
var id = 'link-preview-' + col;
form.find('.' + id).html('');
},
markLoading: function(col) {
LinkPreview.state[col] = "loading";
var id = 'link-preview-' + col;
form.find('.' + id).attr('style', 'opacity: 0.5');
},
markDone: function(col) {
LinkPreview.state[col] = "done";
var id = 'link-preview-' + col;
form.find('.' + id).removeAttr('style');
},
/**
* Clear out any link preview data.
*/
clear: function() {
LinkPreview.links = [];
form.find('.link-preview').remove();
}
};
form.data('LinkPreview', LinkPreview);
}
})();