59 lines
1.7 KiB
JavaScript
59 lines
1.7 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: Object, state: true },
|
|
url: { type: String },
|
|
title: { type: String }
|
|
}
|
|
}
|
|
|
|
constructor () {
|
|
super()
|
|
this.title = 'Display Feed'
|
|
}
|
|
|
|
_post (post) {
|
|
return html`<div class="df-item"><img src="${post.image}" /><a href="${post.url}"><h3 class="df-title">${post.title}</h3></a><div class="df-content">${unsafeHTML(post.content_html || post.content_text)}</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) {
|
|
if (changedProperties.has('url')) {
|
|
this.feed = fetch(this.url)
|
|
.then(async res => {
|
|
const feed = await res.json()
|
|
const head = html`<a href="${feed.home_page_url}"><h3>${feed.title}</h3></a><small>${feed.description}</small>`
|
|
const posts = feed.items.map(this._post)
|
|
return html`${head}${posts}`
|
|
})
|
|
}
|
|
}
|
|
|
|
render() {
|
|
// const loading = html`<span>Loading...</span>`
|
|
// const title = html`<h2>${this.title}</h2>`
|
|
return html`${until(this.feed, 'Loading...')}`
|
|
}
|
|
|
|
// do not create a shadowDOM (we want style pollution from outside)
|
|
createRenderRoot() { return this }
|
|
}
|
|
|
|
|
|
customElements.define('display-feed', DisplayFeed)
|