127 lines
4.6 KiB
JavaScript
127 lines
4.6 KiB
JavaScript
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)
|