Refactor resetting driver
Browse files- demo/scripts/demo.js +2 -0
- src/core/overlay.js +23 -19
demo/scripts/demo.js
CHANGED
|
@@ -110,11 +110,13 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
| 110 |
|
| 111 |
document.querySelector('#animated-tour')
|
| 112 |
.addEventListener('click', () => {
|
|
|
|
| 113 |
animatedTourDriver.start();
|
| 114 |
});
|
| 115 |
|
| 116 |
document.querySelector('#boring-tour')
|
| 117 |
.addEventListener('click', () => {
|
|
|
|
| 118 |
boringTourDriver.start();
|
| 119 |
});
|
| 120 |
|
|
|
|
| 110 |
|
| 111 |
document.querySelector('#animated-tour')
|
| 112 |
.addEventListener('click', () => {
|
| 113 |
+
boringTourDriver.reset();
|
| 114 |
animatedTourDriver.start();
|
| 115 |
});
|
| 116 |
|
| 117 |
document.querySelector('#boring-tour')
|
| 118 |
.addEventListener('click', () => {
|
| 119 |
+
animatedTourDriver.reset();
|
| 120 |
boringTourDriver.start();
|
| 121 |
});
|
| 122 |
|
src/core/overlay.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
| 1 |
-
import Position from './position';
|
| 2 |
import { ANIMATION_DURATION_MS, CLASS_NO_ANIMATION, ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
|
| 3 |
import { createNodeFromString } from '../common/utils';
|
| 4 |
|
|
@@ -15,7 +14,6 @@ export default class Overlay {
|
|
| 15 |
constructor(options, window, document) {
|
| 16 |
this.options = options;
|
| 17 |
|
| 18 |
-
this.positionToHighlight = new Position({}); // position at which layover is to be patched at
|
| 19 |
this.highlightedElement = null; // currently highlighted dom element (instance of Element)
|
| 20 |
this.lastHighlightedElement = null; // element that was highlighted before current one
|
| 21 |
this.hideTimer = null;
|
|
@@ -79,7 +77,6 @@ export default class Overlay {
|
|
| 79 |
|
| 80 |
this.lastHighlightedElement = this.highlightedElement;
|
| 81 |
this.highlightedElement = element;
|
| 82 |
-
this.positionToHighlight = position;
|
| 83 |
|
| 84 |
this.show();
|
| 85 |
|
|
@@ -104,20 +101,6 @@ export default class Overlay {
|
|
| 104 |
});
|
| 105 |
}
|
| 106 |
|
| 107 |
-
hideOverlay() {
|
| 108 |
-
this.node.style.opacity = '0';
|
| 109 |
-
|
| 110 |
-
this.hideTimer = window.setTimeout(() => {
|
| 111 |
-
this.node.style.position = 'absolute';
|
| 112 |
-
this.node.style.left = '';
|
| 113 |
-
this.node.style.top = '';
|
| 114 |
-
this.node.style.bottom = '';
|
| 115 |
-
this.node.style.right = '';
|
| 116 |
-
|
| 117 |
-
this.node.parentElement.removeChild(this.node);
|
| 118 |
-
}, ANIMATION_DURATION_MS);
|
| 119 |
-
}
|
| 120 |
-
|
| 121 |
/**
|
| 122 |
* Returns the currently selected element
|
| 123 |
* @returns {null|*}
|
|
@@ -138,7 +121,7 @@ export default class Overlay {
|
|
| 138 |
* Removes the overlay and cancel any listeners
|
| 139 |
*/
|
| 140 |
clear() {
|
| 141 |
-
|
| 142 |
if (this.highlightedElement) {
|
| 143 |
this.highlightedElement.onDeselected(true);
|
| 144 |
}
|
|
@@ -146,7 +129,28 @@ export default class Overlay {
|
|
| 146 |
this.highlightedElement = null;
|
| 147 |
this.lastHighlightedElement = null;
|
| 148 |
|
| 149 |
-
this.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 150 |
}
|
| 151 |
|
| 152 |
/**
|
|
|
|
|
|
|
| 1 |
import { ANIMATION_DURATION_MS, CLASS_NO_ANIMATION, ID_OVERLAY, OVERLAY_HTML } from '../common/constants';
|
| 2 |
import { createNodeFromString } from '../common/utils';
|
| 3 |
|
|
|
|
| 14 |
constructor(options, window, document) {
|
| 15 |
this.options = options;
|
| 16 |
|
|
|
|
| 17 |
this.highlightedElement = null; // currently highlighted dom element (instance of Element)
|
| 18 |
this.lastHighlightedElement = null; // element that was highlighted before current one
|
| 19 |
this.hideTimer = null;
|
|
|
|
| 77 |
|
| 78 |
this.lastHighlightedElement = this.highlightedElement;
|
| 79 |
this.highlightedElement = element;
|
|
|
|
| 80 |
|
| 81 |
this.show();
|
| 82 |
|
|
|
|
| 101 |
});
|
| 102 |
}
|
| 103 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 104 |
/**
|
| 105 |
* Returns the currently selected element
|
| 106 |
* @returns {null|*}
|
|
|
|
| 121 |
* Removes the overlay and cancel any listeners
|
| 122 |
*/
|
| 123 |
clear() {
|
| 124 |
+
// Deselect the highlighted element if any
|
| 125 |
if (this.highlightedElement) {
|
| 126 |
this.highlightedElement.onDeselected(true);
|
| 127 |
}
|
|
|
|
| 129 |
this.highlightedElement = null;
|
| 130 |
this.lastHighlightedElement = null;
|
| 131 |
|
| 132 |
+
if (!this.node) {
|
| 133 |
+
return;
|
| 134 |
+
}
|
| 135 |
+
|
| 136 |
+
// Clear any existing timers and remove node
|
| 137 |
+
this.window.clearTimeout(this.hideTimer);
|
| 138 |
+
|
| 139 |
+
if (this.options.animate) {
|
| 140 |
+
this.node.style.opacity = '0';
|
| 141 |
+
this.hideTimer = window.setTimeout(this.removeNode, ANIMATION_DURATION_MS);
|
| 142 |
+
} else {
|
| 143 |
+
this.removeNode();
|
| 144 |
+
}
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
/**
|
| 148 |
+
* Removes the overlay node if it exists
|
| 149 |
+
*/
|
| 150 |
+
removeNode() {
|
| 151 |
+
if (this.node && this.node.parentElement) {
|
| 152 |
+
this.node.parentElement.removeChild(this.node);
|
| 153 |
+
}
|
| 154 |
}
|
| 155 |
|
| 156 |
/**
|