72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
import { Haptics, ImpactStyle } from '@capacitor/haptics';
|
|
import util from "../util.js"
|
|
|
|
class AppMenu extends Shadow {
|
|
selected = ""
|
|
apps = global.currentNetwork.apps.filter(app => (app !== "Settings" && app !== "Website"))
|
|
darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
getImageURL(appName) {
|
|
let imgUrl = `${util.HOST}/apps/${appName}/icons/${appName}`
|
|
if(this.darkMode) {
|
|
imgUrl += "light"
|
|
}
|
|
imgUrl += ".svg"
|
|
imgUrl = imgUrl.toLowerCase()
|
|
return imgUrl
|
|
}
|
|
|
|
onNewSelection() {
|
|
this.$$("img").forEach((image) => {
|
|
image.style.borderBottom = "1px solid transparent"
|
|
const appName = image.attributes.app.value
|
|
if (appName === global.currentApp()) {
|
|
image.style.borderBottom = "1px solid var(--text)"
|
|
}
|
|
image.src = this.getImageURL(appName)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
let apps = this.apps
|
|
let appCount = apps.length
|
|
let horizontalMargin = {
|
|
1: 50,
|
|
2: 10,
|
|
3: 2,
|
|
4: 1.5,
|
|
5: 0.5
|
|
}[appCount] ?? 4
|
|
|
|
HStack(() => {
|
|
|
|
for(let i = 0; i < apps.length; i++) {
|
|
let app = apps[i]
|
|
|
|
img(this.getImageURL(app), "1.3em")
|
|
.attr({app: app})
|
|
.padding(0.5, em)
|
|
.borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
|
|
.onTouch(async (done, e) => {
|
|
if(done) {
|
|
global.openApp(app)
|
|
this.onNewSelection()
|
|
await Haptics.impact({ style: ImpactStyle.Light });
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.display("grid")
|
|
.gridTemplateColumns(`repeat(${apps.filter(app => app !== "Settings").length}, 1fr)`)
|
|
.placeItems("center")
|
|
.borderTop("0.5px solid var(--divider)")
|
|
.height("auto")
|
|
.zIndex(1)
|
|
.paddingTop(0.5, em)
|
|
.paddingBottom(2, em)
|
|
.width(100, vw)
|
|
.boxSizing("border-box")
|
|
}
|
|
}
|
|
|
|
register(AppMenu) |