Ledda/djledda-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2024-11-01 18:50:26 +01:00
parent 7539e6ed48
commit f8a0cd50f8
7 changed files with 143 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
public/home/js/SexyTooltip.ts
View File

@@ -1,130 +0,0 @@
interface Point {
x: number;
y: number;
}
interface Size {
height: string;
width: string;
}
class SexyTooltip {
private static readonly carrierStyle: Partial<CSSStyleDeclaration> = {
opacity: "0",
display: "block",
pointerEvents: "none",
backgroundColor: "black",
border: "white solid 1px",
color: "white",
padding: "10px",
position: "absolute",
zIndex: "1",
overflow: "hidden",
height: "0",
width: "0",
transition: "opacity 200ms, height 200ms, width 200ms",
};
private static readonly textCarrierStyle: Partial<CSSStyleDeclaration> = {
width: "350px",
display: "block",
overflow: "hidden",
};
private static readonly defaultWidth = 350;
private readonly carrier: HTMLDivElement;
private readonly textCarrier: HTMLSpanElement;
private readonly elementsWithTooltips: Element[] = [];
private active: boolean = false;
constructor(carrier: HTMLDivElement) {
if (carrier.childNodes.length > 0) {
throw new Error("Incorrect setup for tooltip! Remove the child nodes from the tooltip div.");
}
this.carrier = carrier;
this.textCarrier = document.createElement("span");
this.carrier.appendChild(this.textCarrier);
Object.assign(this.carrier.style, SexyTooltip.carrierStyle);
Object.assign(this.textCarrier.style, SexyTooltip.textCarrierStyle);
document.querySelectorAll(".tooltip").forEach((element) => {
if (element.nodeName === "SPAN") {
console.log(element.previousElementSibling);
this.elementsWithTooltips.push(element.previousElementSibling);
}
});
document.addEventListener("mousemove", (event) => this.rerenderTooltip({ x: event.pageX, y: event.pageY }));
}
rerenderTooltip(mousePos: Point) {
const newText = this.getTooltipTextForHoveredElement(mousePos);
if (newText !== this.textCarrier.innerHTML) {
this.transitionTooltipSize(newText);
const tooltipHasText = newText !== "";
if (tooltipHasText !== this.active) {
this.toggleActive();
}
}
if (this.isStillVisible()) {
this.updatePosition(mousePos);
}
}
isStillVisible() {
return getComputedStyle(this.carrier).opacity !== "0";
}
updatePosition(pos: Point) {
if (pos.x + 15 + this.carrier.clientWidth <= document.body.scrollWidth) {
this.carrier.style.left = (pos.x + 15) + "px";
} else {
this.carrier.style.left = (document.body.scrollWidth - this.carrier.clientWidth - 5) + "px";
}
if (pos.y + this.carrier.clientHeight <= document.body.scrollHeight) {
this.carrier.style.top = pos.y + "px";
} else {
this.carrier.style.top = (document.body.scrollHeight - this.carrier.clientHeight - 5) + "px";
}
}
toggleActive() {
if (this.active) {
this.active = false;
this.carrier.style.opacity = "0";
this.carrier.style.padding = "0";
} else {
this.active = true;
this.carrier.style.opacity = "1";
this.carrier.style.padding = SexyTooltip.carrierStyle.padding;
}
}
transitionTooltipSize(text: string) {
const testDiv = document.createElement("div");
testDiv.style.height = "auto";
testDiv.style.width = SexyTooltip.defaultWidth + "px";
testDiv.innerHTML = text;
document.body.appendChild(testDiv);
const calculatedHeight = testDiv.scrollHeight;
testDiv.style.display = "inline";
testDiv.style.width = "auto";
document.body.removeChild(testDiv);
const size = { height: calculatedHeight + "px", width: "350px" };
this.carrier.style.height = size.height;
this.carrier.style.width = text === "" ? "0" : size.width;
this.textCarrier.innerHTML = text;
}
getTooltipTextForHoveredElement(mousePos: Point): string {
for (const elem of this.elementsWithTooltips) {
const boundingRect = elem.getBoundingClientRect();
const inYRange = mousePos.y >= boundingRect.top + window.pageYOffset - 1 &&
mousePos.y <= boundingRect.bottom + window.pageYOffset + 1;
const inXRange = mousePos.x >= boundingRect.left + window.pageXOffset - 1 &&
mousePos.x <= boundingRect.right + window.pageXOffset + 1;
if (inYRange && inXRange) {
return (elem.nextElementSibling as HTMLSpanElement)?.innerText ?? "";
}
}
return "";
}
}
export default SexyTooltip;

30
public/home/main.css
View File

@@ -166,7 +166,7 @@ span.subjecttitle {
padding: 10px 20px 10px 20px;
display: block;
color: #333333;
text-decoration: none;
text-decorAtion: none;
transition: background-color 200ms;
}
@@ -187,3 +187,31 @@ a {
.tooltip-container {
display: inline-block;
}
.tooltip-carrier {
opacity: 0;
display: block;
pointer-events: none;
background-color: black;
border: white solid 1px;
color: white;
padding: 10px;
position: absolute;
z-index: 1;
overflow: hidden;
height: 0;
width: 0;
position: absolute;
transition: opacity 200ms, height 200ms, width 200ms;
.text-carrier {
position: absolute;
width: 350px;
font-size: 16px;
font-family: "Roboto", serif;
display: block;
overflow: hidden;
}
}