kamrify commited on
Commit
4be3ef9
·
1 Parent(s): 7b0a7ff

Refactor resetting driver

Browse files
Files changed (2) hide show
  1. demo/scripts/demo.js +2 -0
  2. 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
- this.positionToHighlight = new Position();
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.hideOverlay();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
  /**