diff --git a/packages/web/src/components/Calendar.astro b/packages/web/src/components/Calendar.astro index aa13f85..cfabddd 100644 --- a/packages/web/src/components/Calendar.astro +++ b/packages/web/src/components/Calendar.astro @@ -222,45 +222,68 @@ function shiftWeekday(weekday: number) { class="group/dialog invisible data-[open=true]:visible" >
+
+
-
+
-
-

- - - - -

- - -
+
+
+

+ + + + +

+ + +
-
-

- schedule - -

-

- date_range - -

-

- sell - -

+
+

+ schedule + +

+

+ date_range + +

+

+ sell + +

+
@@ -270,6 +293,7 @@ function shiftWeekday(weekday: number) { const dialog = document.getElementById("calendar-dialog")!; const contents = document.getElementById("dialog-contents")!; const closer = document.getElementById("dialog-close")!; + const clickHandler = document.getElementById("calendar-click-handler")!; const dialogTitle = document.getElementById("dialog-title")!; const dot = document.getElementById("dialog-dot")!; @@ -281,14 +305,14 @@ function shiftWeekday(weekday: number) { const calendar = document.getElementById("calendar")!; const activities = calendar.querySelectorAll(".activity"); - function close() { + const close = () => { dialog.dataset.open = "false"; - for (const activity of activities) { - activity.dataset.showcased = "false"; - } - } + activities.forEach((a) => (a.dataset.showcased = "false")); + }; + + function paint(activity: HTMLDivElement) { + const { dataset } = activity; - function paint({ dataset }: HTMLDivElement) { dialogTitle.innerText = dataset.title ?? ""; dialogSubtitle.innerText = dataset.subtitle ?? ""; dot.dataset.visible = ((dataset.subtitle ?? "").length > 0).toString(); @@ -298,20 +322,43 @@ function shiftWeekday(weekday: number) { price.innerText = `${dataset.amount}$ pour ${dataset.lessons} cours`; } + function position(activity: HTMLDivElement, xOffset = 0) { + const dialogWidth = contents.getBoundingClientRect().width; + let { left: x, top: y, width } = activity.getBoundingClientRect(); + + if (x + width + dialogWidth < 0.9 * window.innerWidth) { + x += width + xOffset; + } else { + x -= dialogWidth + xOffset; + } + + contents.style.setProperty("--x", `${x}px`); + contents.style.setProperty("--y", `${y}px`); + } + document.addEventListener("DOMContentLoaded", function () { - dialog.addEventListener("click", close); closer.addEventListener("click", close); + clickHandler.addEventListener("click", close); contents.addEventListener("click", (e) => e.stopPropagation()); for (const activity of activities) { - activity.querySelector("button")!.addEventListener("click", function (e) { - const target = e.target as HTMLButtonElement; - const activity = target.parentElement! as HTMLDivElement; - - paint(activity); - activity.dataset.showcased = "true"; + const target = activity.querySelector("button")!; + const element = target.parentElement! as HTMLDivElement; + + target.addEventListener("click", function () { + paint(element); + position(element); + activities.forEach((a) => (a.dataset.showcased = "false")); + element.dataset.showcased = "true"; dialog.dataset.open = "true"; }); + + target.addEventListener("pointerenter", function () { + if (dialog.dataset.open !== "true") { + paint(element); + position(element, 20); + } + }); } });