init

2026-04-28 20:05:00 -05:00
commit 0d6c7683ff
123 changed files with 20922 additions and 0 deletions
--- a/calendar/Toolbar/CalendarToolbar.js
+++ b/calendar/Toolbar/CalendarToolbar.js
@@ -0,0 +1,123 @@
+import calendarUtil from "../calendarUtil.js"
+import "./ToolbarPopout.js";
+
+class CalendarToolbar extends Shadow {
+    constructor(currentDate, weekStartsOn, actions, calendars, events, showPopout, options = {}) {
+        super()
+        this.currentDate = currentDate
+        this.weekStartsOn = weekStartsOn
+        this.goToPrevious = actions.goToPrevious;
+        this.goToCurrent = actions.goToCurrent;
+        this.goToNext = actions.goToNext;
+        this.goToDate = actions.goToDate;
+        this.calendars = calendars;
+        this.events = events;
+        this.showPopout = showPopout;
+        this.onBack = options.onBack ?? null;
+        this.viewModeOverride = options.viewModeOverride ?? null;
+    }
+
+    render() {
+        let popout;
+
+        VStack(() => {
+            HStack(() => {
+                if (this.onBack) {
+                    BackButton(true, false, this.onBack)
+                        .position("absolute")
+                        .left(0.75, em)
+                        .bottom(0.2, em)
+                        .transform("scale(0.75)")
+                        .transformOrigin("left center")
+                }
+                
+                h2(this.getToolbarLabel(this.currentDate))
+                    .margin(0)
+                    .fontWeight("600")
+                    .color("var(--headertext)")
+                    .paddingLeft(this.onBack ? 2 : 0, em)
+                    .state("label", function (label) {
+                        if (label) {
+                            this.innerText = label;
+                        }
+                    })
+
+                HStack(() => {
+                    if (!window.isMobile()) {
+                        this.navButton("‹", this.goToPrevious)
+                        this.navButton("Today", this.goToCurrent)
+                        this.navButton("›", this.goToNext)
+                    }
+                    this.navButton("⊞", () => this.togglePopout(popout))
+                })
+                .gap(0.5, em)
+                .alignItems("center")
+            })
+            .boxSizing("border-box")
+            .width(100, pct)
+            .alignItems("flex-end")
+            .position("relative")
+            .overflow("visible")
+            .paddingBottom(0.9, em)
+            .paddingHorizontal(1, em)
+            .justifyContent("space-between")
+
+            popout = ToolbarPopout(this.currentDate, this.weekStartsOn, this.calendars, this.events, this.showPopout, (date) => this.goToDate(date), (date) => {
+                this.$("h2").attr({ "label": this.getToolbarLabel(date)});
+            });
+        })
+        .overflow("visible")
+        .borderBottom("1px solid var(--main)")
+        .width(100, pct)
+    }
+
+    togglePopout(popout) {
+        this.showPopout = !this.showPopout;
+        $("calendar-").showPopout = this.showPopout;
+        if (popout) {
+            popout.showPopout = this.showPopout;
+            popout.style.maxHeight = this.showPopout ? `${popout.layout.openHeight}em` : "0em";
+        }
+        if (!this.showPopout) {
+            const newLabel = this.getToolbarLabel(this.currentDate)
+            const oldLabel = this.$("h2").innerText;
+            this.$("h2").attr({ "label": newLabel });
+            if (newLabel !== oldLabel) {
+                setTimeout(() => {
+                    this.rerender();
+                }, 300);
+            }  
+        }
+    }
+
+    navButton(label, handler) {
+        const isWide = label === "Today";
+        return button(label)
+            .onTap(handler)
+            .paddingVertical(0.45, em)
+            .fontSize(1, rem)
+            .paddingHorizontal(isWide ? 0.9 : 0.8, em)
+            .border("1px solid var(--desktop-item-border)")
+            .borderRadius(0.6, em)
+            .background("var(--desktop-item-background)")
+            .color("var(--text)")
+            .cursor("pointer");
+    }
+
+    getToolbarLabel(date) {
+        const viewMode = this.viewModeOverride ?? $("calendar-").viewMode;
+
+        if (viewMode === "week") {
+            return date.toLocaleDateString(undefined, { month: "long", year: "numeric" });
+        }
+        if (viewMode === "day") {
+            return date.toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" });
+        }
+        if (viewMode === "month") {
+            return date.toLocaleDateString(undefined, { month: "long", year: "numeric" });
+        }
+        return "";
+    }
+}
+
+register(CalendarToolbar)