From 92df4f072ecf0caffe5a8c44a44f816512d75644 Mon Sep 17 00:00:00 2001 From: Phil Date: Wed, 29 Mar 2017 17:32:16 +1000 Subject: [PATCH] feat(background): replaced csBackground with general background component --- src/app/citizenScience/_citizenScience.scss | 34 ------ src/app/citizenScience/background.js | 107 ------------------ .../citizenScience/bristlebird/bristlebird.js | 11 ++ .../bristlebird/listen.tpl.html | 2 - .../directives/background/_background.scss | 33 ++++++ .../directives/background/background.js | 50 ++++++++ src/index.html | 2 + 7 files changed, 96 insertions(+), 143 deletions(-) delete mode 100644 src/app/citizenScience/background.js create mode 100644 src/components/directives/background/_background.scss create mode 100644 src/components/directives/background/background.js diff --git a/src/app/citizenScience/_citizenScience.scss b/src/app/citizenScience/_citizenScience.scss index fb28508c..93ce4f1b 100644 --- a/src/app/citizenScience/_citizenScience.scss +++ b/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; -} \ No newline at end of file diff --git a/src/app/citizenScience/background.js b/src/app/citizenScience/background.js deleted file mode 100644 index 18b9d002..00000000 --- a/src/app/citizenScience/background.js +++ /dev/null @@ -1,107 +0,0 @@ -angular.module("bawApp.components.background", []) - .component("csBackgrounds",{ - template: "
" + - "
" + - "
", - controller: ["$scope", "$window", "$element", "$interval", function ($scope, $window, $element, $interval) { - - var self = this; - - /** - * location of all images, to be concatenated with the files specified as attributes - * @type {string} - */ - self.pathToBackgrounds = "/build/assets/img/citizen-science/backgrounds/"; - self.backgroundPaths = []; - - self.curBackgroundNum = 0; - - /** - * creates a full path to each background image based on the specified list of files - * and the path to the backgrounds directory - */ - self.setBackgrounds = function () { - for (var b = 0; b < self.backgrounds.length; b++) { - self.backgroundPaths[b] = self.pathToBackgrounds + self.backgrounds[b]; - } - }; - self.setBackgrounds(); - - /** - * increments the curBackgroundNum, cycling to the start if necessary - */ - self.cycleChange = function () { - self.curBackgroundNum = (self.curBackgroundNum + 1) % self.backgrounds.length; - }; - - - if (self.changeEveryMS > 0) { - self.cycleInterval = $interval(self.cycleChange, self.changeEveryMS); - } else if (self.changeOn !== undefined) { - $scope.$watch(function () { return self.changeOn; }, function (oldval, newval) { - self.cycleChange(); - }); - } - - }], - bindings: { - backgrounds: "<", - // if set will watch for changes to this variable and cycle background image then - changeOn: "<", - // if set will cycle background image every this many seconds - changeEveryMS: "<" - } - }) - - .directive("fillWindow", ["$window", function ($window) { - return { - restrict: "A", - link: function (scope, element, attrs) { - var self = this; - self.element = element[0]; - element.bind("load", function () { - self.resize(); - }); - - /** - * called after page load, resize or scroll - * updates the size and position of the bound element - * sets top left to top left of window, - * and height and width to match that of the window - */ - self.resize = function () { - var newHeight = $window.innerHeight - 20; - var newWidth = $window.innerWidth - 6; - var parentOffsetV = 2-self.element.parentElement.getBoundingClientRect().top; - var parentOffsetH = 2-self.element.parentElement.getBoundingClientRect().left; - angular.element(self.element.parentElement).css("position","relative"); - var css = { - "height": newHeight + "px", - "width": newWidth + "px", - "top": parentOffsetV + "px", - "left": parentOffsetH + "px" - }; - angular.element(self.element).css(css); - }; - - angular.element($window).bind("scroll", self.resize); - angular.element($window).bind("resize", self.resize); - - // This is necessary incase other dom changes move the parent element - // as the page is loading. - scope.$watch(function () { - return 0; - // disabled this because it is broken - //return self.element.parentElement.getBoundingClientRect(); - }, self.resize, true); - - - self.resize(); - - } - }; - }]); \ No newline at end of file diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js index 7c62cda5..b9880af1 100644 --- a/src/app/citizenScience/bristlebird/bristlebird.js +++ b/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", diff --git a/src/app/citizenScience/bristlebird/listen.tpl.html b/src/app/citizenScience/bristlebird/listen.tpl.html index a43d076a..cac95179 100644 --- a/src/app/citizenScience/bristlebird/listen.tpl.html +++ b/src/app/citizenScience/bristlebird/listen.tpl.html @@ -1,5 +1,3 @@ - -

Eastern Bristlebird Search

diff --git a/src/components/directives/background/_background.scss b/src/components/directives/background/_background.scss new file mode 100644 index 00000000..288d6d28 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/directives/background/background.js b/src/components/directives/background/background.js new file mode 100644 index 00000000..0542c512 --- /dev/null +++ b/src/components/directives/background/background.js @@ -0,0 +1,50 @@ +angular.module("bawApp.components.background", []) + .component("background",{ + template: "
" + + "
", + 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); + + }); + + }] + }); diff --git a/src/index.html b/src/index.html index 1f11d1dd..978cb278 100644 --- a/src/index.html +++ b/src/index.html @@ -25,6 +25,8 @@ + +