kamrify commited on
Commit
9d9dd89
·
1 Parent(s): b8874fd

Popver initialization

Browse files
Files changed (3) hide show
  1. index.html +1 -1
  2. src/popover.ts +85 -61
  3. 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
- preferredPosition: "top",
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
- preferredPosition?: "top" | "right" | "bottom" | "left";
7
- align?: "start" | "center" | "end";
8
  };
9
 
10
- let popoverEl: HTMLElement | undefined;
 
 
 
 
 
 
 
 
 
 
11
 
12
- export function renderPopover(element: Element) {
13
- if (!popoverEl) {
14
- const popover = createPopover();
15
- document.body.appendChild(popover.popoverWrapper);
16
 
17
- popoverEl = popover.popoverWrapper;
 
 
 
18
  }
19
 
20
- popoverEl.style.display = "block";
21
- popoverEl.style.left = "0";
22
- popoverEl.style.top = "0";
23
- popoverEl.style.bottom = "";
24
- popoverEl.style.right = "";
 
 
25
 
26
- refreshPopover();
27
- bringInView(popoverEl);
28
  }
29
 
30
- export function refreshPopover() {
31
- console.log("rendering popover");
 
 
 
 
 
 
 
32
  }
33
 
34
- function createPopover() {
35
- const popoverWrapper = document.createElement("div");
36
- popoverWrapper.classList.add("driver-popover");
 
 
37
 
38
- const popoverTip = document.createElement("div");
39
- popoverTip.classList.add("driver-popover-tip");
40
 
41
- const popoverTitle = document.createElement("div");
42
- popoverTitle.classList.add("driver-popover-title");
43
- popoverTitle.innerText = "Popover Title";
44
 
45
- const popoverDescription = document.createElement("div");
46
- popoverDescription.classList.add("driver-popover-description");
47
- popoverDescription.innerText = "Popover Description";
48
 
49
- const popoverFooter = document.createElement("div");
50
- popoverFooter.classList.add("driver-popover-footer");
51
 
52
- const popoverCloseBtn = document.createElement("button");
53
- popoverCloseBtn.classList.add("driver-popover-close-btn");
54
- popoverCloseBtn.innerText = "Close";
55
 
56
- const popoverFooterBtnGroup = document.createElement("span");
57
- popoverFooterBtnGroup.classList.add("driver-popover-footer-btns");
58
 
59
- const popoverPrevBtn = document.createElement("button");
60
- popoverPrevBtn.classList.add("driver-popover-prev-btn");
61
- popoverPrevBtn.innerHTML = "&larr; Previous";
62
 
63
- const popoverNextBtn = document.createElement("button");
64
- popoverNextBtn.classList.add("driver-popover-next-btn");
65
- popoverNextBtn.innerHTML = "Next &rarr;";
66
 
67
- popoverFooterBtnGroup.appendChild(popoverPrevBtn);
68
- popoverFooterBtnGroup.appendChild(popoverNextBtn);
69
 
70
- popoverFooter.appendChild(popoverCloseBtn);
71
- popoverFooter.appendChild(popoverFooterBtnGroup);
72
 
73
- popoverWrapper.appendChild(popoverTip);
74
- popoverWrapper.appendChild(popoverTitle);
75
- popoverWrapper.appendChild(popoverDescription);
76
- popoverWrapper.appendChild(popoverFooter);
77
 
78
  return {
79
- popoverWrapper,
80
- popoverTip,
81
- popoverTitle,
82
- popoverDescription,
83
- popoverFooter,
84
- popoverPrevBtn,
85
- popoverNextBtn,
86
- popoverCloseBtn,
87
- popoverFooterBtnGroup,
88
  };
89
  }
90
 
91
  export function destroyPopover() {
92
- if (!popoverEl) {
93
  return;
94
  }
95
 
96
- popoverEl.parentElement?.removeChild(popoverEl);
97
- popoverEl = undefined;
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 = "&larr; Previous";
86
 
87
+ const nextButton = document.createElement("button");
88
+ nextButton.classList.add("driver-popover-next-btn");
89
+ nextButton.innerHTML = "Next &rarr;";
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
+ }