mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-09-08 03:39:20 +02:00
- add podcast sidebar navigation - add podcast dashboard with latest episodes - add pagination to podcast episodes - add components helper to reuse ui components (button, data_table, etc.) - enhance podcast and episode forms by splitting them into form sections - add hint tooltips to podcast and episode forms - transform radio inputs as buttons for better ux - replace explicit field by parental_advisory - replace author field by publisher - add podcasts_categories table to set multiple categories - use choices.js to enhance multiselect fields - update Language files - update js dependencies to latest versions closes #31, #9
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { createPopper, Placement } from "@popperjs/core";
|
|
|
|
const Tooltip = (): void => {
|
|
const tooltipContainers: NodeListOf<HTMLElement> = document.querySelectorAll(
|
|
"[data-toggle='tooltip']"
|
|
);
|
|
|
|
for (let i = 0; i < tooltipContainers.length; i++) {
|
|
const tooltipReference = tooltipContainers[i];
|
|
const tooltipContent = tooltipReference.title;
|
|
|
|
const tooltip = document.createElement("div");
|
|
tooltip.setAttribute("id", "tooltip" + i);
|
|
tooltip.setAttribute(
|
|
"class",
|
|
"px-2 py-1 text-sm bg-gray-900 text-white rounded max-w-xs z-50"
|
|
);
|
|
tooltip.innerHTML = tooltipContent;
|
|
|
|
const popper = createPopper(tooltipReference, tooltip, {
|
|
placement: tooltipReference.dataset.placement as Placement,
|
|
modifiers: [
|
|
{
|
|
name: "offset",
|
|
options: {
|
|
offset: [0, 8],
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
const show = () => {
|
|
tooltipReference.removeAttribute("title");
|
|
tooltipReference.setAttribute("aria-describedby", "tooltip" + i);
|
|
document.body.appendChild(tooltip);
|
|
popper.update();
|
|
};
|
|
|
|
const hide = () => {
|
|
const element = document.getElementById("tooltip" + i);
|
|
tooltipReference.removeAttribute("aria-describedby");
|
|
tooltipReference.setAttribute("title", tooltipContent);
|
|
if (element) {
|
|
document.body.removeChild(element);
|
|
}
|
|
};
|
|
|
|
const showEvents = ["mouseenter", "focus"];
|
|
const hideEvents = ["mouseleave", "blur"];
|
|
|
|
showEvents.forEach((event) => {
|
|
tooltipReference.addEventListener(event, show);
|
|
});
|
|
|
|
hideEvents.forEach((event) => {
|
|
tooltipReference.addEventListener(event, hide);
|
|
});
|
|
}
|
|
};
|
|
|
|
export default Tooltip;
|