init

2026-04-28 20:05:00 -05:00
commit 0d6c7683ff
123 changed files with 20922 additions and 0 deletions
--- a/calendar/Toolbar/BottomBar.js
+++ b/calendar/Toolbar/BottomBar.js
@@ -0,0 +1,126 @@
+css(`
+    bottombar- {
+        pointer-events: none;
+    }
+    bottombar- select {
+        -webkit-appearance: none;
+        text-align-last: center;
+        -webkit-text-align-last: center;
+    }
+`)
+
+class BottomBar extends Shadow {
+    baseUrl = `${config.UI}/apps/calendar/icons`
+
+    constructor(callbacks = {}) {
+        super()
+        this.onAddEvent = callbacks.onAddEvent;
+        this.onCalendarOptions = callbacks.onCalendarOptions;
+        this.onChangeView = callbacks.onChangeView;
+        this.viewMode = callbacks.viewMode;
+        this.hideViewSelect = callbacks.hideViewSelect ?? false;
+    }
+
+    getImageURL(iconName) {
+        let imgUrl = `${this.baseUrl}/${iconName}`
+        if(util.darkMode()) {
+            imgUrl += "light"
+        }
+        imgUrl += ".svg"
+        imgUrl = imgUrl.toLowerCase()
+        return imgUrl
+    }
+
+    render() {
+        HStack(() => {
+            // Left: view mode select
+            if (!this.hideViewSelect) select(() => {
+                ["day", "week", "month"].forEach(mode => {
+                    const o = option(mode.charAt(0).toUpperCase() + mode.slice(1))
+                        .attr({ value: mode })
+                    if (mode === this.viewMode) o.attr({ selected: true })
+                })
+            })
+            .fontSize(1, em)
+            .paddingVertical(0.6, em)
+            .paddingHorizontal(0.75, em)
+            .background("var(--button-color)")
+            .backdropFilter("blur(10px)")
+            .borderRadius(100, px)
+            .pointerEvents("auto")
+            .border(`.5px solid ${util.darkMode() ? "var(--accent)" : "transparent"}`)
+            .color(util.darkMode() ? "var(--text)" : "white")
+            .onTouch(function (start) {
+                if(start) {
+                    this.background("var(--main)")
+                } else {
+                    this.background("var(--button-color)")
+                }
+            })
+            .fontFamily("Arial")
+            .outline("none")
+            .appearance("none")
+            .textAlign("center")
+            .onChange(e => this.onChangeView(e.target.value))
+
+            // Right: add event + calendar options
+            HStack(() => {
+                const addEventImg = img(this.getImageURL("addevent"), "1em", "1em")
+                    .paddingVertical(0.75, em).paddingHorizontal(1, em)
+                    .onTap(async () => {
+                        this.onAddEvent()
+                        addEventImg.src = `${this.baseUrl}/addeventlightselected.svg`
+                        const sheet = $("bottomsheet-")
+                        const revert = () => {
+                            if (!sheet.isOpen) {
+                                addEventImg.src = this.getImageURL("addevent")
+                                sheet.sheetEl.removeEventListener("transitionend", revert)
+                            }
+                        }
+                        sheet.sheetEl.addEventListener("transitionend", revert)
+                    })
+
+                const calendarSheetImg = img(this.getImageURL("calbutton"), "1.1em")
+                    .paddingVertical(0.75, em).paddingHorizontal(1, em)
+                    .onTap(async () => {
+                        this.onCalendarOptions()
+                        calendarSheetImg.src = `${this.baseUrl}/calbuttonlightselected.svg`
+                        const sheet = $("bottomsheet-")
+                        const revert = () => {
+                            if (!sheet.isOpen) {
+                                calendarSheetImg.src = this.getImageURL("calbutton")
+                                sheet.sheetEl.removeEventListener("transitionend", revert)
+                            }
+                        }
+                        sheet.sheetEl.addEventListener("transitionend", revert)
+                    })
+            })
+            .background("var(--button-color)")
+            .pointerEvents("auto")
+            .onTouch(function (start) {
+                if(start) {
+                    this.background("var(--main)")
+                } else {
+                    this.background("var(--button-color)")
+                }
+            })
+            .backdropFilter("blur(10px)")
+            .alignItems("center")
+            .flexShrink(0)
+            .borderRadius(100, px)
+            .border(`0.5px solid ${util.darkMode() ? "var(--accent)" : "transparent"}`)
+            .overflow("hidden")
+        })
+        .position("absolute")
+        .left(4, vw)
+        .bottom(0.75, em)
+        .zIndex(2)
+        .justifyContent(this.hideViewSelect ? "flex-end" : "space-between")
+        .width(92, vw)
+        .onEvent("themechange", () => {
+            this.rerender()
+        })
+    }
+}
+
+register(BottomBar)