feat(onboarding): autoplay for onboarding

If the user has seen all the steps of onboarding or if they have exited early,
onboarding will not autoplay. This is recorded using local storage - so it will be true
for the device, not the user.
Because the onboarding service/component may potentially be shared by different pages,
it records when the user has seen each step, and checks to see whether the user has previouslyseen (or exited before seeing) all the steps currently loaded. Another screen that involvesonboarding with different steps will still autoplay.

For onboarding to work, it needs to know when all the elements that are in the tour have finished loading. Some of those elements may not exist before xhr responses have been received. The spectrogram image may exist but not be displayed properly while it is loading. To allow for this, the onboarding service can be registered with messages that it must wait for before being considered "ready".

These ready messages are sent in the success handler of a http request. For the spectrogram, a new directive was created that broadcasts an event when the spectrogram has finished loading.

The info button - used to manually launch the tour - now draws attention to itself after the tour is ready and when it closes. If the tour autoplays and is closed, the button draws attention to itself to show how to reopen it if needed. This is done through css animation.

An change was also made to allow more than one event handler for the same event, e.g. many
onExit handlers. This allows event handlers to be registered with the service from anywhere independently. In this case, it was needed since the animation on the button is triggered on exit, and the label examples are also closed on exit.

src/app/citizenScience/datasetProgress/datasetProgressIndicator.js

@@ -60,7 +60,7 @@ angular.module("bawApp.components.progressIndicator", ["bawApp.citizenScience.cs
                     element: ".progress",
                     intro: "How many items have been completed out of the total amount. ",
                     order: 3
-                });
+                }, "questionResponses");
 
                 /**
                  * Watch the total items, because it will not be ready when the controller first loads
@@ -93,6 +93,7 @@ angular.module("bawApp.components.progressIndicator", ["bawApp.citizenScience.cs
                             $scope.progress.responseCount = totalResponses;
                             self.updateProgressPercent();
                             self.refreshIn = 5;
+                            onboardingService.ready("questionResponses");
 
                         });
 

src/app/citizenScience/labels/textLabels/labels.js

@@ -21,7 +21,7 @@ angular.module("bawApp.components.citizenScienceTextLabels",
                                 order: 5
                             }
 
-                        ]);
+                        ], "questions");
                     }
                 });
 

src/app/citizenScience/labels/thumbLabels/labels.js

@@ -176,14 +176,17 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
 
                     }
 
-                ]);
+                ], "questions");
 
                 onboardingService.addCallbacks({
                     onBeforeStart: function () {
                         $scope.$broadcast("show-label-details");
                     },
                     onExit: function () {
                         $scope.$broadcast("hide-label-details");
+                    },
+                    onComplete: function () {
+                        $scope.$broadcast("hide-label-details");
                     }
                 });
 

src/app/citizenScience/labels/userInput/userInput.js

@@ -17,6 +17,7 @@ angular.module("bawApp.components.citizenScienceUserInput",
                 $scope.questionData = SampleLabels.data;
                 $scope.questionDefinition = SampleLabels.question;
 
+                onboardingService.waitFor("questions");
 
                 $scope.$watch(() => SampleLabels.question.fields.length, (newVal) => {
 

src/app/citizenScience/listen/listen.js

@@ -54,15 +54,18 @@ class CitizenScienceListenController {
                 element: "dataset-progress .btn",
                 intro: "When you have finished applying labels, use this button to go to the next clip",
                 order: 10
-
             },
             {
                 element: ".autoplay",
                 intro: "Switch this on to automatically progress to the next clip when you reach the end of the current one.",
                 order: 11
             }
 
-        ]);
+        ], "spectrogram");
+
+        $scope.$on("spectrogram-loaded", function (scope) {
+            onboardingService.ready("spectrogram");
+        });
 
         $scope.questionData = {};
 
@@ -84,7 +87,6 @@ class CitizenScienceListenController {
 
             $scope.study = studies[0];
             CitizenScienceCommon.studyData.study = $scope.study;
-
             Question.questions($scope.study.id).then(x => {
                 console.log("questions loaded", x);
 
@@ -97,17 +99,17 @@ class CitizenScienceListenController {
                 //
                 // x.data.data[0].questionData = temp;
 
+                onboardingService.ready("questions");
+
                 //TODO: update to allow multiple questions
                 $scope.questionData = x.data.data[0].questionData;
 
                 SampleLabels.init(x.data.data[0], $scope.study.id);
             });
         });
 
-
         $scope.studyTitle = {"bristlebird": "Eastern Bristlebird Search", "koala-verification": "Koala Verification"}[$scope.csProject];
 
-
         $scope.settings = {
             "bristlebird": {
                 showSite: false,
@@ -121,7 +123,6 @@ class CitizenScienceListenController {
             }
         }[$scope.csProject];
 
-
         /**
          * When the currentItem changes, change the current audio file / spectrogram to match it
          */
@@ -145,8 +146,6 @@ class CitizenScienceListenController {
 
                     $scope.sample.item = item;
 
-
-
                 }
             });
 
@@ -174,7 +173,8 @@ angular
         "bawApp.citizenScience.csLabels",
         "bawApp.components.onboarding",
         "bawApp.components.background",
-        "bawApp.citizenScience.itemInfo"
+        "bawApp.citizenScience.itemInfo",
+        "bawApp.spectrogram"
     ])
     .controller(
         "CitizenScienceListenController",

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

@@ -11,7 +11,7 @@ <h2>{{studyTitle}}
             <div class="audio-outer">
                 <div class="audio-inner">
                     <div class="spectrogram-wrapper">
-                        <img id="spectrogram" class="spectrogram" ng-src="{{media.available.image.png.url}}">
+                        <img id="spectrogram" class="spectrogram" spectrogram ng-src="{{media.available.image.png.url}}" >
                         <div position-line media="media" audio-data="audioElementModel" image-id="'spectrogram'"></div>
                     </div>
 

src/app/citizenScience/listen/spectrogram.js

@@ -0,0 +1,15 @@
+angular.module("bawApp.spectrogram", [])
+    .directive("spectrogram", ["$rootScope", function ($rootScope) {
+        return {
+            restrict: "A",
+            link: function ($scope, element, attributes) {
+                element.bind("load", function() {
+                    $rootScope.$broadcast("spectrogram-loaded", $scope);
+
+                });
+                element.bind("error", function(){
+                    console.log("spectrogram could not be loaded");
+                });
+            }
+        };
+    }]);

src/app/onboarding/_onboarding.scss

@@ -2,6 +2,16 @@
   cursor: pointer;
   opacity: 0.8;
 
+  &.loading {
+    opacity: 0.2;
+    text-shadow: 0px 0px 10px #fff;
+  }
+
+  &.ready {
+    transition: opacity 2s;
+    animation: 0.3s linear 1s wobble;
+  }
+
   &:before {
     /* questionmark: f059
        information: f05a */
@@ -12,6 +22,7 @@
 
   &:hover {
     opacity: 1;
+    transition: opacity 0.2s;
   }
 
 }
@@ -22,3 +33,11 @@ h1, h2, h3 {
   }
 }
 
+@keyframes wobble {
+  20% { -webkit-transform: rotate(-30deg) scale(1.1); transform:rotate(-30deg) scale(1.1); }
+  40% { -webkit-transform: rotate(25deg) scale(1.2); transform:rotate(25deg) scale(1.2); }
+  60% { -webkit-transform: rotate(-20deg) scale(1.2); transform:rotate(-20deg) scale(1.2); }
+  80% { -webkit-transform: rotate(15deg) scale(1.1); transform:rotate(15deg) scale(1.1); }
+  100% { -webkit-transform: rotate(0deg) scale(1); transform:rotate(0deg) scale(1); }
+}
+

src/app/onboarding/infoButton.tpl.html

@@ -1,4 +1,5 @@
 <span class="info-launch"
+      ng-class="status"
       title="Launch the tour"
       ng-click="launchTour()"
 </span>