Popver initialization
Browse files- index.html +1 -1
- src/popover.ts +85 -61
- src/style.css +14 -0
index.html
CHANGED
@@ -289,7 +289,7 @@ npm install driver.js</pre
|
|
289 |
title: "driver.js",
|
290 |
description: "Highlight anything, anywhere on the page",
|
291 |
align: "end",
|
292 |
-
|
293 |
},
|
294 |
});
|
295 |
});
|
|
|
289 |
title: "driver.js",
|
290 |
description: "Highlight anything, anywhere on the page",
|
291 |
align: "end",
|
292 |
+
side: "top",
|
293 |
},
|
294 |
});
|
295 |
});
|
src/popover.ts
CHANGED
@@ -1,98 +1,122 @@
|
|
1 |
import { bringInView } from "./utils";
|
2 |
|
|
|
|
|
|
|
3 |
export type Popover = {
|
4 |
title?: string;
|
5 |
description: string;
|
6 |
-
|
7 |
-
align?:
|
8 |
};
|
9 |
|
10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
11 |
|
12 |
-
|
13 |
-
if (!popoverEl) {
|
14 |
-
const popover = createPopover();
|
15 |
-
document.body.appendChild(popover.popoverWrapper);
|
16 |
|
17 |
-
|
|
|
|
|
|
|
18 |
}
|
19 |
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
|
|
|
|
25 |
|
26 |
-
refreshPopover();
|
27 |
-
bringInView(
|
28 |
}
|
29 |
|
30 |
-
export function refreshPopover() {
|
31 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
32 |
}
|
33 |
|
34 |
-
function
|
35 |
-
|
36 |
-
|
|
|
|
|
37 |
|
38 |
-
const
|
39 |
-
|
40 |
|
41 |
-
const
|
42 |
-
|
43 |
-
|
44 |
|
45 |
-
const
|
46 |
-
|
47 |
-
|
48 |
|
49 |
-
const
|
50 |
-
|
51 |
|
52 |
-
const
|
53 |
-
|
54 |
-
|
55 |
|
56 |
-
const
|
57 |
-
|
58 |
|
59 |
-
const
|
60 |
-
|
61 |
-
|
62 |
|
63 |
-
const
|
64 |
-
|
65 |
-
|
66 |
|
67 |
-
|
68 |
-
|
69 |
|
70 |
-
|
71 |
-
|
72 |
|
73 |
-
|
74 |
-
|
75 |
-
|
76 |
-
|
77 |
|
78 |
return {
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
};
|
89 |
}
|
90 |
|
91 |
export function destroyPopover() {
|
92 |
-
if (!
|
93 |
return;
|
94 |
}
|
95 |
|
96 |
-
|
97 |
-
|
98 |
}
|
|
|
1 |
import { bringInView } from "./utils";
|
2 |
|
3 |
+
export type Side = "top" | "right" | "bottom" | "left";
|
4 |
+
export type Alignment = "start" | "center" | "end";
|
5 |
+
|
6 |
export type Popover = {
|
7 |
title?: string;
|
8 |
description: string;
|
9 |
+
side?: Side;
|
10 |
+
align?: Alignment;
|
11 |
};
|
12 |
|
13 |
+
type PopoverDOM = {
|
14 |
+
wrapper: HTMLElement;
|
15 |
+
tip: HTMLElement;
|
16 |
+
title: HTMLElement;
|
17 |
+
description: HTMLElement;
|
18 |
+
footer: HTMLElement;
|
19 |
+
previousButton: HTMLElement;
|
20 |
+
nextButton: HTMLElement;
|
21 |
+
closeButton: HTMLElement;
|
22 |
+
footerButtons: HTMLElement;
|
23 |
+
};
|
24 |
|
25 |
+
let popover: PopoverDOM | undefined;
|
|
|
|
|
|
|
26 |
|
27 |
+
export function renderPopover(element: Element) {
|
28 |
+
if (!popover) {
|
29 |
+
popover = createPopover();
|
30 |
+
document.body.appendChild(popover.wrapper);
|
31 |
}
|
32 |
|
33 |
+
const popoverWrapper = popover.wrapper;
|
34 |
+
|
35 |
+
popoverWrapper.style.display = "block";
|
36 |
+
popoverWrapper.style.left = "0";
|
37 |
+
popoverWrapper.style.top = "0";
|
38 |
+
popoverWrapper.style.bottom = "";
|
39 |
+
popoverWrapper.style.right = "";
|
40 |
|
41 |
+
refreshPopover(element);
|
42 |
+
bringInView(popoverWrapper);
|
43 |
}
|
44 |
|
45 |
+
export function refreshPopover(element: Element) {
|
46 |
+
if (!popover) {
|
47 |
+
return;
|
48 |
+
}
|
49 |
+
|
50 |
+
const popoverTip = popover.tip;
|
51 |
+
|
52 |
+
// const position = calculatePopoverPosition(element);
|
53 |
+
popoverTip?.classList.add("driver-popover-tip-left");
|
54 |
}
|
55 |
|
56 |
+
function calculatePopoverPosition(element: Element) {}
|
57 |
+
|
58 |
+
function createPopover(): PopoverDOM {
|
59 |
+
const wrapper = document.createElement("div");
|
60 |
+
wrapper.classList.add("driver-popover");
|
61 |
|
62 |
+
const tip = document.createElement("div");
|
63 |
+
tip.classList.add("driver-popover-tip");
|
64 |
|
65 |
+
const title = document.createElement("div");
|
66 |
+
title.classList.add("driver-popover-title");
|
67 |
+
title.innerText = "Popover Title";
|
68 |
|
69 |
+
const description = document.createElement("div");
|
70 |
+
description.classList.add("driver-popover-description");
|
71 |
+
description.innerText = "Popover Description";
|
72 |
|
73 |
+
const footer = document.createElement("div");
|
74 |
+
footer.classList.add("driver-popover-footer");
|
75 |
|
76 |
+
const closeButton = document.createElement("button");
|
77 |
+
closeButton.classList.add("driver-popover-close-btn");
|
78 |
+
closeButton.innerText = "Close";
|
79 |
|
80 |
+
const footerButtons = document.createElement("span");
|
81 |
+
footerButtons.classList.add("driver-popover-footer-btns");
|
82 |
|
83 |
+
const previousButton = document.createElement("button");
|
84 |
+
previousButton.classList.add("driver-popover-prev-btn");
|
85 |
+
previousButton.innerHTML = "← Previous";
|
86 |
|
87 |
+
const nextButton = document.createElement("button");
|
88 |
+
nextButton.classList.add("driver-popover-next-btn");
|
89 |
+
nextButton.innerHTML = "Next →";
|
90 |
|
91 |
+
footerButtons.appendChild(previousButton);
|
92 |
+
footerButtons.appendChild(nextButton);
|
93 |
|
94 |
+
footer.appendChild(closeButton);
|
95 |
+
footer.appendChild(footerButtons);
|
96 |
|
97 |
+
wrapper.appendChild(tip);
|
98 |
+
wrapper.appendChild(title);
|
99 |
+
wrapper.appendChild(description);
|
100 |
+
wrapper.appendChild(footer);
|
101 |
|
102 |
return {
|
103 |
+
wrapper,
|
104 |
+
tip,
|
105 |
+
title,
|
106 |
+
description,
|
107 |
+
footer,
|
108 |
+
previousButton,
|
109 |
+
nextButton,
|
110 |
+
closeButton,
|
111 |
+
footerButtons,
|
112 |
};
|
113 |
}
|
114 |
|
115 |
export function destroyPopover() {
|
116 |
+
if (!popover) {
|
117 |
return;
|
118 |
}
|
119 |
|
120 |
+
popover.wrapper.parentElement?.removeChild(popover.wrapper);
|
121 |
+
popover = undefined;
|
122 |
}
|
src/style.css
CHANGED
@@ -39,3 +39,17 @@
|
|
39 |
right: 0;
|
40 |
background-color: #fff;
|
41 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
39 |
right: 0;
|
40 |
background-color: #fff;
|
41 |
}
|
42 |
+
|
43 |
+
.driver-popover-tip {
|
44 |
+
content: "";
|
45 |
+
position: absolute;
|
46 |
+
border: 5px solid #fff;
|
47 |
+
}
|
48 |
+
|
49 |
+
.driver-popover-tip-left {
|
50 |
+
top: 15px;
|
51 |
+
left: 100%;
|
52 |
+
border-right-color: transparent;
|
53 |
+
border-bottom-color: transparent;
|
54 |
+
border-top-color: transparent;
|
55 |
+
}
|