@skhemata/skhemata-faq
Version:
Skhemata FAQ Web Component. This web component provides website FAQ functionality with question and answer style of FAQ.
82 lines • 2.74 kB
JavaScript
/**
*
* Lit Faq Search Element
*
* */
import { __decorate } from "tslib";
// Import litelement base class, html helper function & typescript decorators
import { SkhemataBase, property, html } from '@skhemata/skhemata-base';
// Import lit-html, directives & etc
// Import custom style elements
import { SkhemataFormTextbox } from '@skhemata/skhemata-form';
import { SkhemataFaqSearchStyles } from '../style/SkhemataFaqSearchStyle';
import { translationEngDefault } from '../translation/SkhemataFaqSearch/eng';
export class SkhemataFaqSearch extends SkhemataBase {
constructor() {
// Always call super() first
super();
// Property decorator (requires TypeScript or Babel)
// Attributes that can be passed into different elements
this.faqSiteHost = '';
this.faqPagePath = '';
this.translationData = {
eng: translationEngDefault
};
this.searchTerm = '';
const params = new URLSearchParams(window.location.search);
this.searchTerm = params.get('s');
window.addEventListener('clearfaqsearch', () => {
this.searchTerm = '';
this.requestUpdate();
});
}
static get scopedElements() {
return {
'sk-form-textbox': SkhemataFormTextbox,
};
}
static get styles() {
return [
...super.styles,
SkhemataFaqSearchStyles
];
}
/**
* 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("SkhemataFaqSearch.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.faqPagePath}?${params.toString()}`);
window.dispatchEvent(new Event('popstate'));
}
}
__decorate([
property({ type: String, attribute: 'faq-site-host' })
], SkhemataFaqSearch.prototype, "faqSiteHost", void 0);
__decorate([
property({ type: String, attribute: 'faq-page-path' })
], SkhemataFaqSearch.prototype, "faqPagePath", void 0);
__decorate([
property({ type: Object })
], SkhemataFaqSearch.prototype, "translationData", void 0);
__decorate([
property({ type: String })
], SkhemataFaqSearch.prototype, "searchTerm", void 0);
//# sourceMappingURL=SkhemataFaqSearch.js.map