Fix tooltip fading transitions and synchronize additional attributes

This commit is contained in:
Antoine Bartuccio 2025-05-14 15:02:46 +02:00
parent 3a5bff8810
commit 6bb6be011c
Signed by: klmp200
GPG Key ID: E7245548C53F904B
3 changed files with 15 additions and 7 deletions

View File

@ -319,7 +319,7 @@ export class IcsCalendar extends inheritHtmlElement("div") {
click: async (event: Event) => { click: async (event: Event) => {
const button = event.target as HTMLButtonElement; const button = event.target as HTMLButtonElement;
button.classList.add("text-copy"); button.classList.add("text-copy");
button.setAttribute("tooltip-class", "text-copy"); button.setAttribute("tooltip-class", "calendar-copy-tooltip");
if (!button.hasAttribute("tooltip-position")) { if (!button.hasAttribute("tooltip-position")) {
button.setAttribute("tooltip-position", "top"); button.setAttribute("tooltip-position", "top");
} }
@ -334,11 +334,10 @@ export class IcsCalendar extends inheritHtmlElement("div") {
).toString(), ).toString(),
); );
setTimeout(() => { setTimeout(() => {
button.setAttribute("tooltip-class", "text-copied"); button.setAttribute("tooltip-class", "calendar-copy-tooltip text-copied");
button.classList.remove("text-copied"); button.classList.remove("text-copied");
button.classList.add("text-copied"); button.classList.add("text-copied");
button.classList.remove("text-copy"); button.classList.remove("text-copy");
button.removeAttribute("tooltip");
}, 1500); }, 1500);
}, },
}, },

View File

@ -117,7 +117,6 @@ ics-calendar {
transition: 500ms ease-out; transition: 500ms ease-out;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
}
.fc .fc-helpButton-button { .fc .fc-helpButton-button {
border-radius: 70%; border-radius: 70%;
@ -136,6 +135,12 @@ ics-calendar {
} }
} }
.tooltip.text-copy { .tooltip.calendar-copy-tooltip {
opacity: 1; opacity: 1;
transition: opacity 500ms ease-in;
} }
.tooltip.calendar-copy-tooltip.text-copied {
opacity: 0;
transition: opacity 500ms ease-out;
}

View File

@ -110,7 +110,9 @@ function tooltipMouseover(event: MouseEvent) {
}); });
}); });
document.body.append(tooltip); if (!tooltip.isConnected) {
document.body.append(tooltip);
}
} }
function tooltipMouseout(event: MouseEvent) { function tooltipMouseout(event: MouseEvent) {
@ -138,6 +140,8 @@ new MutationObserver((mutations: MutationRecord[]) => {
target.addEventListener("mouseout", tooltipMouseout); target.addEventListener("mouseout", tooltipMouseout);
if (target.matches(":hover")) { if (target.matches(":hover")) {
target.dispatchEvent(new Event("mouseover", { bubbles: true })); target.dispatchEvent(new Event("mouseover", { bubbles: true }));
} else {
target.dispatchEvent(new Event("mouseout", { bubbles: true }));
} }
} else if (tooltips.has(target)) { } else if (tooltips.has(target)) {
// Remove corresponding tooltip // Remove corresponding tooltip
@ -147,7 +151,7 @@ new MutationObserver((mutations: MutationRecord[]) => {
} }
}).observe(document.body, { }).observe(document.body, {
attributes: true, attributes: true,
attributeFilter: ["tooltip"], attributeFilter: ["tooltip", "tooltip-class", "toolitp-position"],
subtree: true, subtree: true,
}); });