background component to transition between backgrounds

QutEcoacoustics · Mar 30, 2017 · 4ca3716 · 4ca3716
1 parent 0edb954
commit 4ca3716
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/components/directives/background/_background.scss b/src/components/directives/background/_background.scss
@@ -15,11 +15,11 @@
 
   &.preloading {
     transition: none;
-    opacity: 1;
+    opacity: 0;
   }
 
   &.ready {
-    opacity: 0;
+    opacity: 1;
     transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
     -webkit-transition: opacity .5s ease-in-out;

diff --git a/src/components/directives/background/background.js b/src/components/directives/background/background.js
@@ -6,10 +6,20 @@ angular.module("bawApp.components.background", [])
 
             var self = this;
 
-            self.setBg = function (newUrl, oldUrl) {
+            /**
+             * Loads the old url into the back bg div (so, two copies of the same image one behind the other)
+             * Preloads image. When loaded, sets the state to 'ready', which is opacity 1 with transition.
+             * Then, loads the new url into the front bg div.
+             * Sets state of the front div to preloading, which is opacity 0 with no transition.
+             * This will continue to show the old bg in the bgBack div.
+             * This will fade in the new bg image infront of the old one.
+             * @param newUrl
+             * @param oldUrl
+             */
 
-                $scope.bgFront = oldUrl;
+            self.setBg = function (newUrl, oldUrl) {
 
+                $scope.bgBack = oldUrl;
                 $scope.state = "preloading";
 
                 var preload = new Image();
@@ -20,28 +30,32 @@ angular.module("bawApp.components.background", [])
                 } else {
                     preload.addEventListener("load", function (e) {
                         self.bgLoaded(e.srcElement.src);
+                        this.remove();
                     });
                     preload.addEventListener("error", function() {
-                        console.log("Error loading background image");
+                        console.warn("Error loading background image", this);
+                        this.remove();
                     });
                 }
 
             };
 
+            /**
+             * Updates the src of the front image and sets the state to ready, which
+             * switches the opacity to 1. Called when the preloading is done.
+             * @param newUrl
+             */
             self.bgLoaded = function (newUrl) {
-
-                console.log("next bg image loaded", newUrl);
-
-                $scope.bgBack = newUrl;
-
-                $scope.state = "ready";
+                $scope.bgFront = newUrl;
+                setTimeout(function () {
+                    $scope.state = "ready";
+                }, 100);
             };
 
-
             $rootScope.$watch("bgImageSource", function (newval, oldval) {
-
-                console.log("background image source changed", newval);
-
+                if (typeof newval !== "string") {
+                    return;
+                }
                 self.setBg(newval, oldval);
 
             });