@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.
145 lines • 5.14 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 { SkhemataBlogCategoriesStyle } from '../style/SkhemataBlogCategoriesStyle';
import { translationEngDefault } from '../translation/SkhemataBlogCategories/eng';
// Import custom element directives
// Import element dependencies
// import {debounce} from 'lodash';
export class SkhemataBlogCategories extends SkhemataBase {
constructor() {
super();
// Property decorator (requires TypeScript or Babel)
// Attributes that can be passed into different elements
this.apiWordpress = {
url: ''
};
this.blogPagePath = '';
this.blogPostPath = '';
this.categories = [];
this.categoryTopBtn = '/';
this.categoryTopBtnImage = 'https://cdn.skhemata.com/www.skhemata.com/img/cosmic_landing_bg.png';
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, SkhemataBlogCategoriesStyle];
}
async firstUpdated() {
await super.firstUpdated();
this.getCategories();
}
/**
* Implement `render` to define a template for your element.
* Use JS template literals
*/
render() {
return html ` <h3
class="title is-5 category-list-title"
style="margin-left: 18px"
>
${this.getStr('SkhemataBlogCategories.categoriesTitle')}
</h3>
<div class="buttons">
<button
class="category-item button is-light is-fullwidth"
@click="${() => this.filterCategory(-1)}"
>
${this.getStr('SkhemataBlogCategories.allCategories')}
</button>
${this.categories
.filter((obj) => {
if (!obj.name.includes('Featured Articles')) {
return obj;
}
return false;
})
.map((category) => category.name !== 'Featured Articles' ||
category.name !== 'Featured Articles Landing'
? 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>
`
: html ``)}
</div>`;
}
/**
* Get categories
*/
async getCategories() {
await fetch(`${this.apiWordpress.url}/categories?parent=0&per_page=100`)
.then(response => response.json())
.then(async (data) => {
this.categories = data;
}).catch(() => {
});
}
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.location.href = `/${this.blogPagePath}?${params.toString()}`;
window.history.pushState({}, '', decodeURIComponent(`/${this.blogPagePath}?${params.toString()}`));
window.scrollTo({ top: 0 });
window.dispatchEvent(new Event('popstate'));
}
}
__decorate([
property({ type: Object, attribute: 'api-wordpress' })
], SkhemataBlogCategories.prototype, "apiWordpress", void 0);
__decorate([
property({ type: String, attribute: 'blog-page-path' })
], SkhemataBlogCategories.prototype, "blogPagePath", void 0);
__decorate([
property({ type: String, attribute: 'blog-post-path' })
], SkhemataBlogCategories.prototype, "blogPostPath", void 0);
__decorate([
property({ type: Array })
], SkhemataBlogCategories.prototype, "categories", void 0);
__decorate([
property({ type: Number })
], SkhemataBlogCategories.prototype, "currentCategory", void 0);
__decorate([
property({ type: String })
], SkhemataBlogCategories.prototype, "categoryTopBtn", void 0);
__decorate([
property({ type: String })
], SkhemataBlogCategories.prototype, "categoryTopBtnImage", void 0);
__decorate([
property({ type: Object })
], SkhemataBlogCategories.prototype, "translationData", void 0);
//# sourceMappingURL=SkhemataBlogCategories.js.map