60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
import { LitElement, html } from 'lit'
|
|
import { until } from 'lit/directives/until.js'
|
|
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
|
|
|
|
export class DisplayFeed extends LitElement {
|
|
|
|
static get properties () {
|
|
return {
|
|
max: { type: Boolean },
|
|
posts: { type: Array, state: true },
|
|
feed: { type: String },
|
|
title: { type: String }
|
|
}
|
|
}
|
|
|
|
constructor () {
|
|
super()
|
|
this.title = 'Display Feed'
|
|
}
|
|
|
|
_post (post) {
|
|
return html`<div class="df-item"><h3 class="df-title">${post.title}</h3><div class="df-content">${unsafeHTML(post.content)}</div></div>`
|
|
}
|
|
|
|
// connectedCallback () {
|
|
// super.connectedCallback()
|
|
// console.error
|
|
// this.posts = fetch(this.feed)
|
|
// .then(async res => {
|
|
// const posts = await res.json()
|
|
// return posts.posts.map(this._post)
|
|
// })
|
|
// }
|
|
|
|
updated (changedProperties) {
|
|
console.error('dentro changed ', changedProperties)
|
|
console.error(this.feed)
|
|
console.error(changedProperties)
|
|
if (changedProperties.has('feed')) {
|
|
console.error('feed cambiato')
|
|
this.posts = fetch(this.feed)
|
|
.then(async res => {
|
|
const posts = await res.json()
|
|
return posts.posts.map(this._post)
|
|
})
|
|
}
|
|
}
|
|
|
|
render() {
|
|
// const loading = html`<span>Loading...</span>`
|
|
// const title = html`<h2>${this.title}</h2>`
|
|
return html`<h2>${this.title}</h2>${until(this.posts, 'Loading...')}`
|
|
}
|
|
|
|
// do not create a shadowDOM (we want style pollution from outside)
|
|
createRenderRoot() { return this }
|
|
}
|
|
|
|
|
|
customElements.define('display-feed', DisplayFeed)
|