opensource/driver.js
3
0
Fork 0
mirror of https://github.com/kamranahmedse/driver.js.git synced 2026-10-31 03:52:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add popover arrow adjustment

Browse Source
This commit is contained in:
Kamran Ahmed
2023-05-15 10:27:58 +01:00
parent 9d9dd89000
commit d6b72777ce
2 changed files with 76 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/popover.ts
+10 -7
View File
@@ -12,7 +12,7 @@ export type Popover = {
type PopoverDOM = {
wrapper: HTMLElement;
tip: HTMLElement;
arrow: HTMLElement;
title: HTMLElement;
description: HTMLElement;
footer: HTMLElement;
@@ -47,10 +47,13 @@ export function refreshPopover(element: Element) {
return;
}
const popoverTip = popover.tip;
const popoverArrow = popover.arrow;
// const position = calculatePopoverPosition(element);
popoverTip?.classList.add("driver-popover-tip-left");
popoverArrow?.classList.add(
"driver-popover-arrow-side-bottom",
"driver-popover-arrow-align-center"
);
}
function calculatePopoverPosition(element: Element) {}
@@ -59,8 +62,8 @@ function createPopover(): PopoverDOM {
const wrapper = document.createElement("div");
wrapper.classList.add("driver-popover");
const tip = document.createElement("div");
tip.classList.add("driver-popover-tip");
const arrow = document.createElement("div");
arrow.classList.add("driver-popover-arrow");
const title = document.createElement("div");
title.classList.add("driver-popover-title");
@@ -94,14 +97,14 @@ function createPopover(): PopoverDOM {
footer.appendChild(closeButton);
footer.appendChild(footerButtons);
wrapper.appendChild(tip);
wrapper.appendChild(arrow);
wrapper.appendChild(title);
wrapper.appendChild(description);
wrapper.appendChild(footer);
return {
wrapper,
tip,
arrow,
title,
description,
footer,
src/style.css
+66 -3
View File
@@ -40,16 +40,79 @@
background-color: #fff;
}
.driver-popover-tip {
.driver-popover-arrow {
content: "";
position: absolute;
border: 5px solid #fff;
}
.driver-popover-tip-left {
top: 15px;
/** Popover Arrow Sides **/
.driver-popover-arrow-side-left {
left: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
}
.driver-popover-arrow-side-right {
right: 100%;
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
}
.driver-popover-arrow-side-top {
top: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
.driver-popover-arrow-side-bottom {
bottom: 100%;
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}
.driver-popover-arrow-side-center {
display: none;
}
/* Left/Start + Right/Start */
.driver-popover-arrow-side-left.driver-popover-arrow-align-start,
.driver-popover-arrow-side-right.driver-popover-arrow-align-start {
top: 15px;
}
/* Top/Start + Bottom/Start */
.driver-popover-arrow-side-top.driver-popover-arrow-align-start,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start {
left: 15px;
}
/* End/Left + End/Right */
.driver-popover-arrow-align-end.driver-popover-arrow-side-left,
.driver-popover-arrow-align-end.driver-popover-arrow-side-right {
bottom: 15px;
}
/* Top/End + Bottom/End */
.driver-popover-arrow-side-top.driver-popover-arrow-align-end,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
right: 15px;
}
/* Left/Center + Right/Center */
.driver-popover-arrow-side-left.driver-popover-arrow-align-center,
.driver-popover-arrow-side-right.driver-popover-arrow-align-center {
top: 50%;
margin-top: -5px;
}
/* Top/Center + Bottom/Center */
.driver-popover-arrow-side-top.driver-popover-arrow-align-center,
.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center {
left: 50%;
margin-left: -5px;
}