sam/ForumMobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new announcements page, adding searchbar and message input.

Browse Source
This commit is contained in:
metacryst
2026-03-23 05:26:55 -05:00
parent 35f0fe3654
commit 881c9408b6
22 changed files with 809 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/SearchBar.js
View File

@@ -5,97 +5,68 @@ css(`
`)
class SearchBar extends Shadow {
constructor(searchText) {
super()
this.searchText = searchText
}
searchText
width
constructor(searchText, width) {
super()
this.searchText = searchText
this.width = width
}
render() {
form(() => {
HStack(() => {
input("Search", "80%")
.attr({ name: "searchText", type: "text" })
.attr({ value: this.searchText ? this.searchText : "" })
.paddingVertical(0.75, em)
.boxSizing("border-box")
.paddingHorizontal(1, em)
.background("var(--searchbackground)")
.color("gray")
.marginBottom(1, em)
.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
.borderRadius(100, px)
.fontFamily("Arial")
.fontSize(1, em)
.outline("none")
.cursor("not-allowed")
.onTouch(function (start) {
if (start) {
this.style.backgroundColor = "var(--accent)"
} else {
this.style.backgroundColor = "var(--searchbackground)"
}
})
// .onInput(async (e) => {
// e.preventDefault();
// console.log("helloooo submitted")
// }) // can be used for live updating
render() {
form(() => {
input("Search", this.width)
.attr({ name: "searchText", type: "text" })
.attr({ value: this.searchText ? this.searchText : "" })
.paddingVertical(0.75, em)
.boxSizing("border-box")
.paddingHorizontal(1, em)
.background("var(--searchbackground)")
.color("gray")
.marginBottom(1, em)
.marginLeft(1, em)
.marginRight(0.5, em)
.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
.borderRadius(100, px)
.fontFamily("Arial")
.fontSize(1, em)
.cursor("not-allowed")
.onTouch(function (start) {
if (start) {
this.style.backgroundColor = "var(--accent)"
} else {
this.style.backgroundColor = "var(--searchbackground)"
}
})
})
.onSubmit(async (e) => {
e.preventDefault();
const data = new FormData(e.target);
this.dispatchSearchEvent(data.get("searchText"))
})
}
p("+")
.fontWeight("bolder")
.paddingVertical(0.75, em)
.boxSizing("border-box")
.paddingHorizontal(1, em)
.background("var(--searchbackground)")
.color("var(--accent)")
.marginBottom(1, em)
.border("1px solid var(--accent)")
.borderRadius(15, px)
.onTap(() => {
this.handleAdd()
})
})
.width(100, pct)
.horizontalAlign("center")
.verticalAlign("center")
.gap(0.5, em)
})
.onSubmit(async (e) => {
e.preventDefault();
const data = new FormData(e.target);
this.dispatchSearchEvent(data.get("searchText"))
})
}
handleAdd() {
const app = global.currentApp()
switch (app) {
case "Jobs":
$("jobform-").toggle()
break;
case "Events":
$("eventform-").toggle()
break;
default:
break;
}
}
dispatchSearchEvent(searchText) {
const app = global.currentApp();
switch (app) {
case "Jobs":
window.dispatchEvent(new CustomEvent('jobsearch', {
detail: { searchText: searchText }
}));
break;
case "Events":
window.dispatchEvent(new CustomEvent('eventsearch', {
detail: { searchText: searchText }
}));
break;
}
}
dispatchSearchEvent(searchText) {
const app = global.currentApp();
switch (app) {
case "Jobs":
window.dispatchEvent(new CustomEvent('jobsearch', {
detail: { searchText: searchText }
}));
break;
case "Events":
window.dispatchEvent(new CustomEvent('eventsearch', {
detail: { searchText: searchText }
}));
break;
case "Announcements":
window.dispatchEvent(new CustomEvent('announcementsearch', {
detail: { searchText: searchText }
}));
break;
}
}
}
register(SearchBar)