feat(citsci): Improved onboarding walkthough.

updated version of angular-intro-js. New version provides a service as well as a directive, which allows more control.
Added the behaviour that it opens the label details before the walkthough starts so that elements of the label details can be included.

bower.json

@@ -32,7 +32,7 @@
     "angular-ui-ace": "bower",
 
     "c3": "git://github.com/masayuki0812/c3.git#98769492d07b6103bfc30a0254ccb1e1ec1cca50",
-    "angular-intro.js": "~3.0.1"
+    "angular-intro.js": "~3.1.2"
   },
   "dependencies": {},
   "private": true,

src/app/citizenScience/bristlebird/bristlebird.js

@@ -55,21 +55,46 @@ class BristlebirdController {
         // to be populated after getting samples from dataset
         $scope.media = null;
 
-        $scope.onboardingSteps = [
+
+        // load populate the onboarding steps as they are loaded.
+        $scope.onboarding = {};
+
+        $scope.onboarding.steps = [
             {
-                element: document.querySelector(".citizen-science .spectrogram-wrapper"),
+                element: ".citizen-science .spectrogram-wrapper",
                 intro: "This shows a picture of the audio as a spectrogram."
             },
             {
-                element: document.querySelector("dataset-progress"),
+                element: "dataset-progress button",
                 intro: "This shows how many clips you have listened do, and lets you navigate between clips"
             },
             {
-                element: document.querySelector(".autoplay"),
+                element: ".autoplay",
                 intro: "Switch this on to automatically progress to the next clip and play it."
+            },
+            {
+                element: ".citizen-science-thumb",
+                intro: "See if you can identify the events that are in these small spectrogram thumbnails in the audio clip above. " +
+                "Tap the thumbnail for a closer look and to listen to the audio."
+            },
+            {
+                element: ".label-check a",
+                intro: "Use the checkbox to indicate if the this kind of even occurs in the audio clip above",
+
             }
         ];
 
+        $scope.onboarding.callbacks = {
+            onBeforeStart: function () {
+                $scope.$broadcast("show-label-details");
+            },
+            onExit: function () {
+                $scope.$broadcast("hide-label-details");
+            }
+        };
+
+
+
         /**
          * Labels that the user can select.
          * applies one or more tags which are not shown to the user.

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

@@ -1,7 +1,7 @@
 <div class="citizen-science bristlebird">
 
     <h2>Eastern Bristlebird Search
-        <onboarding steps="onboardingSteps"></onboarding>
+        <onboarding config="onboarding"></onboarding>
     </h2>
 
     <div class="cs-main-container">

src/app/citizenScience/datasetProgress/citizenScienceSamples.js

@@ -162,7 +162,6 @@ csSamples.factory("CsSamples", [
                 var debug_message = {currentIndex: self.currentIndex, currentPageMeta: self.pages[self.pages.length - 1].meta.paging};
                 console.log("moved to next page: ", debug_message);
 
-
             },
 
             nextItemAvailable : function () {

src/app/citizenScience/thumbLabels/labels.js

@@ -22,6 +22,18 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
 
                 $scope.currentDetailsLabelId = {value: -1};
 
+                $scope.$on("show-label-details", () =>  {
+                    if ($scope.currentDetailsLabelId.value < 0) {
+                        $scope.currentDetailsLabelId.value = self.labels[0].id;
+                        $scope.$apply();
+                    }
+                });
+
+                $scope.$on("hide-label-details", () =>  {
+                    $scope.currentDetailsLabelId.value = -1;
+                    $scope.$apply();
+                });
+
                 $scope.examplesPosition = "0px";
 
                 $scope.$watch(function () {

src/app/onboarding/infoButton.tpl.html

@@ -1,6 +1,4 @@
 <span class="info-launch"
       title="Launch the tour"
       ng-click="launchTour()"
-      ng-intro-options="introOptions"
-      ng-intro-method="launchTour"
-></span>
+</span>

src/app/onboarding/onboarding.js

@@ -1,42 +1,47 @@
 /**
- * Wrapper for the angular-introjs directive with info-button and consistent styling
+ * Wrapper for the angular-introjs directive with info-button, consistent styling, onBeforeStart callback
  */
 
-angular.module("bawApp.components.onboarding", ["bawApp.citizenScience.common"])
+angular.module("bawApp.components.onboarding", ["bawApp.citizenScience.common", "angular-intro"])
     .component("onboarding", {
         templateUrl: "onboarding/infoButton.tpl.html",
         bindings: {
-            steps: "=steps",
-            options: "=options"
+            config: "=",
         },
         controller: [
             "$scope",
-            function ($scope) {
+            "ngIntroService",
+            "$timeout",
+            function ($scope, ngIntroService, $timeout) {
 
-                //var self = this;
+                var self = this;
 
-                $scope.CompletedEvent = function (scope) {
-                    console.log("Completed Event called");
-                };
+                // set all the callbacks
 
-                $scope.ExitEvent = function (scope) {
-                    console.log("Exit Event called");
-                };
+                Object.keys(self.config.callbacks).forEach((cb) => {
+                    if (angular.isFunction(ngIntroService[cb])) {
+                        ngIntroService[cb](self.config.callbacks[cb]);
+                    } else {
+                        console.log("no function", cb);
+                    }
 
-                $scope.ChangeEvent = function (targetElement, scope) {
-                    console.log("Change Event called");
-                    console.log(targetElement);  //The target element
-                    console.log(this);  //The IntroJS object
-                };
+                });
 
-                $scope.BeforeChangeEvent = function (targetElement, scope) {
-                    console.log("Before Change Event called");
-                    console.log(targetElement);
-                };
+                $scope.launchTour = function launchTour () {
+
+                  console.log("launchtour");
+
+                    // it does not seem possible to modify the elements in the steps list
+                    // after the intro has started. If an intro step include an element that is hidden when
+                    // the intro starts, then that step will not display correctly. Dom manipulation must be finished
+                    // before the introJS initialises (which is before any introJs callback.
+                    if (angular.isFunction(self.config.callbacks.onBeforeStart)) {
+                        self.config.callbacks.onBeforeStart.call();
+                        $timeout(() => {ngIntroService.start();});
+                    } else {
+                        ngIntroService.start();
+                    }
 
-                $scope.AfterChangeEvent = function (targetElement, scope) {
-                    console.log("After Change Event called");
-                    console.log(targetElement);
                 };
 
                 this.introOptionsDefaults = {
@@ -50,20 +55,9 @@ angular.module("bawApp.components.onboarding", ["bawApp.citizenScience.common"])
                     doneLabel: "Thanks"
                 };
 
-
-                $scope.introOptions = Object.assign({}, this.introOptionsDefaults, this.options);
-
-                if (Array.isArray(this.steps)) {
-
-                        this.steps = this.steps.map(function (step) {
-                            if (typeof step.element === "string") {
-                                step.element = document.querySelector(step.element);
-                            }
-                            return step;
-                        });
-
-                    $scope.introOptions.steps = this.steps;
-                }
+                var options = Object.assign({}, this.introOptionsDefaults, this.options);
+                options.steps = self.config.steps;
+                ngIntroService.setOptions(options);
 
             }]
     });