Merge pull request #642 from ProjectSidewalk/541-onboarding-zoom-in-f…

…eature 541 Onboarding New Zoom In Feature
ProjectSidewalk · Jun 7, 2017 · 796de4b · 796de4b
2 parents eea6abc + ba5e22a
commit 796de4b
Show file tree

Hide file tree

Showing 4 changed files with 254 additions and 83 deletions.
diff --git a/public/javascripts/SVLabel/css/svl.css b/public/javascripts/SVLabel/css/svl.css
@@ -18,6 +18,10 @@ text {
     font-weight: bold;
 }
 
+.highlight-100 {
+    background: rgba(255, 255, 0, 1) !important;
+}
+
 .highlight-50 {
     background: rgba(255, 255, 0, 0.5) !important;
 }

diff --git a/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js b/public/javascripts/SVLabel/src/SVLabel/onboarding/Onboarding.js
@@ -394,6 +394,8 @@ function Onboarding (svl, actionStack, audioEffect, compass, form, handAnimation
                 _visitSelectLabelTypeState(state, annotationListener);
             } else if (state.properties.action == "LabelAccessibilityAttribute") {
                 _visitLabelAccessibilityAttributeState(state, annotationListener);
+            } else if (state.properties.action == "Zoom") {
+                _visitZoomState(state, annotationListener);
             } else if (state.properties.action == "RateSeverity" || state.properties.action == "RedoRateSeverity") {
                 _visitRateSeverity(state, annotationListener);
             } else if (state.properties.action == "AdjustHeadingAngle") {
@@ -599,6 +601,57 @@ function Onboarding (svl, actionStack, audioEffect, compass, form, handAnimation
         $(document).on('ModeSwitch_' + event, callback);
     }
 
+    /**
+     * Tell the user to zoom in/out.
+     * @param state
+     * @param listener
+     * @private
+     */
+    function _visitZoomState(state, listener) {
+        var zoomType = state.properties.type;
+        var $target;
+
+        if (zoomType == "in") {
+            $target = zoomControl.getZoomInUI();
+            zoomControl.blinkZoomIn();
+            zoomControl.unlockDisableZoomIn();
+            zoomControl.enableZoomIn();
+            zoomControl.lockDisableZoomIn();
+
+        } else {
+            $target = zoomControl.getZoomOutUI();
+            zoomControl.blinkZoomOut();
+
+            // Enable zoom-out
+            zoomControl.unlockDisableZoomOut();
+            zoomControl.enableZoomOut();
+            zoomControl.lockDisableZoomOut();
+        }
+
+        var callback = function () {
+            zoomControl.stopBlinking();
+            if (zoomType == "in") {
+                // Disable zoom-in
+                zoomControl.unlockDisableZoomIn();
+                zoomControl.disableZoomIn();
+                zoomControl.lockDisableZoomIn();
+            }
+            else {
+                // Disable zoom-out
+                zoomControl.unlockDisableZoomOut();
+                zoomControl.disableZoomOut();
+                zoomControl.lockDisableZoomOut();
+            }
+            $target.off("click", callback);
+
+            if (listener) google.maps.event.removeListener(listener);
+            next(state.transition);
+        };
+
+        $target.on("click", callback);
+
+    }
+
     /**
      * Tell the user to label the target attribute.
      * @param state