123 lines
4.4 KiB
JavaScript
123 lines
4.4 KiB
JavaScript
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) |