From 5e596cb61d061b70431914d3fa2faab2018b9868 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 13 Mar 2018 02:32:08 +0100
Subject: [PATCH] Cancel any pending animations on quick movements

---
 src/common/constants.js |  2 +-
 src/core/element.js     | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/common/constants.js b/src/common/constants.js
index 8070b1f..897fafc 100644
--- a/src/common/constants.js
+++ b/src/common/constants.js
@@ -10,7 +10,7 @@ export const ID_OVERLAY = 'driver-page-overlay';
 export const ID_STAGE = 'driver-highlighted-element-stage';
 export const ID_POPOVER = 'driver-popover-item';
 
-export const DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
+export const CLASS_DRIVER_HIGHLIGHTED_ELEMENT = 'driver-highlighted-element';
 
 export const CLASS_POPOVER_TIP = 'driver-popover-tip';
 export const CLASS_POPOVER_TITLE = 'driver-popover-title';
diff --git a/src/core/element.js b/src/core/element.js
index 42af5c9..2371baf 100644
--- a/src/core/element.js
+++ b/src/core/element.js
@@ -1,5 +1,5 @@
 import Position from './position';
-import { ANIMATION_DURATION_MS, DRIVER_HIGHLIGHTED_ELEMENT } from '../common/constants';
+import { ANIMATION_DURATION_MS, CLASS_DRIVER_HIGHLIGHTED_ELEMENT } from '../common/constants';
 
 /**
  * Wrapper around DOMElements to enrich them
@@ -23,6 +23,8 @@ export default class Element {
     this.overlay = overlay;
     this.popover = popover;
 
+    this.animationTimeout = null;
+
     this.highlightFinished = false; // To track when the element has fully highlighted
   }
 
@@ -140,7 +142,10 @@ export default class Element {
   onDeselected() {
     this.hidePopover();
 
-    this.node.classList.remove(DRIVER_HIGHLIGHTED_ELEMENT);
+    this.node.classList.remove(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
+
+    // If there was any animation in progress, cancel that
+    this.window.clearTimeout(this.animationTimeout);
 
     this.highlightFinished = false;
 
@@ -170,7 +175,7 @@ export default class Element {
   onHighlighted() {
     this.showPopover();
 
-    this.node.classList.add('driver-highlighted-element');
+    this.node.classList.add(CLASS_DRIVER_HIGHLIGHTED_ELEMENT);
 
     this.highlightFinished = true;
 
@@ -228,7 +233,7 @@ export default class Element {
     // For first highlight, show it immediately because there won't be any animation
     const animationDuration = !this.overlay.lastHighlightedElement ? 0 : ANIMATION_DURATION_MS * 2;
 
-    window.setTimeout(() => {
+    this.animationTimeout = this.window.setTimeout(() => {
       this.popover.show(showAtPosition);
     }, animationDuration);
   }