From 50f8f185031593c2f89f6c98eb2abf347da5c4b5 Mon Sep 17 00:00:00 2001
From: Jesper Hauge <jesper@iqit.dk>
Date: Mon, 20 Jun 2016 21:53:40 +0200
Subject: [PATCH] Fixes U4-8616

---
 .../src/common/services/assets.service.js     | 125 +++++++++++-------
 1 file changed, 76 insertions(+), 49 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/assets.service.js b/src/Umbraco.Web.UI.Client/src/common/services/assets.service.js
index ff54c5c222..0d1ed30721 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/assets.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/assets.service.js
@@ -44,7 +44,8 @@ angular.module('umbraco.services')
 .factory('assetsService', function ($q, $log, angularHelper, umbRequestHelper, $rootScope, $http) {
 
     var initAssetsLoaded = false;
-    var appendRnd = function (url) {
+
+    function appendRnd (url) {
         //if we don't have a global umbraco obj yet, the app is bootstrapping
         if (!Umbraco.Sys.ServerVariables.application) {
             return url;
@@ -77,6 +78,7 @@ angular.module('umbraco.services')
                 return this.loadedAssets[path];
             }
         },
+
         /** 
             Internal method. This is called when the application is loading and the user is already authenticated, or once the user is authenticated.
             There's a few assets the need to be loaded for the application to function but these assets require authentication to load.
@@ -192,7 +194,7 @@ angular.module('umbraco.services')
          * @methodOf umbraco.services.assetsService
          *
          * @description
-         * Injects a collection of files, this can be ONLY js files
+         * Injects a collection of css and js files
          * 
          *
          * @param {Array} pathArray string array of paths to the files to load
@@ -206,62 +208,87 @@ angular.module('umbraco.services')
                 throw "pathArray must be an array";
             }
 
+            // Check to see if there's anything to load, resolve promise if not
             var nonEmpty = _.reject(pathArray, function (item) {
                 return item === undefined || item === "";
             });
-
-
-            //don't load anything if there's nothing to load
-            if (nonEmpty.length > 0) {
-                var promises = [];
-                var assets = [];
-
-                //compile a list of promises
-                //blocking
-                _.each(nonEmpty, function (path) {
-
-                    path = convertVirtualPath(path);
-
-                    var asset = service._getAssetPromise(path);
-                    //if not previously loaded, add to list of promises
-                    if (asset.state !== "loaded") {
-                        if (asset.state === "new") {
-                            asset.state = "loading";
-                            assets.push(asset);
-                        }
-
-                        //we need to always push to the promises collection to monitor correct 
-                        //execution                        
-                        promises.push(asset.deferred.promise);
-                    }
-                });
-
-
-                //gives a central monitoring of all assets to load
-                promise = $q.all(promises);
-
-                _.each(assets, function (asset) {
-                    LazyLoad.js(appendRnd(asset.path), function () {
-                        asset.state = "loaded";
-                        if (!scope) {
-                            asset.deferred.resolve(true);
-                        }
-                        else {
-                            angularHelper.safeApply(scope, function () {
-                                asset.deferred.resolve(true);
-                            });
-                        }
-                    });
-                });
-            }
-            else {
-                //return and resolve
+            if (nonEmpty.length === 0) {
                 var deferred = $q.defer();
                 promise = deferred.promise;
                 deferred.resolve(true);
+                return promise;
             }
 
+            //compile a list of promises
+            //blocking
+            var promises = [];
+            var assets = [];
+            _.each(nonEmpty, function (path) {
+                path = convertVirtualPath(path);
+                var asset = service._getAssetPromise(path);
+                //if not previously loaded, add to list of promises
+                if (asset.state !== "loaded") {
+                    if (asset.state === "new") {
+                        asset.state = "loading";
+                        assets.push(asset);
+                    }
 
+                    //we need to always push to the promises collection to monitor correct 
+                    //execution                        
+                    promises.push(asset.deferred.promise);
+                }
+            });
+
+            //gives a central monitoring of all assets to load
+            promise = $q.all(promises);
+
+            // Split into css and js asset arrays, and use LazyLoad on each array
+            var cssAssets = _.filter(assets,
+                function (asset) {
+                    return asset.path.match(/(\.css$|\.css\?)/ig);
+                });
+            var jsAssets = _.filter(assets,
+                function (asset) {
+                    return asset.path.match(/(\.js$|\.js\?)/ig);
+                });
+
+            if (cssAssets.length > 0) {
+                var cssPaths = _.map(cssAssets, function (asset) { return appendRnd(asset.path) });
+                LazyLoad.css(cssPaths,
+                    function () {
+                        _.each(cssAssets,
+                            function (asset) {
+                                asset.state = "loaded";
+                                if (!scope) {
+                                    asset.deferred.resolve(true);
+                                    return;
+                                }
+                                angularHelper.safeApply(scope,
+                                    function () {
+                                        asset.deferred.resolve(true);
+                                    });
+                            });
+                    });
+            }
+
+            if (jsAssets.length > 0) {
+                var jsPaths = _.map(jsAssets, function (asset) { return appendRnd(asset.path) });
+                LazyLoad.js(jsPaths,
+                    function () {
+                        _.each(jsAssets,
+                            function (asset) {
+                                asset.state = "loaded";
+                                if (!scope) {
+                                    asset.deferred.resolve(true);
+                                    return;
+                                }
+                                angularHelper.safeApply(scope,
+                                    function () {
+                                        asset.deferred.resolve(true);
+                                    });
+                            });
+                    });
+            }
             return promise;
         }
     };