Add missing access specifiers
Browse files- src/core/element.js +22 -0
- src/core/overlay.js +11 -0
- src/core/popover.js +16 -0
- src/core/position.js +2 -0
- src/core/stage.js +4 -0
src/core/element.js
CHANGED
@@ -39,6 +39,7 @@ export default class Element {
|
|
39 |
/**
|
40 |
* Gets the screen co-ordinates (x,y) for the current dom element
|
41 |
* @returns {{x: number, y: number}}
|
|
|
42 |
*/
|
43 |
getScreenCoordinates() {
|
44 |
let tempNode = this.node;
|
@@ -59,6 +60,7 @@ export default class Element {
|
|
59 |
/**
|
60 |
* Checks if the current element is visible in viewport
|
61 |
* @returns {boolean}
|
|
|
62 |
*/
|
63 |
isInView() {
|
64 |
let top = this.node.offsetTop;
|
@@ -84,6 +86,7 @@ export default class Element {
|
|
84 |
|
85 |
/**
|
86 |
* Manually scrolls to the position of element if `scrollIntoView` fails
|
|
|
87 |
*/
|
88 |
scrollManually() {
|
89 |
const elementRect = this.node.getBoundingClientRect();
|
@@ -95,6 +98,7 @@ export default class Element {
|
|
95 |
|
96 |
/**
|
97 |
* Brings the element to middle of the view port if not in view
|
|
|
98 |
*/
|
99 |
bringInView() {
|
100 |
if (this.isInView()) {
|
@@ -121,6 +125,7 @@ export default class Element {
|
|
121 |
/**
|
122 |
* Gets the calculated position on screen, around which
|
123 |
* we need to draw
|
|
|
124 |
*/
|
125 |
getCalculatedPosition() {
|
126 |
const coordinates = this.getScreenCoordinates();
|
@@ -146,6 +151,7 @@ export default class Element {
|
|
146 |
/**
|
147 |
* Is called when element is about to be deselected
|
148 |
* i.e. when moving the focus to next element of closing
|
|
|
149 |
*/
|
150 |
onDeselected(hideStage = false) {
|
151 |
this.hidePopover();
|
@@ -168,6 +174,7 @@ export default class Element {
|
|
168 |
* Checks if the given element is same as the current element
|
169 |
* @param {Element} element
|
170 |
* @returns {boolean}
|
|
|
171 |
*/
|
172 |
isSame(element) {
|
173 |
if (!element || !element.node) {
|
@@ -179,6 +186,7 @@ export default class Element {
|
|
179 |
|
180 |
/**
|
181 |
* Is called when the element is about to be highlighted
|
|
|
182 |
*/
|
183 |
onHighlightStarted() {
|
184 |
if (this.options.onHighlightStarted) {
|
@@ -188,6 +196,7 @@ export default class Element {
|
|
188 |
|
189 |
/**
|
190 |
* Is called when the element has been successfully highlighted
|
|
|
191 |
*/
|
192 |
onHighlighted() {
|
193 |
this.showPopover();
|
@@ -213,6 +222,7 @@ export default class Element {
|
|
213 |
|
214 |
/**
|
215 |
* Shows the stage behind the element
|
|
|
216 |
*/
|
217 |
showStage() {
|
218 |
this.stage.show(this.getCalculatedPosition());
|
@@ -221,15 +231,24 @@ export default class Element {
|
|
221 |
/**
|
222 |
* Gets the DOM Element behind this element
|
223 |
* @returns {Node|HTMLElement|*}
|
|
|
224 |
*/
|
225 |
getNode() {
|
226 |
return this.node;
|
227 |
}
|
228 |
|
|
|
|
|
|
|
|
|
229 |
hideStage() {
|
230 |
this.stage.hide();
|
231 |
}
|
232 |
|
|
|
|
|
|
|
|
|
233 |
hidePopover() {
|
234 |
if (!this.popover) {
|
235 |
return;
|
@@ -240,6 +259,7 @@ export default class Element {
|
|
240 |
|
241 |
/**
|
242 |
* Shows the popover on the current element
|
|
|
243 |
*/
|
244 |
showPopover() {
|
245 |
if (!this.popover) {
|
@@ -262,6 +282,7 @@ export default class Element {
|
|
262 |
|
263 |
/**
|
264 |
* @returns {{height: number, width: number}}
|
|
|
265 |
*/
|
266 |
getFullPageSize() {
|
267 |
// eslint-disable-next-line prefer-destructuring
|
@@ -277,6 +298,7 @@ export default class Element {
|
|
277 |
/**
|
278 |
* Gets the size for popover
|
279 |
* @returns {{height: number, width: number}}
|
|
|
280 |
*/
|
281 |
getSize() {
|
282 |
return {
|
|
|
39 |
/**
|
40 |
* Gets the screen co-ordinates (x,y) for the current dom element
|
41 |
* @returns {{x: number, y: number}}
|
42 |
+
* @private
|
43 |
*/
|
44 |
getScreenCoordinates() {
|
45 |
let tempNode = this.node;
|
|
|
60 |
/**
|
61 |
* Checks if the current element is visible in viewport
|
62 |
* @returns {boolean}
|
63 |
+
* @private
|
64 |
*/
|
65 |
isInView() {
|
66 |
let top = this.node.offsetTop;
|
|
|
86 |
|
87 |
/**
|
88 |
* Manually scrolls to the position of element if `scrollIntoView` fails
|
89 |
+
* @private
|
90 |
*/
|
91 |
scrollManually() {
|
92 |
const elementRect = this.node.getBoundingClientRect();
|
|
|
98 |
|
99 |
/**
|
100 |
* Brings the element to middle of the view port if not in view
|
101 |
+
* @private
|
102 |
*/
|
103 |
bringInView() {
|
104 |
if (this.isInView()) {
|
|
|
125 |
/**
|
126 |
* Gets the calculated position on screen, around which
|
127 |
* we need to draw
|
128 |
+
* @public
|
129 |
*/
|
130 |
getCalculatedPosition() {
|
131 |
const coordinates = this.getScreenCoordinates();
|
|
|
151 |
/**
|
152 |
* Is called when element is about to be deselected
|
153 |
* i.e. when moving the focus to next element of closing
|
154 |
+
* @public
|
155 |
*/
|
156 |
onDeselected(hideStage = false) {
|
157 |
this.hidePopover();
|
|
|
174 |
* Checks if the given element is same as the current element
|
175 |
* @param {Element} element
|
176 |
* @returns {boolean}
|
177 |
+
* @public
|
178 |
*/
|
179 |
isSame(element) {
|
180 |
if (!element || !element.node) {
|
|
|
186 |
|
187 |
/**
|
188 |
* Is called when the element is about to be highlighted
|
189 |
+
* @public
|
190 |
*/
|
191 |
onHighlightStarted() {
|
192 |
if (this.options.onHighlightStarted) {
|
|
|
196 |
|
197 |
/**
|
198 |
* Is called when the element has been successfully highlighted
|
199 |
+
* @public
|
200 |
*/
|
201 |
onHighlighted() {
|
202 |
this.showPopover();
|
|
|
222 |
|
223 |
/**
|
224 |
* Shows the stage behind the element
|
225 |
+
* @public
|
226 |
*/
|
227 |
showStage() {
|
228 |
this.stage.show(this.getCalculatedPosition());
|
|
|
231 |
/**
|
232 |
* Gets the DOM Element behind this element
|
233 |
* @returns {Node|HTMLElement|*}
|
234 |
+
* @public
|
235 |
*/
|
236 |
getNode() {
|
237 |
return this.node;
|
238 |
}
|
239 |
|
240 |
+
/**
|
241 |
+
* Hides the stage
|
242 |
+
* @public
|
243 |
+
*/
|
244 |
hideStage() {
|
245 |
this.stage.hide();
|
246 |
}
|
247 |
|
248 |
+
/**
|
249 |
+
* Hides the popover if possible
|
250 |
+
* @public
|
251 |
+
*/
|
252 |
hidePopover() {
|
253 |
if (!this.popover) {
|
254 |
return;
|
|
|
259 |
|
260 |
/**
|
261 |
* Shows the popover on the current element
|
262 |
+
* @public
|
263 |
*/
|
264 |
showPopover() {
|
265 |
if (!this.popover) {
|
|
|
282 |
|
283 |
/**
|
284 |
* @returns {{height: number, width: number}}
|
285 |
+
* @public
|
286 |
*/
|
287 |
getFullPageSize() {
|
288 |
// eslint-disable-next-line prefer-destructuring
|
|
|
298 |
/**
|
299 |
* Gets the size for popover
|
300 |
* @returns {{height: number, width: number}}
|
301 |
+
* @public
|
302 |
*/
|
303 |
getSize() {
|
304 |
return {
|
src/core/overlay.js
CHANGED
@@ -26,6 +26,7 @@ export default class Overlay {
|
|
26 |
|
27 |
/**
|
28 |
* Prepares the overlay
|
|
|
29 |
*/
|
30 |
makeNode() {
|
31 |
let pageOverlay = this.document.getElementById(ID_OVERLAY);
|
@@ -47,6 +48,7 @@ export default class Overlay {
|
|
47 |
/**
|
48 |
* Highlights the dom element on the screen
|
49 |
* @param {Element} element
|
|
|
50 |
*/
|
51 |
highlight(element) {
|
52 |
if (!element || !element.node) {
|
@@ -86,6 +88,10 @@ export default class Overlay {
|
|
86 |
this.highlightedElement.onHighlighted();
|
87 |
}
|
88 |
|
|
|
|
|
|
|
|
|
89 |
show() {
|
90 |
if (this.node && this.node.parentElement) {
|
91 |
return;
|
@@ -106,6 +112,7 @@ export default class Overlay {
|
|
106 |
/**
|
107 |
* Returns the currently selected element
|
108 |
* @returns {null|*}
|
|
|
109 |
*/
|
110 |
getHighlightedElement() {
|
111 |
return this.highlightedElement;
|
@@ -114,6 +121,7 @@ export default class Overlay {
|
|
114 |
/**
|
115 |
* Gets the element that was highlighted before current element
|
116 |
* @returns {null|*}
|
|
|
117 |
*/
|
118 |
getLastHighlightedElement() {
|
119 |
return this.lastHighlightedElement;
|
@@ -121,6 +129,7 @@ export default class Overlay {
|
|
121 |
|
122 |
/**
|
123 |
* Removes the overlay and cancel any listeners
|
|
|
124 |
*/
|
125 |
clear(immediate = false) {
|
126 |
// Deselect the highlighted element if any
|
@@ -149,6 +158,7 @@ export default class Overlay {
|
|
149 |
|
150 |
/**
|
151 |
* Removes the overlay node if it exists
|
|
|
152 |
*/
|
153 |
removeNode() {
|
154 |
if (this.node && this.node.parentElement) {
|
@@ -159,6 +169,7 @@ export default class Overlay {
|
|
159 |
/**
|
160 |
* Refreshes the overlay i.e. sets the size according to current window size
|
161 |
* And moves the highlight around if necessary
|
|
|
162 |
*/
|
163 |
refresh() {
|
164 |
// If no highlighted element, cancel the refresh
|
|
|
26 |
|
27 |
/**
|
28 |
* Prepares the overlay
|
29 |
+
* @private
|
30 |
*/
|
31 |
makeNode() {
|
32 |
let pageOverlay = this.document.getElementById(ID_OVERLAY);
|
|
|
48 |
/**
|
49 |
* Highlights the dom element on the screen
|
50 |
* @param {Element} element
|
51 |
+
* @public
|
52 |
*/
|
53 |
highlight(element) {
|
54 |
if (!element || !element.node) {
|
|
|
88 |
this.highlightedElement.onHighlighted();
|
89 |
}
|
90 |
|
91 |
+
/**
|
92 |
+
* Shows the overlay on whole screen
|
93 |
+
* @public
|
94 |
+
*/
|
95 |
show() {
|
96 |
if (this.node && this.node.parentElement) {
|
97 |
return;
|
|
|
112 |
/**
|
113 |
* Returns the currently selected element
|
114 |
* @returns {null|*}
|
115 |
+
* @public
|
116 |
*/
|
117 |
getHighlightedElement() {
|
118 |
return this.highlightedElement;
|
|
|
121 |
/**
|
122 |
* Gets the element that was highlighted before current element
|
123 |
* @returns {null|*}
|
124 |
+
* @public
|
125 |
*/
|
126 |
getLastHighlightedElement() {
|
127 |
return this.lastHighlightedElement;
|
|
|
129 |
|
130 |
/**
|
131 |
* Removes the overlay and cancel any listeners
|
132 |
+
* @public
|
133 |
*/
|
134 |
clear(immediate = false) {
|
135 |
// Deselect the highlighted element if any
|
|
|
158 |
|
159 |
/**
|
160 |
* Removes the overlay node if it exists
|
161 |
+
* @private
|
162 |
*/
|
163 |
removeNode() {
|
164 |
if (this.node && this.node.parentElement) {
|
|
|
169 |
/**
|
170 |
* Refreshes the overlay i.e. sets the size according to current window size
|
171 |
* And moves the highlight around if necessary
|
172 |
+
* @public
|
173 |
*/
|
174 |
refresh() {
|
175 |
// If no highlighted element, cancel the refresh
|
src/core/popover.js
CHANGED
@@ -47,6 +47,7 @@ export default class Popover extends Element {
|
|
47 |
|
48 |
/**
|
49 |
* Prepares the dom element for popover
|
|
|
50 |
*/
|
51 |
makeNode() {
|
52 |
let popover = this.document.getElementById(ID_POPOVER);
|
@@ -65,10 +66,18 @@ export default class Popover extends Element {
|
|
65 |
this.closeBtnNode = popover.querySelector(`.${CLASS_CLOSE_BTN}`);
|
66 |
}
|
67 |
|
|
|
|
|
|
|
|
|
68 |
hide() {
|
69 |
this.node.style.display = 'none';
|
70 |
}
|
71 |
|
|
|
|
|
|
|
|
|
72 |
setInitialState() {
|
73 |
this.node.style.display = 'block';
|
74 |
this.node.style.left = '0';
|
@@ -85,6 +94,7 @@ export default class Popover extends Element {
|
|
85 |
/**
|
86 |
* Shows the popover at the given position
|
87 |
* @param {Position} position
|
|
|
88 |
*/
|
89 |
show(position) {
|
90 |
this.setInitialState();
|
@@ -119,6 +129,7 @@ export default class Popover extends Element {
|
|
119 |
/**
|
120 |
* Enables, disables buttons, sets the text and
|
121 |
* decides if to show them or not
|
|
|
122 |
*/
|
123 |
renderButtons() {
|
124 |
this.nextBtnNode.innerHTML = this.options.nextBtnText;
|
@@ -149,6 +160,7 @@ export default class Popover extends Element {
|
|
149 |
/**
|
150 |
* Shows the popover on the left of the given position
|
151 |
* @param {Position} elementPosition
|
|
|
152 |
*/
|
153 |
positionOnLeft(elementPosition) {
|
154 |
const popoverWidth = this.getSize().width;
|
@@ -165,6 +177,7 @@ export default class Popover extends Element {
|
|
165 |
/**
|
166 |
* Shows the popover on the right of the given position
|
167 |
* @param {Position} elementPosition
|
|
|
168 |
*/
|
169 |
positionOnRight(elementPosition) {
|
170 |
const popoverMargin = this.options.padding + 10; // adding 10 to give it a little distance from the element
|
@@ -180,6 +193,7 @@ export default class Popover extends Element {
|
|
180 |
/**
|
181 |
* Shows the popover on the top of the given position
|
182 |
* @param {Position} elementPosition
|
|
|
183 |
*/
|
184 |
positionOnTop(elementPosition) {
|
185 |
const popoverHeight = this.getSize().height;
|
@@ -196,6 +210,7 @@ export default class Popover extends Element {
|
|
196 |
/**
|
197 |
* Shows the popover on the bottom of the given position
|
198 |
* @param {Position} elementPosition
|
|
|
199 |
*/
|
200 |
positionOnBottom(elementPosition) {
|
201 |
const popoverMargin = this.options.padding + 10; // adding 10 to give it a little distance from the element
|
@@ -213,6 +228,7 @@ export default class Popover extends Element {
|
|
213 |
* such that the element and popover remain in view
|
214 |
* @todo add the left and right positioning decisions
|
215 |
* @param {Position} elementPosition
|
|
|
216 |
*/
|
217 |
autoPosition(elementPosition) {
|
218 |
const pageSize = this.getFullPageSize();
|
|
|
47 |
|
48 |
/**
|
49 |
* Prepares the dom element for popover
|
50 |
+
* @private
|
51 |
*/
|
52 |
makeNode() {
|
53 |
let popover = this.document.getElementById(ID_POPOVER);
|
|
|
66 |
this.closeBtnNode = popover.querySelector(`.${CLASS_CLOSE_BTN}`);
|
67 |
}
|
68 |
|
69 |
+
/**
|
70 |
+
* Hides the popover
|
71 |
+
* @public
|
72 |
+
*/
|
73 |
hide() {
|
74 |
this.node.style.display = 'none';
|
75 |
}
|
76 |
|
77 |
+
/**
|
78 |
+
* Sets the default state for the popover
|
79 |
+
* @private
|
80 |
+
*/
|
81 |
setInitialState() {
|
82 |
this.node.style.display = 'block';
|
83 |
this.node.style.left = '0';
|
|
|
94 |
/**
|
95 |
* Shows the popover at the given position
|
96 |
* @param {Position} position
|
97 |
+
* @public
|
98 |
*/
|
99 |
show(position) {
|
100 |
this.setInitialState();
|
|
|
129 |
/**
|
130 |
* Enables, disables buttons, sets the text and
|
131 |
* decides if to show them or not
|
132 |
+
* @private
|
133 |
*/
|
134 |
renderButtons() {
|
135 |
this.nextBtnNode.innerHTML = this.options.nextBtnText;
|
|
|
160 |
/**
|
161 |
* Shows the popover on the left of the given position
|
162 |
* @param {Position} elementPosition
|
163 |
+
* @private
|
164 |
*/
|
165 |
positionOnLeft(elementPosition) {
|
166 |
const popoverWidth = this.getSize().width;
|
|
|
177 |
/**
|
178 |
* Shows the popover on the right of the given position
|
179 |
* @param {Position} elementPosition
|
180 |
+
* @private
|
181 |
*/
|
182 |
positionOnRight(elementPosition) {
|
183 |
const popoverMargin = this.options.padding + 10; // adding 10 to give it a little distance from the element
|
|
|
193 |
/**
|
194 |
* Shows the popover on the top of the given position
|
195 |
* @param {Position} elementPosition
|
196 |
+
* @private
|
197 |
*/
|
198 |
positionOnTop(elementPosition) {
|
199 |
const popoverHeight = this.getSize().height;
|
|
|
210 |
/**
|
211 |
* Shows the popover on the bottom of the given position
|
212 |
* @param {Position} elementPosition
|
213 |
+
* @private
|
214 |
*/
|
215 |
positionOnBottom(elementPosition) {
|
216 |
const popoverMargin = this.options.padding + 10; // adding 10 to give it a little distance from the element
|
|
|
228 |
* such that the element and popover remain in view
|
229 |
* @todo add the left and right positioning decisions
|
230 |
* @param {Position} elementPosition
|
231 |
+
* @private
|
232 |
*/
|
233 |
autoPosition(elementPosition) {
|
234 |
const pageSize = this.getFullPageSize();
|
src/core/position.js
CHANGED
@@ -24,6 +24,7 @@ export default class Position {
|
|
24 |
/**
|
25 |
* Checks if the position is valid to be highlighted
|
26 |
* @returns {boolean}
|
|
|
27 |
*/
|
28 |
canHighlight() {
|
29 |
return this.left < this.right && this.top < this.bottom;
|
@@ -33,6 +34,7 @@ export default class Position {
|
|
33 |
* Checks if the given position is equal to the passed position
|
34 |
* @param position Position
|
35 |
* @returns {boolean}
|
|
|
36 |
*/
|
37 |
equals(position) {
|
38 |
return Math.round(this.left) === Math.round(position.left) &&
|
|
|
24 |
/**
|
25 |
* Checks if the position is valid to be highlighted
|
26 |
* @returns {boolean}
|
27 |
+
* @public
|
28 |
*/
|
29 |
canHighlight() {
|
30 |
return this.left < this.right && this.top < this.bottom;
|
|
|
34 |
* Checks if the given position is equal to the passed position
|
35 |
* @param position Position
|
36 |
* @returns {boolean}
|
37 |
+
* @public
|
38 |
*/
|
39 |
equals(position) {
|
40 |
return Math.round(this.left) === Math.round(position.left) &&
|
src/core/stage.js
CHANGED
@@ -22,6 +22,7 @@ export default class Stage extends Element {
|
|
22 |
|
23 |
/**
|
24 |
* Prepares the DOM element if not already there
|
|
|
25 |
*/
|
26 |
makeNode() {
|
27 |
let stage = this.document.getElementById(ID_STAGE);
|
@@ -41,6 +42,7 @@ export default class Stage extends Element {
|
|
41 |
|
42 |
/**
|
43 |
* Simply hides the stage
|
|
|
44 |
*/
|
45 |
hide() {
|
46 |
if (!this.node || !this.node.parentElement) {
|
@@ -52,6 +54,7 @@ export default class Stage extends Element {
|
|
52 |
|
53 |
/**
|
54 |
* Makes it visible and sets the default properties
|
|
|
55 |
*/
|
56 |
setInitialStyle() {
|
57 |
this.node.style.display = 'block';
|
@@ -64,6 +67,7 @@ export default class Stage extends Element {
|
|
64 |
/**
|
65 |
* Shows the stage at provided position
|
66 |
* @param {Position} position
|
|
|
67 |
*/
|
68 |
show(position) {
|
69 |
this.makeNode();
|
|
|
22 |
|
23 |
/**
|
24 |
* Prepares the DOM element if not already there
|
25 |
+
* @private
|
26 |
*/
|
27 |
makeNode() {
|
28 |
let stage = this.document.getElementById(ID_STAGE);
|
|
|
42 |
|
43 |
/**
|
44 |
* Simply hides the stage
|
45 |
+
* @public
|
46 |
*/
|
47 |
hide() {
|
48 |
if (!this.node || !this.node.parentElement) {
|
|
|
54 |
|
55 |
/**
|
56 |
* Makes it visible and sets the default properties
|
57 |
+
* @private
|
58 |
*/
|
59 |
setInitialStyle() {
|
60 |
this.node.style.display = 'block';
|
|
|
67 |
/**
|
68 |
* Shows the stage at provided position
|
69 |
* @param {Position} position
|
70 |
+
* @public
|
71 |
*/
|
72 |
show(position) {
|
73 |
this.makeNode();
|