diff --git a/src/core/overlay.js b/src/core/overlay.js index f516bfa4ae8d12c277f15094ba0a758f2a8be17b..689f533193016b6747c71cb453aff0b7490db373 100644 --- a/src/core/overlay.js +++ b/src/core/overlay.js @@ -1,5 +1,5 @@ import Position from './position'; -import { ID_OVERLAY, OVERLAY_HTML } from '../common/constants'; +import { ANIMATION_DURATION_MS, ID_OVERLAY, OVERLAY_HTML } from '../common/constants'; import { createNodeFromString } from '../common/utils'; /** @@ -19,8 +19,7 @@ export default class Overlay { this.positionToHighlight = new Position({}); // position at which layover is to be patched at this.highlightedElement = null; // currently highlighted dom element (instance of Element) this.lastHighlightedElement = null; // element that was highlighted before current one - - this.draw = this.draw.bind(this); // To pass the context of class, as it is to be used in redraw animation callback + this.hideTimer = null; this.window = window; this.document = document; @@ -53,6 +52,10 @@ export default class Overlay { return; } + // There might be hide timer from last time + // which might be getting triggered + this.window.clearTimeout(this.hideTimer); + // Trigger the hook for highlight started element.onHighlightStarted(); @@ -71,7 +74,34 @@ export default class Overlay { this.highlightedElement = element; this.positionToHighlight = position; - this.draw(); + this.showOverlay(); + + // Show the stage + this.stage.show(this.positionToHighlight); + + // Element has been highlighted + this.highlightedElement.onHighlighted(); + } + + showOverlay() { + this.node.style.opacity = `${this.options.opacity}`; + this.node.style.position = 'fixed'; + this.node.style.left = '0'; + this.node.style.top = '0'; + this.node.style.bottom = '0'; + this.node.style.right = '0'; + } + + hideOverlay() { + this.node.style.opacity = '0'; + + this.hideTimer = window.setTimeout(() => { + this.node.style.position = 'absolute'; + this.node.style.left = ''; + this.node.style.top = ''; + this.node.style.bottom = ''; + this.node.style.right = ''; + }, ANIMATION_DURATION_MS); } /** @@ -102,42 +132,20 @@ export default class Overlay { this.highlightedElement = null; this.lastHighlightedElement = null; - this.node.style.opacity = '0'; + this.hideOverlay(); this.stage.hide(); } - /** - * `draw` is called for every frame . Puts back the - * filled overlay on body (i.e. while removing existing highlight if any) and - * Slowly eases towards the item to be selected. - */ - draw() { - if (!this.highlightedElement || !this.positionToHighlight.canHighlight()) { - return; - } - - // Show the overlay - this.node.style.opacity = `${this.options.opacity}`; - - // Show the stage - this.stage.show(this.positionToHighlight); - - // Element has been highlighted - this.highlightedElement.onHighlighted(); - } - /** * Refreshes the overlay i.e. sets the size according to current window size * And moves the highlight around if necessary - * - * @param {boolean} animate */ - refresh(animate = true) { + refresh() { // If the highlighted element was there Cancel the // existing animation frame if any and highlight it again // as its position might have been changed if (this.highlightedElement) { - this.highlight(this.highlightedElement, animate); + this.highlight(this.highlightedElement); this.highlightedElement.onHighlighted(); } } diff --git a/src/driver.scss b/src/driver.scss index 3ef2f85f3cbc5b9f4e28f6f1a2a8c7d63bcfc9a7..265e72467a3e7c525230ce569fb4141bc8632ba4 100644 --- a/src/driver.scss +++ b/src/driver.scss @@ -108,15 +108,9 @@ div#driver-popover-item { } div#driver-page-overlay { - display: block; - width: 100%; - height: 100%; background: black; - top: 0; - left: 0; - position: fixed; + position: absolute; opacity: 0; - pointer-events: none; z-index: 100002 !important; // If you update this duration, make sure to update `ANIMATION_DURATION_MS` constant