|
/**
|
|
* @fileoverview Search Page Component for Rantii
|
|
* @author retoor <retoor@molodetz.nl>
|
|
* @description Search results and search interface page
|
|
* @keywords search, page, results, find, query
|
|
*/
|
|
|
|
import { BaseComponent } from '../components/base-component.js';
|
|
|
|
class SearchPage extends BaseComponent {
|
|
static get observedAttributes() {
|
|
return ['query'];
|
|
}
|
|
|
|
init() {
|
|
this.render();
|
|
this.bindEvents();
|
|
}
|
|
|
|
render() {
|
|
const query = this.getAttr('query') || '';
|
|
|
|
this.addClass('page', 'search-page');
|
|
|
|
this.setHtml(`
|
|
<header class="search-header">
|
|
<form class="search-form">
|
|
<input type="search"
|
|
class="search-input"
|
|
placeholder="Search rants..."
|
|
value="${query}"
|
|
autofocus>
|
|
<button type="submit" class="search-btn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</header>
|
|
<section class="search-results">
|
|
${query ? `<rant-feed feed-type="search"></rant-feed>` : `
|
|
<div class="search-empty">
|
|
<svg viewBox="0 0 24 24" width="64" height="64">
|
|
<path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
</svg>
|
|
<p>Enter a search term</p>
|
|
</div>
|
|
`}
|
|
</section>
|
|
`);
|
|
|
|
if (query) {
|
|
this.search(query);
|
|
}
|
|
}
|
|
|
|
bindEvents() {
|
|
this.on(this, 'submit', this.handleSubmit);
|
|
}
|
|
|
|
handleSubmit(e) {
|
|
e.preventDefault();
|
|
const input = this.$('.search-input');
|
|
if (input && input.value.trim()) {
|
|
this.getRouter()?.goToSearch(input.value.trim());
|
|
}
|
|
}
|
|
|
|
async search(query) {
|
|
const feed = this.$('rant-feed');
|
|
if (feed) {
|
|
await feed.search(query);
|
|
}
|
|
}
|
|
|
|
onAttributeChanged(name, oldValue, newValue) {
|
|
if (name === 'query') {
|
|
this.render();
|
|
if (newValue) {
|
|
this.search(newValue);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('search-page', SearchPage);
|
|
|
|
export { SearchPage };
|