feat(citizenScienceLabels): implement selected label for examples out…

…side of label component
QutEcoacoustics · May 17, 2017 · 35b6568 · 35b6568
1 parent 23dc426
commit 35b6568
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 25 deletions.
diff --git a/src/app/citizenScience/thumbLabels/examples.js b/src/app/citizenScience/thumbLabels/examples.js
@@ -45,15 +45,8 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
 
                 $scope.$watch("currentExample", function (newVal, oldVal) {
 
-
-
                     console.log("self.examples[$scope.currentExample].annotation",self.examples[$scope.currentExample].annotation);
 
-
-
-
-
-
                 });
 
 

diff --git a/src/app/citizenScience/thumbLabels/label.js b/src/app/citizenScience/thumbLabels/label.js
@@ -15,27 +15,43 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
 
                 var self = this;
 
+                $scope.selected = false;
+
+
+
                 $scope.toggleSelected = function () {
-                    var newVal = !self.showInfo;
-                    self.onToggleShowInfo(self.labelNum);
-                    self.showInfo = newVal;
+
+                    console.log("toggling state for label number", self.labelNum);
+
+                    //$scope.selected = self.onToggleSelected(self.labelNum);
+
+                    if (self.selectedLabelNum.value === self.labelNum) {
+                        self.selectedLabelNum.value = -1;
+                        $scope.selected = false;
+                    } else {
+                        self.selectedLabelNum.value = self.labelNum;
+                        $scope.selected = true;
+                    }
+
                 };
 
             }],
         bindings: {
 
             // tags that this event type are associated with
-            tags: "=tags",
+            tags: "=",
 
             // the label for this thumb (friendly name for label)
             name: "=",
 
+            examples: "<",
+
             labelNum: "<",
 
-            // whether this thumb is currently selected for more info
-            showInfo: "=",
+            onToggleSelected: "<",
+
+            selectedLabelNum: "="
 
-            onToggleShowInfo: "<"
 
         }
     });
diff --git a/src/app/citizenScience/thumbLabels/label.tpl.html b/src/app/citizenScience/thumbLabels/label.tpl.html
@@ -1,6 +1,7 @@
-<div class="citizen-science-thumb-label" ng-class="{selected : ($ctrl.showInfo)}">
+<div class="citizen-science-thumb-label" ng-class="{selected : selected}">
 
     <!-- stuff to show thumb image -->
+    image
     <div class="citizen-science-thumb" ng-click="toggleSelected()">
         <img ng-src="{{$ctrl.examples[0].annotation.media.available.image.png.url}}" alt="{{$ctrl.label}}">
     </div>

diff --git a/src/app/citizenScience/thumbLabels/labels.js b/src/app/citizenScience/thumbLabels/labels.js
@@ -22,18 +22,27 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
 
                 var self = this;
 
+                $scope.selectedLabelNum = {value: -1};
 
-                $scope.$watch(function () {
-                    return self.labels;
-                }, function (newVal, oldVal) {
-                    self.fetchAnnotationData(newVal);
+                $scope.onToggleSelected = function (labelNum) {
+                    console.log("onToggleSelected", labelNum);
 
-                    self.hideAllLabelInfos();
+                    if ($scope.selectedLabelNum.value === labelNum) {
+                        $scope.selectedLabelNum.value = -1;
+                    } else {
+                        $scope.selectedLabelNum.value = labelNum;
+                    }
 
-                });
+                    //$scope.$broadcast('selected-label-num-changed', $scope.selectedLabelNum);
 
+                };
 
 
+                $scope.$watch(function () {
+                    return self.labels;
+                }, function (newVal, oldVal) {
+                    self.fetchAnnotationData(newVal);
+                });
 
                 /**
                  * fetches site/project/media data for all label examples
@@ -52,7 +61,6 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
 
                     var annotations = [];
 
-
                     AudioEventService
                         .getAudioEventsByIds(annotationIds)
                         .then(function (response) {

diff --git a/src/app/citizenScience/thumbLabels/labels.tpl.html b/src/app/citizenScience/thumbLabels/labels.tpl.html
@@ -7,12 +7,13 @@
             ng-if="label.examples.length"
             tags="label.tags"
             name="label.name"
+            examples="label.examples"
             label-num="key"
-            show-info="label.showInfo"
-            on-toggle-show-info="$ctrl.hideAllLabelInfos"></citizen-science-label>
+            selected-label-num="selectedLabelNum"
+            on-toggle-selected="onToggleSelected"></citizen-science-label>
 
 
     <citizen-science-label-examples
-            examples="$ctrl.labels[selectedLabel].examples" ng-if="selectedLabel > -1" ></citizen-science-label-examples>
+            examples="$ctrl.labels[selectedLabelNum.value].examples" ng-if="selectedLabelNum > -1" ></citizen-science-label-examples>
 
 </div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -45,15 +45,8 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",

		$scope.$watch("currentExample", function (newVal, oldVal) {



		console.log("self.examples[$scope.currentExample].annotation",self.examples[$scope.currentExample].annotation);






		});


Expand Down