feat(background): replaced csBackground with general background compo…

…nent

src/app/citizenScience/_citizenScience.scss

@@ -156,37 +156,3 @@
 
 }
 
-.csBackground {
-  background: center top no-repeat #000000;
-  width: 100%;
-  height: 100%;
-
-  background-size: cover;
-
-  //
-  //min-height:100%;
-  //min-width:100%;
-  //height:auto;
-  //width:auto;
-
-  position: absolute;
-  top: -20px;
-  left: 0px;
-  z-index: -20;
-  opacity: 0;
-  transition: opacity .5s ease-in-out;
-  -moz-transition: opacity .5s ease-in-out;
-  -webkit-transition: opacity .5s ease-in-out;
-
-  &.bgActive {
-    opacity: 1;
-  }
-}
-
-.csBackgroundWrapper {
-  overflow: hidden;
-  z-index: -20;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-}

src/app/citizenScience/bristlebird/bristlebird.js

@@ -14,6 +14,7 @@ class BristlebirdAboutController {
 
 class BristlebirdController {
     constructor($scope,
+                $rootScope,
                 $routeParams,
                 $http,
                 ngAudioEvents,
@@ -155,6 +156,7 @@ class BristlebirdController {
                 console.log("load audio for sample " + $scope.currentSampleNum);
                 var currentSample = $scope.samples[$scope.currentSampleNum];
                 self.showAudio(currentSample.recordingId, currentSample.startOffset, self.sampleDuration);
+                $rootScope.bgImageSource = self.backgroundPaths[$scope.currentSampleNum % (self.backgroundPaths.length - 1)];
             }
         });
 
@@ -179,6 +181,14 @@ class BristlebirdController {
                 });
             }
         });
+
+
+        self.pathToBackgrounds = "/build/assets/img/citizen-science/backgrounds/";
+        self.backgroundPaths = ["1.jpg","2.jpg","3.jpg","4.jpg"].map(fn => self.pathToBackgrounds + fn);
+
+        console.log(self.backgroundPaths);
+
+
     }
 
 }
@@ -195,6 +205,7 @@ angular
         "BristlebirdController",
         [
             "$scope",
+            "$rootScope",
             "$routeParams",
             "$http",
             "ngAudioEvents",

src/app/citizenScience/bristlebird/listen.tpl.html

@@ -1,5 +1,3 @@
-<cs-backgrounds backgrounds="['1.jpg','2.jpg','3.jpg','4.jpg',]" change-on="currentSampleNum"></cs-backgrounds>
-
 <div class="citizen-science bristlebird">
 
     <h2>Eastern Bristlebird Search <onboarding steps="onboardingSteps"></onboarding></h2>

src/components/directives/background/_background.scss

@@ -0,0 +1,33 @@
+
+
+.background {
+  overflow: hidden;
+  z-index: -20;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100vw;
+  height: 100vh;
+  background: center top no-repeat;
+  background-size: cover;
+
+
+
+  &.preloading {
+    transition: none;
+    opacity: 1;
+  }
+
+  &.ready {
+    opacity: 0;
+    transition: opacity .5s ease-in-out;
+    -moz-transition: opacity .5s ease-in-out;
+    -webkit-transition: opacity .5s ease-in-out;
+  }
+
+
+}
+
+.bgBottom {
+  z-index: -22;
+}

src/components/directives/background/background.js

@@ -0,0 +1,50 @@
+angular.module("bawApp.components.background", [])
+    .component("background",{
+        template: "<div class='background bgBottom' style='background-image:url({{bgBack}});'></div>" +
+                  "<div class='background bgTop' style='background-image:url({{bgFront}});' ng-class='state'></div>",
+        controller: ["$scope", "$rootScope", "$window", "$element", "$interval", function ($scope, $rootScope, $window, $element, $interval) {
+
+            var self = this;
+
+            self.setBg = function (newUrl, oldUrl) {
+
+                $scope.bgFront = oldUrl;
+
+                $scope.state = "preloading";
+
+                var preload = new Image();
+                preload.src = newUrl;
+
+                if (preload.complete) {
+                    self.bgLoaded(newUrl);
+                } else {
+                    preload.addEventListener("load", function (e) {
+                        self.bgLoaded(e.srcElement.src);
+                    });
+                    preload.addEventListener("error", function() {
+                        console.log("Error loading background image");
+                    });
+                }
+
+            };
+
+            self.bgLoaded = function (newUrl) {
+
+                console.log("next bg image loaded", newUrl);
+
+                $scope.bgBack = newUrl;
+
+                $scope.state = "ready";
+            };
+
+
+            $rootScope.$watch("bgImageSource", function (newval, oldval) {
+
+                console.log("background image source changed", newval);
+
+                self.setBg(newval, oldval);
+
+            });
+
+        }]
+    });

src/index.html

@@ -25,6 +25,8 @@
 </head>
 <body baw-auth class="waiting-for-angular">
 
+<background></background>
+
 <nav class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">