mirror of
https://github.com/ae-utbm/sith.git
synced 2025-05-16 22:44:05 +00:00
Fix tooltip fading transitions and synchronize additional attributes
This commit is contained in:
parent
3a5bff8810
commit
6bb6be011c
@ -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);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -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;
|
||||||
|
}
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user