feat(citizenScienceLabels): one examples component per label

QutEcoacoustics · May 18, 2017 · 6276bca · 6276bca
1 parent 35b6568
commit 6276bca
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 31 deletions.
diff --git a/src/app/citizenScience/thumbLabels/_thumbs.scss b/src/app/citizenScience/thumbLabels/_thumbs.scss
@@ -5,6 +5,7 @@ $thumb-height: 100;
   text-align: center;
   margin-top: 10px;
   background: rgba(0,0,0,0.3);
+  position: relative;
 
   /* flexbox layout of thumbs */
   display: flex;
@@ -50,8 +51,8 @@ $thumb-height: 100;
       border-radius: 5px;
       background: #fff;
       padding: 5px;
-      top: ($thumb-height + 20) + px;
 
+      top: ($thumb-height + 20) + px;
 
 
     }

diff --git a/src/app/citizenScience/thumbLabels/examples.js b/src/app/citizenScience/thumbLabels/examples.js
@@ -59,4 +59,4 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
             examples: "=examples",
             label: "=label"
         }
-    });
+    });
diff --git a/src/app/citizenScience/thumbLabels/label.js b/src/app/citizenScience/thumbLabels/label.js
@@ -6,48 +6,43 @@ angular.module("bawApp.components.citizenScienceThumbLabels.label",
         templateUrl: "citizenScience/thumbLabels/label.tpl.html",
         controller: [
             "$scope",
-            "$http",
-            "CitizenScienceCommon",
-            "annotationLibraryCommon",
-            "AudioEvent",
-            "baw.models.AudioEvent",
-            function ($scope, $http, CitizenScienceCommon, libraryCommon, AudioEventService, AudioEvent) {
+            "$element",
+            function ($scope, $element) {
 
                 var self = this;
 
-                $scope.selected = false;
-
+                $scope.selected = function () {
+                    return self.selectedLabelNum.value === self.labelNum;
+                };
 
 
                 $scope.toggleSelected = function () {
 
                     console.log("toggling state for label number", self.labelNum);
 
+                    console.log("old selected label num:", self.selectedLabelNum.value);
+
                     //$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;
+                        $scope.$emit("examples-position", ($element[0].offsetTop));
                     }
 
+                    console.log("new selected label num:", self.selectedLabelNum.value);
+
+
                 };
 
             }],
         bindings: {
 
-            // tags that this event type are associated with
-            tags: "=",
-
-            // the label for this thumb (friendly name for label)
-            name: "=",
-
-            examples: "<",
-
             labelNum: "<",
 
+            label: "=",
+
             onToggleSelected: "<",
 
             selectedLabelNum: "="

diff --git a/src/app/citizenScience/thumbLabels/label.tpl.html b/src/app/citizenScience/thumbLabels/label.tpl.html
@@ -1,11 +1,13 @@
-<div class="citizen-science-thumb-label" ng-class="{selected : selected}">
+<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}}">
+        <img ng-src="{{$ctrl.label.examples[0].annotation.media.available.image.png.url}}" alt="{{$ctrl.label.name}}">
     </div>
 
-
+    <citizen-science-label-examples
+            examples="$ctrl.label.examples"
+            ng-if="selected()"
+    ></citizen-science-label-examples>
 
 </div>
diff --git a/src/app/citizenScience/thumbLabels/labels.js b/src/app/citizenScience/thumbLabels/labels.js
@@ -33,10 +33,20 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
                         $scope.selectedLabelNum.value = labelNum;
                     }
 
-                    //$scope.$broadcast('selected-label-num-changed', $scope.selectedLabelNum);
-
                 };
 
+                $scope.examplesPosition = "0px";
+
+                $scope.$on("examples-position", function (event, newPosition) {
+
+                    console.log("examples-position has changed: ", newPosition);
+
+                    $scope.examplesPosition = newPosition + "px";
+
+
+                });
+
+
 
                 $scope.$watch(function () {
                     return self.labels;

diff --git a/src/app/citizenScience/thumbLabels/labels.tpl.html b/src/app/citizenScience/thumbLabels/labels.tpl.html
@@ -5,15 +5,12 @@
             ng-repeat="(key,label) in $ctrl.labels"
             class="label-thumbs"
             ng-if="label.examples.length"
-            tags="label.tags"
-            name="label.name"
-            examples="label.examples"
+            label="label"
             label-num="key"
             selected-label-num="selectedLabelNum"
             on-toggle-selected="onToggleSelected"></citizen-science-label>
 
 
-    <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 change
@@ Expand Up @@
                 examples: "=examples",
                 label: "=label"
             }
-        });
+        });