feat(audioButtons): previous and next buttons as components, routing …

…for citizenScience
QutEcoacoustics · Sep 19, 2017 · 5ea1b04 · 5ea1b04
1 parent ed0fc18
commit 5ea1b04
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 10 deletions.
diff --git a/src/app/app.js b/src/app/app.js
@@ -148,6 +148,10 @@ angular.module("baw",
                     indentation: 1
                 };
 
+                function convertRouteParams (route) {
+                    return route.replace(/}/g,"").replace(/{/g,":");
+                }
+
                 // routes
                 $routeProvider.when("/home", {
                     templateUrl: "/assets/home.html",
@@ -283,12 +287,19 @@ angular.module("baw",
                 title: "Bristlebird Citizen Science",
                 fullWidth: true
             }).
-            when("/citsci/bristlebird/listen", {
-                templateUrl: "citizenScience/bristlebird/listen.tpl.html",
-                controller: "BristlebirdController",
-                title: "Bristlebird Citizen Science",
-                fullWidth: true
-            }).
+            // when("/citsci/bristlebird/listen", {
+            //     templateUrl: "citizenScience/bristlebird/listen.tpl.html",
+            //     controller: "BristlebirdController",
+            //     title: "Bristlebird Citizen Science",
+            //     fullWidth: true
+            // }).
+                when(convertRouteParams(paths.site.ngRoutes.citizenScience.listen), {
+                    templateUrl: "citizenScience/bristlebird/listen.tpl.html",
+                    controller: "BristlebirdController",
+                    title: "Bristlebird Citizen Science",
+                    fullWidth: true
+                }).
+
             when("/citsci/ipswich", {
                 templateUrl: "citizenScience/ipswich/about.tpl.html",
                 controller: "IpswichAboutController",

diff --git a/src/app/audioControls/audioControls.js b/src/app/audioControls/audioControls.js
@@ -1,4 +1,5 @@
 angular.module("bawApp.audioControls",[
     "bawApp.audioControls.playButton",
-    "bawApp.audioControls.volumeSlider"
+    "bawApp.audioControls.volumeSlider",
+    "bawApp.audioControls.clipNavigationButton"
 ]);
diff --git a/src/app/audioControls/clipNavigationButton.js b/src/app/audioControls/clipNavigationButton.js
@@ -0,0 +1,28 @@
+
+angular.module("bawApp.audioControls.clipNavigationButton", [])
+    .component("clipNavigationButton", {
+        templateUrl: "audioControls/clipNavigationButton.tpl.html",
+        controller: [
+            "$scope",
+            function ($scope) {
+
+                var self = this;
+
+
+
+                /**
+                 * Returns whether the next button is disabled based on whether
+                 * the bound link is a string of length at least 1
+                 * @returns {boolean}
+                 */
+                $scope.disabled = function () {
+                    var anchorLinkValue = self.anchorLink();
+                    return !(angular.isString(anchorLinkValue) && anchorLinkValue.length > 0);
+                };
+
+            }],
+        bindings: {
+            anchorLink: "=",
+            direction: "="
+        }
+    });
diff --git a/src/app/audioControls/clipNavigationButton.tpl.html b/src/app/audioControls/clipNavigationButton.tpl.html
@@ -0,0 +1,5 @@
+<a class="btn btn-default" ng-href="{{$ctrl.anchorLink()}}"
+   ng-disabled="disabled()"
+   title="Previous Recording">
+    <span class="glyphicon" ng-class="{'glyphicon-step-backward': $ctrl.direction === 'previous', 'glyphicon-step-forward': $ctrl.direction !== 'previous'}"></span>
+</a>
diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.js b/src/app/citizenScience/datasetProgress/datasetProgress.js
@@ -1,14 +1,17 @@
 angular.module("bawApp.components.progress", [])
     .component("datasetProgress",{
         templateUrl: "citizenScience/datasetProgress/datasetProgress.tpl.html",
-        controller: ["$scope", function ($scope) {
+        controller: ["$scope", "$routeParams","$url", "conf.paths", function ($scope, $routeParams,$url,paths) {
             //console.log("dataset progress component scope");console.log($scope);
 
+            console.log($routeParams);
+
             var self = this;
             $scope.selectItem = function (itemNum) {
                 self.selected = itemNum;
             };
 
+
             $scope.nextItem = function () {
                 if (self.selected < self.items.length - 1) {
                     self.selected = self.selected + 1;
@@ -21,6 +24,22 @@ angular.module("bawApp.components.progress", [])
                 }
             };
 
+            //TODO: this gets called constantly while the audio is playing
+            $scope.previousLink = function () {
+                if (self.selected > 0) {
+                    return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum:self.selected - 1});
+                } else {
+                    return false;
+                }
+            };
+            $scope.nextLink = function () {
+                if (self.selected < self.items.length - 1) {
+                    return $url.formatUri(paths.site.ngRoutes.citizenScience.listen, {sampleNum:self.selected + 1});
+                } else {
+                    return false;
+                }
+            };
+
             /**
              * Returns the number of viewed items
              * @returns {number}

diff --git a/src/app/citizenScience/datasetProgress/datasetProgress.tpl.html b/src/app/citizenScience/datasetProgress/datasetProgress.tpl.html
@@ -1,6 +1,9 @@
 
-        <div class="progressCell progressItem" ng-if="showProgressItems" ng-repeat="(key, item) in $ctrl.items"  ng-class="{done : item.done,  cur : $ctrl.selected === key}" ng-click="selectItem(key)">
-
+        <div class="progressCell progressItem"
+             ng-if="showProgressItems"
+             ng-repeat="(key, item) in $ctrl.items"
+             ng-class="{done : item.done,  cur : $ctrl.selected === key}"
+             ng-click="selectItem(key)">
             {{ key + 1 }}
 
         </div>
@@ -9,6 +12,9 @@
         <div class="progressCell prev-clip" ng-class="{disabled : $ctrl.selected < 1}" ng-click="prevItem()"></div>
         <div class="progressCell next-clip" ng-class="{disabled : $ctrl.selected > $ctrl.items.length - 2}" ng-click="nextItem()"></div>
 
+        <clip-navigation-button direction="'previous'" anchor-link="previousLink"></clip-navigation-button>
+        <clip-navigation-button direction="'next'" anchor-link="nextLink"></clip-navigation-button>
+
 
 
 

diff --git a/src/baw.paths.nobuild.js b/src/baw.paths.nobuild.js
@@ -171,6 +171,9 @@ module.exports = function (environment) {
                 "library": "/library",
                 "libraryItem": "/library/{recordingId}/audio_events/{audioEventId}",
                 "visualize": "/visualize",
+                "citizenScience": {
+                    "listen":"/citsci/bristlebird/listen/{sampleNum}"
+                },
                 "demo": {
                     "d3": "/demo/d3",
                     "rendering": "/demo/rendering",