72 lines
1.6 KiB
JavaScript
72 lines
1.6 KiB
JavaScript
css(`
|
|
searchbar- input::placeholder {
|
|
color: #5C504D;
|
|
}
|
|
`)
|
|
|
|
class SearchBar extends Shadow {
|
|
searchText
|
|
width
|
|
|
|
constructor(searchText, width) {
|
|
super()
|
|
this.searchText = searchText
|
|
this.width = width
|
|
}
|
|
|
|
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"))
|
|
})
|
|
}
|
|
|
|
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) |