opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-10-31 20:31:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cancel any pending animations on quick movements

Browse Source
This commit is contained in:
Kamran Ahmed
2018-03-14 00:48:51 +01:00
parent 7b148cfb08
commit 5e596cb61d
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/constants.js
+1 -1
View File
@@ -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';
src/core/element.js
+9 -4
View File
@@ -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);
}