@skhemata/skhemata-faq
Version:
Skhemata FAQ Web Component. This web component provides website FAQ functionality with question and answer style of FAQ.
116 lines • 3.86 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 { SkhemataFaqCategoriesStyles } from '../style/SkhemataFaqCategoriesStyle';
import { translationEngDefault } from '../translation/SkhemataFaqCategories/eng';
export class SkhemataFaqCategories extends SkhemataBase {
constructor() {
super();
this.apiWordpress = {
url: ''
};
this.faqPagePath = '';
this.categories = [];
this.translationData = {
eng: translationEngDefault
};
let params = new URLSearchParams(window.location.search);
let c = params.get('c') || '';
if (c !== '') {
this.currentCategory = parseInt(c, 10);
}
window.addEventListener('popstate', () => {
params = new URLSearchParams(window.location.search);
c = params.get('c') || '';
if (c !== '') {
this.currentCategory = parseInt(c, 10);
}
else {
this.currentCategory = undefined;
}
});
}
static get styles() {
return [
...super.styles,
SkhemataFaqCategoriesStyles
];
}
/**
* Implement `render` to define a template for your element.
* Use JS template literals
*/
render() {
return html `
<h3 class="title is-4 has-text-centered">${this.getStr('SkhemataFaqCategories.categoriesTitle')}</h3>
<div class="buttons">
<button
class="category-item button is-light is-fullwidth"
@click="${() => this.filterCategory(-1)}"
>
${this.getStr('SkhemataFaqCategories.allCategories')}
</button>
${this.categories.map((category) => html `
<button
class="category-item button is-light is-fullwidth ${this
.currentCategory === category.id
? 'active'
: ''}"
@click=${() => this.filterCategory(category.id)}
>
<span>${category.name}</span>
</button>
</div>
`)}
`;
}
async firstUpdated() {
await super.firstUpdated();
this.getCategories();
}
/**
* Get categories
*/
async getCategories() {
await fetch(`${this.apiWordpress.url}/ufaq-category?parent=0&per_page=100`)
.then(response => response.json())
.then(async (data) => {
this.categories = data;
});
}
filterCategory(id) {
const params = new URLSearchParams(window.location.search);
if (parseInt(params.get('c') || '', 10) === id || id === -1) {
this.currentCategory = undefined;
params.delete('c');
}
else {
this.currentCategory = id;
params.set('c', id.toString());
}
window.history.pushState({}, '', decodeURIComponent(`/${this.faqPagePath}?${params.toString()}`));
window.scrollTo({ top: 0 });
window.dispatchEvent(new Event('popstate'));
}
}
__decorate([
property({ type: Object, attribute: 'api-wordpress' })
], SkhemataFaqCategories.prototype, "apiWordpress", void 0);
__decorate([
property({ type: String, attribute: 'faq-page-path' })
], SkhemataFaqCategories.prototype, "faqPagePath", void 0);
__decorate([
property({ type: Array })
], SkhemataFaqCategories.prototype, "categories", void 0);
__decorate([
property({ type: Number })
], SkhemataFaqCategories.prototype, "currentCategory", void 0);
__decorate([
property({ type: Object })
], SkhemataFaqCategories.prototype, "translationData", void 0);
//# sourceMappingURL=SkhemataFaqCategories.js.map