From a02573a9c2ac025f7543df32f0f67cec12472951 Mon Sep 17 00:00:00 2001
From: Tor Hveem <tor@hveem.no>
Date: Mon, 19 Oct 2015 14:51:14 +0200
Subject: [PATCH] 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 | 68 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/js/plugins.js b/js/plugins.js
index 3bff6ab..f659012 100644
--- a/js/plugins.js
+++ b/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');
+            };
         }
     });