feat(citzenScienceExamples): styling and interaction for examples

src/app/citizenScience/_citizenScience.scss

@@ -116,56 +116,6 @@
     visibility: visible;
   }
 
-  #label-buttons {
-
-    background: rgba(0, 0, 0, 0.6);
-    width: 400px;
-    margin: 0px auto 0px auto;
-    text-align: center;
-    border-radius: 8px;
-    padding: 0px 20px 20px 20px;
-
-    a {
-      display: inline-block;
-      margin-left: auto;
-      margin-right: auto;
-      margin-top: 5px;
-      width: auto;
-      padding: 5px 8px 5px 8px;
-      font-size: 18px;
-
-      cursor: pointer;
-      line-height: 1em;
-      color: #fff;
-
-      &:hover {
-        color: #eee;
-
-        .checkbox {
-          border-color: #eee;
-        }
-
-      }
-
-    }
-
-    a.selected {
-      i {
-        color: #8cc967;
-      }
-    }
-
-    i {
-      display: inline-block;
-      text-align: left;
-      width: 1.0em;
-      font-size: 2em;
-      position: relative;
-      top: 0.25em;
-    }
-
-  }
-
   .citsci-debug {
 
     position: absolute;

src/app/citizenScience/bristlebird/bristlebird.js

@@ -63,12 +63,16 @@ class BristlebirdController {
                 "label": "Eastern Bristlebird",
                 "examples": [{
                     "annotationId": 124730
+                },{
+                    "annotationId": 124727
                 }]
             },
             {
                 "tags": ["ground_parrot", "type1"],
                 "label": "Ground Parrot",
-                "examples": []
+                "examples": [{
+                    "annotationId": 124622
+                }]
             },
             {
                 "tags": ["quoll", "type1"],
@@ -120,6 +124,7 @@ class BristlebirdController {
         /**
          * auto play feature
          * when the playback arrives at the end of the audio, it will proceed to the next segment.
+         * @TODO: fix bug where it goes to the next segment at the end of a label example
          */
         $scope.$on(ngAudioEvents.ended, function navigate(event) {
             var nextSampleNum = $scope.currentSampleNum + 1;

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

@@ -51,10 +51,7 @@ <h2>Eastern Bristlebird Search</h2>
                                     current-sample-num="currentSampleNum"
                                     cs-project="csProject"></citizen-science-labels>
 
-            <citizen-science-examples labels="labels"
-                                    samples="samples"
-                                    current-sample-num="currentSampleNum"
-                                    cs-project="csProject"></citizen-science-examples>
+            <citizen-science-examples labels="labels"></citizen-science-examples>
 
 
 

src/app/citizenScience/examples/_examples.scss

@@ -0,0 +1,76 @@
+
+.examples-container {
+  text-align: center;
+}
+
+
+.label-examples {
+
+  display: none;
+  position: relative;
+  padding: 8px;
+  min-width: 410px;
+
+  background: #ffffff;
+  border-radius: 5px;
+  -webkit-box-shadow: 3x 3px 5px rgba(0,0,0,0.3);
+  -moz-box-shadow: 3x 3px 5px rgba(0,0,0,0.3);
+  box-shadow: 3x 3px 5px rgba(0,0,0,0.3);
+
+
+  &.selected {
+    display: inline-block;
+  }
+
+  .citizen-science-example {
+
+    display: none;
+
+
+
+    &.selected {
+
+      display: inline-block;
+
+
+    }
+
+
+  }
+
+
+  h3 {
+    text-align: center;
+    font-size: 1.2em;
+    max-width: 350px;
+    padding-left: 50px;
+    padding-right: 50px;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+
+    span {
+      max-width: calc(100% - 100px);
+    }
+
+    .arrow {
+      font-size: 1.4em;
+      position: absolute;
+
+      &.prev {
+        left: 0px;
+      }
+
+      &.next {
+        right: 0px;
+      }
+
+    }
+
+  }
+
+
+
+
+}
+

src/app/citizenScience/examples/citizenScienceExample.tpl.html

@@ -1,4 +1,4 @@
-<div class="citizen-science-example">
-    THis is a citizen science example {{$ctrl.example.annotationId}}
+<div class="citizen-science-example" ng-class="{selected : ($ctrl.selected)}">
+
     <annotation-item annotation="annotation"></annotation-item>
 </div>

src/app/citizenScience/examples/citizenScienceExamples.tpl.html

@@ -1,7 +1,17 @@
-<div id="examples">
-    <div ng-repeat="(key,label) in $ctrl.labels" ng-class="{selected : (labelSelected(label) > -1)}" ng-click="toggleLabel(label)">
+
+<div class="examples-container">
+    <div ng-repeat="(key,label) in $ctrl.labels" class="label-examples" ng-if="label.examples.length" ng-class="{selected : label.showExamples}">
+
+        <h3>
+            <i class="fa fa-arrow-left arrow prev" aria-hidden="true" ng-click="changeCurExample(key, -1)"  ng-if="label.examples.length>1"></i>
+            <span>{{label.label}} example{{(label.examples.length) > 1 ? 's' : ''}}</span>
+            <i class="fa fa-arrow-right arrow next" aria-hidden="true" ng-click="changeCurExample(key, 1)" ng-if="label.examples.length>1"></i>
+        </h3>
+
+
         <div ng-repeat="(key,example) in label.examples">
-            <citizen-science-example example="example"></citizen-science-example>
+            <citizen-science-example example="example" selected="(key===label.curExample)"  ></citizen-science-example>
         </div>
+
     </div>
 </div>

src/app/citizenScience/examples/example.js

@@ -53,6 +53,7 @@ angular.module("bawApp.components.citizenScienceExample", ["bawApp.citizenScienc
 
             }],
         bindings: {
-            example: "=example"
+            example: "=example",
+            selected: "=selected"
         }
     });

src/app/citizenScience/examples/examples.js

@@ -6,30 +6,33 @@ angular.module("bawApp.components.citizenScienceExamples", ["bawApp.citizenScien
             "$http",
             "CitizenScienceCommon",
             function ($scope, $http, CitizenScienceCommon) {
-                //console.log("dataset progress component scope");console.log($scope);
+
 
                 var self = this;
 
+                $scope.changeCurExample = function (labelNum, changeBy) {
+                    var l = self.labels[labelNum].examples.length;
+                    self.labels[labelNum].curExample = ((self.labels[labelNum].curExample + changeBy % l) + l) % l;
+                    console.log("changed cur example for label " + labelNum + " to " + self.labels[labelNum].curExample);
+                };
+
+
                 /**
-                 * if the label is already in the list of labels for this sample, remove it
-                 * otherwise add it. Send the new set of labels to the dataset
-                 * Note, we can't guarantee the order that the api calls will reach the google sheet.
-                 * if the user adds and removes a label in quick succession, they might arrive out of order
-                 * resulting in the wrong labels being applied.
-                 * @param label string
+                 * Initialize current example for all labels
                  */
-                $scope.showExample = function (exampleNum) {
+                self.labels.forEach(function (label, index) {
 
-                    console.log(self);
+                    if (label.examples.length) {
+                        label.curExample = 0;
+                    } else {
+                        label.curExample = -1;
+                    }
 
+                });
 
-                };
 
             }],
         bindings: {
             labels: "=labels",
-            samples: "=samples",
-            currentSampleNum: "=currentSampleNum",
-            csProject: "=csProject"
         }
     });

src/app/citizenScience/labels/_citizenScienceLabels.scss

@@ -0,0 +1,68 @@
+
+.citizen-science {
+
+  #label-buttons {
+
+    background: rgba(0, 0, 0, 0.6);
+    width: 400px;
+    margin: 0px auto 0px auto;
+    text-align: center;
+    border-radius: 8px;
+    padding: 0px 20px 20px 20px;
+
+    a {
+
+      display: inline-block;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 5px;
+      width: auto;
+      padding: 5px 8px 5px 8px;
+      font-size: 18px;
+      cursor: pointer;
+      line-height: 1em;
+      color: #fff;
+
+      &.main-button {
+
+        &:hover {
+          color: #eee;
+
+          .checkbox {
+            border-color: #eee;
+          }
+
+        }
+
+      }
+
+      &.example-toggle {
+        text-decoration: none;
+
+        &.selected {
+          text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
+        }
+
+      }
+
+    }
+
+    .selected a {
+      i {
+        color: #8cc967;
+      }
+    }
+
+    i {
+      display: inline-block;
+      text-align: left;
+      width: 1.0em;
+      font-size: 2em;
+      position: relative;
+      top: 0.25em;
+    }
+
+  }
+
+}
+

src/app/citizenScience/labels/citizenScienceLabels.js

@@ -59,6 +59,24 @@ angular.module("bawApp.components.citizenScienceLabels", ["bawApp.citizenScience
 
                 };
 
+                /**
+                 * Toggles whether the examples are showing for the given label number
+                 * hides examples from other labels.
+                 * TODO: move this into examples component
+                 * @param key int
+                 */
+                $scope.toggleShowExamples = function (key) {
+                    self.labels.forEach(function (el, index) {
+                        if (index !== key) {
+                            el.showExamples = false;
+                        } else if (el.hasOwnProperty("showExamples")) {
+                            el.showExamples = !el.showExamples;
+                        } else {
+                            el.showExamples = true;
+                        }
+                    });
+                };
+
 
             }],
         bindings: {

src/app/citizenScience/labels/citizenScienceLabels.tpl.html

@@ -1,9 +1,9 @@
 <div id="label-buttons">
-    <a ng-repeat="(key,label) in $ctrl.labels" ng-class="{selected : (labelSelected(key) > -1)}" ng-click="toggleLabel(key)">
-
+        <span ng-repeat="(key,label) in $ctrl.labels" ng-class="{selected : (labelSelected(key) > -1)}">
+        <a  ng-click="toggleLabel(key)" class="main-button">
         <i class="fa"
            ng-class="{true: 'fa-check-square-o', false : 'fa-square-o'}[labelSelected(key)]"
            aria-hidden="true"></i><span>{{label.label}}</span>
-    </a>
-    </ul>
+        <a><a class="fa fa-eye example-toggle" aria-hidden="true" ng-click="toggleShowExamples(key)" ng-class="{selected : (label.showExamples)}" ng-if="label.examples.length"></a>
+    </span>
 </div>