Construct plugin elements async. Fixes #660

This commit changes the plugins that uses angular.element to load
resources directly to instead return a function that runs
angular.element. When the browser runs angular.element('<img>') and gets
a src attr it will fetch the content in the src. This makes the
browser running gb automatically fetch all plugin content that gets
linked even if the user didn't request it.

Maybe we could change our plugin architecture to split the match
function and the generator functions so this could be solved more
elegantly.
This commit is contained in:
Tor Hveem 2015-10-19 14:51:14 +02:00
parent e979e19958
commit a02573a9c2

View file

@ -285,13 +285,16 @@ plugins.factory('userPlugins', function() {
// TODO strip an existing dl=0 parameter // TODO strip an existing dl=0 parameter
url = url + "?dl=1"; url = url + "?dl=1";
} }
var element = angular.element('<a></a>') return function() {
.attr('target', '_blank') var element = this.getElement();
.attr('href', url) var imgElem = angular.element('<a></a>')
.append(angular.element('<img>') .attr('target', '_blank')
.addClass('embed') .attr('href', url)
.attr('src', url)); .append(angular.element('<img>')
return element.prop('outerHTML'); .addClass('embed')
.attr('src', url));
element.innerHTML = imgElem.prop('outerHTML');
};
} }
}); });
@ -300,12 +303,15 @@ plugins.factory('userPlugins', function() {
*/ */
var videoPlugin = new UrlPlugin('video', function(url) { var videoPlugin = new UrlPlugin('video', function(url) {
if (url.match(/\.(mp4|webm|ogv)\b/i)) { if (url.match(/\.(mp4|webm|ogv)\b/i)) {
var element = angular.element('<video></video>') return function() {
.addClass('embed') var element = this.getElement();
.attr('width', '560') var velement = angular.element('<video></video>')
.append(angular.element('<source></source>') .addClass('embed')
.attr('src', url)); .attr('width', '560')
return element.prop('outerHTML'); .append(angular.element('<source></source>')
.attr('src', url));
element.innerHTML = velement.prop('outerHTML');
};
} }
}); });
@ -375,14 +381,17 @@ plugins.factory('userPlugins', function() {
var regexp = /^https?:\/\/(?:www\.)?yr\.no\/(place|stad|sted|sadji|paikka)\/(([^\s.;,(){}<>\/]+\/){3,})/; var regexp = /^https?:\/\/(?:www\.)?yr\.no\/(place|stad|sted|sadji|paikka)\/(([^\s.;,(){}<>\/]+\/){3,})/;
var match = url.match(regexp); var match = url.match(regexp);
if (match) { if (match) {
var language = match[1]; return function() {
var location = match[2]; var element = this.getElement();
var city = match[match.length - 1].slice(0, -1); var language = match[1];
url = "http://www.yr.no/" + language + "/" + location + "avansert_meteogram.png"; var location = match[2];
var element = angular.element('<img>') var city = match[match.length - 1].slice(0, -1);
.attr('src', url) url = "http://www.yr.no/" + language + "/" + location + "avansert_meteogram.png";
.attr('alt', 'Meteogram for ' + city); var ielement = angular.element('<img>')
return element.prop('outerHTML'); .attr('src', url)
.attr('alt', 'Meteogram for ' + city);
element.innerHTML = ielement.prop('outerHTML');
};
} }
}); });
@ -418,13 +427,16 @@ plugins.factory('userPlugins', function() {
var id = url.match(regex); var id = url.match(regex);
if (id) { if (id) {
var src = "https://media.giphy.com/media/" + id[1] + "/giphy.gif"; var src = "https://media.giphy.com/media/" + id[1] + "/giphy.gif";
var element = angular.element('<a></a>') return function() {
.attr('target', '_blank') var element = this.getElement();
.attr('href', url) var gelement = angular.element('<a></a>')
.append(angular.element('<img>') .attr('target', '_blank')
.addClass('embed') .attr('href', url)
.attr('src', src)); .append(angular.element('<img>')
return element.prop('outerHTML'); .addClass('embed')
.attr('src', src));
element.innerHTML = gelement.prop('outerHTML');
};
} }
}); });