mirrors/breakout71
1
0
Fork 0
mirror of https://gitlab.com/lecarore/breakout71.git synced 2025-04-27 07:26:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Renan LE CARO 2025-04-23 17:25:37 +02:00
parent 401e9b4548
commit 62a1feb015
32 changed files with 1483 additions and 1435 deletions
Download patch file Download diff file Expand all files Collapse all files

161
src/tooltip.ts
View file

@ -1,61 +1,116 @@
import { isOptionOn } from "./options";
import {isOptionOn} from "./options";
export function setupTooltips() {
const tooltip = document.getElementById("tooltip") as HTMLDivElement;
if (isOptionOn("mobile-mode")) {
tooltip.style.display = "none";
return;
}
function updateTooltipPosition(e: MouseEvent) {
if (isOptionOn("mobile-mode")) {
setupMobileTooltips(tooltip)
} else {
setupDesktopTooltips(tooltip)
}
}
const tooltip = document.getElementById("tooltip") as HTMLDivElement;
function setupMobileTooltips(tooltip: HTMLDivElement) {
function openTooltip(e: Event) {
const hovering = (e.target as HTMLElement)
if (!hovering?.hasAttribute('data-help-content')) {
return
}
e.stopPropagation()
e.preventDefault()
tooltip.innerHTML = hovering.getAttribute("data-help-content") || "";
tooltip.style.display = "";
const {left,top,height} = hovering.getBoundingClientRect()
tooltip.style.transform = `translate(${left}px,${top}px) translate(${left > window.innerWidth / 2 ? "-100%" : "0"},${top > window.innerHeight / 3 ? "-100%" :height+ "px"})`;
}
document.body.addEventListener( "touchstart", openTooltip, true )
document.body.addEventListener( "mousedown", openTooltip, true )
function closeTooltip(e:Event){
const hovering = (e.target as HTMLElement)
if (!hovering?.hasAttribute('data-help-content')) {
return
}
e.stopPropagation()
e.preventDefault()
tooltip.style.display = "none"
}
document.body.addEventListener( "touchend", closeTooltip, true )
document.body.addEventListener( "mouseup", closeTooltip, true )
function ignoreClick(e:Event){
const hovering = (e.target as HTMLElement)
if (!hovering?.hasAttribute('data-help-content')) {
return
}
e.stopPropagation()
e.preventDefault()
}
document.body.addEventListener( "click", ignoreClick, true )
}
function setupDesktopTooltips(tooltip: HTMLDivElement) {
function updateTooltipPosition(e: { clientX:number, clientY:number }) {
tooltip.style.transform = `translate(${e.clientX}px,${e.clientY}px) translate(${e.clientX > window.innerWidth / 2 ? "-100%" : "0"},${e.clientY > (window.innerHeight * 2) / 3 ? "-100%" : "20px"})`;
}
}
function closeToolTip() {
function closeToolTip() {
tooltip.style.display = "none";
hovering = null;
}
let hovering: HTMLElement | null = null;
document.body.addEventListener(
"mouseenter",
(e: MouseEvent) => {
let parent: HTMLElement | null = e.target as HTMLElement;
while (parent && !parent.hasAttribute("data-tooltip")) {
parent = parent.parentElement;
}
if (parent?.getAttribute("data-tooltip")?.trim()) {
hovering = parent as HTMLElement;
tooltip.innerHTML = hovering.getAttribute("data-tooltip") || "";
tooltip.style.display = "";
updateTooltipPosition(e);
} else {
closeToolTip();
}
},
true,
);
setInterval(() => {
if (hovering) {
if (!document.body.contains(hovering)) {
closeToolTip();
}
}
}, 200);
document.body.addEventListener(
"mousemove",
(e) => {
if (!tooltip.style.display) {
updateTooltipPosition(e);
}
},
true,
);
document.body.addEventListener(
"mouseleave",
(e) => {
closeToolTip();
},
true,
);
}
let hovering: HTMLElement | null = null;
document.body.addEventListener(
"mouseenter",
(e: MouseEvent) => {
let parent: HTMLElement | null = e.target as HTMLElement;
while (parent && !parent.hasAttribute("data-tooltip")) {
parent = parent.parentElement;
}
if (parent?.getAttribute("data-tooltip")?.trim()) {
hovering = parent as HTMLElement;
tooltip.innerHTML = hovering.getAttribute("data-tooltip") || "";
tooltip.style.display = "";
updateTooltipPosition(e);
} else {
closeToolTip();
}
},
true,
);
setInterval(() => {
if (hovering) {
if (!document.body.contains(hovering)) {
closeToolTip();
}
}
}, 200);
document.body.addEventListener(
"mousemove",
(e) => {
if (!tooltip.style.display) {
updateTooltipPosition(e);
}
},
true,
);
document.body.addEventListener(
"mouseleave",
(e) => {
closeToolTip();
},
true,
);
}