@skhemata/skhemata-blog
Version:
Skhemata Blog Web Component. This web component provides several sub components in addition to main component, allowing featured blogs, blog listing and blog post display.
78 lines • 2.6 kB
JavaScript
/**
*
* Lit Blog Search Element
*
* */
import { __decorate } from "tslib";
// Import litelement base class, html helper function & typescript decorators
import { html, property, SkhemataBase } from '@skhemata/skhemata-base';
// Import lit-html, directives & etc
// Import custom style elements
import { SkhemataFormTextbox } from '@skhemata/skhemata-form';
import { SkhemataBlogSearchStyle } from '../style/SkhemataBlogSearchStyle';
import { translationEngDefault } from '../translation/SkhemataBlogSearch/eng';
export class SkhemataBlogSearch extends SkhemataBase {
constructor() {
// Always call super() first
super();
// properties
this.blogPagePath = '';
this.searchedBlogPosts = '';
this.translationData = {
eng: translationEngDefault,
};
this.searchTerm = '';
const params = new URLSearchParams(window.location.search);
this.searchTerm = params.get('s');
window.addEventListener('clearblogsearch', () => {
this.searchTerm = '';
this.requestUpdate();
});
}
static get scopedElements() {
return {
'sk-form-textbox': SkhemataFormTextbox,
};
}
static get styles() {
return [...super.styles, SkhemataBlogSearchStyle];
}
/**
* Implement `render` to define a template for your element.
* Use JS template literals
*/
render() {
return html `
<sk-form-textbox
id="search-input"
.value=${this.searchTerm || ''}
type="search"
placeholder=${this.getStr('SkhemataBlogSearch.searchPlaceholder')}
@keyup=${this.onSearch}
></sk-form-textbox>
`;
}
/**
* Search posts when value is entered
*/
onSearch(event) {
const params = new URLSearchParams(window.location.search);
params.set('s', event.target.value);
this.searchTerm = event.target.value;
window.history.pushState({}, '', `/${this.blogPagePath}?${params.toString()}`);
window.dispatchEvent(new Event('popstate'));
}
}
__decorate([
property({ type: String, attribute: 'blog-page-path' })
], SkhemataBlogSearch.prototype, "blogPagePath", void 0);
__decorate([
property({ type: String })
], SkhemataBlogSearch.prototype, "searchedBlogPosts", void 0);
__decorate([
property({ type: Object })
], SkhemataBlogSearch.prototype, "translationData", void 0);
__decorate([
property({ type: String })
], SkhemataBlogSearch.prototype, "searchTerm", void 0);
//# sourceMappingURL=SkhemataBlogSearch.js.map