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.

js/plugins.js

@@ -285,13 +285,16 @@ plugins.factory('userPlugins', function() {
                 // TODO strip an existing dl=0 parameter
                 url = url + "?dl=1";
             }
-            var element = angular.element('<a></a>')
-                                 .attr('target', '_blank')
-                                 .attr('href', url)
-                                 .append(angular.element('<img>')
-                                                .addClass('embed')
-                                                .attr('src', url));
-            return element.prop('outerHTML');
+            return function() {
+                var element = this.getElement();
+                var imgElem = angular.element('<a></a>')
+                                     .attr('target', '_blank')
+                                     .attr('href', url)
+                                     .append(angular.element('<img>')
+                                                    .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) {
         if (url.match(/\.(mp4|webm|ogv)\b/i)) {
-            var element = angular.element('<video></video>')
-                                 .addClass('embed')
-                                 .attr('width', '560')
-                                 .append(angular.element('<source></source>')
-                                                .attr('src', url));
-            return element.prop('outerHTML');
+            return function() {
+                var element = this.getElement();
+                var velement = angular.element('<video></video>')
+                                     .addClass('embed')
+                                     .attr('width', '560')
+                                     .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 match = url.match(regexp);
         if (match) {
-            var language = match[1];
-            var location = match[2];
-            var city = match[match.length - 1].slice(0, -1);
-            url = "http://www.yr.no/" + language + "/" + location + "avansert_meteogram.png";
-            var element = angular.element('<img>')
-                                 .attr('src', url)
-                                 .attr('alt', 'Meteogram for ' + city);
-            return element.prop('outerHTML');
+            return function() {
+                var element = this.getElement();
+                var language = match[1];
+                var location = match[2];
+                var city = match[match.length - 1].slice(0, -1);
+                url = "http://www.yr.no/" + language + "/" + location + "avansert_meteogram.png";
+                var ielement = angular.element('<img>')
+                                     .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);
         if (id) {
             var src = "https://media.giphy.com/media/" + id[1] + "/giphy.gif";
-            var element = angular.element('<a></a>')
-                                 .attr('target', '_blank')
-                                 .attr('href', url)
-                                 .append(angular.element('<img>')
-                                                .addClass('embed')
-                                                .attr('src', src));
-            return element.prop('outerHTML');
+            return function() {
+                var element = this.getElement();
+                var gelement = angular.element('<a></a>')
+                                     .attr('target', '_blank')
+                                     .attr('href', url)
+                                     .append(angular.element('<img>')
+                                                    .addClass('embed')
+                                                    .attr('src', src));
+                element.innerHTML = gelement.prop('outerHTML');
+            };
         }
     });