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 |
/**
|