2020-10-17 13:30:30 +00:00
|
|
|
|
|
|
|
class FeedItem extends HTMLElement {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.attachShadow({mode: 'open'});
|
|
|
|
}
|
|
|
|
|
|
|
|
load() {
|
|
|
|
const template = document.createElement('template');
|
|
|
|
template.innerHTML = `
|
|
|
|
<style>
|
2020-10-17 18:02:52 +00:00
|
|
|
:root {
|
2020-10-17 13:30:30 +00:00
|
|
|
width: 100%;
|
2020-10-17 18:02:52 +00:00
|
|
|
overflow: scroll;
|
|
|
|
overflow-x: auto;
|
2020-10-17 13:30:30 +00:00
|
|
|
}
|
|
|
|
* {
|
|
|
|
max-width: 100%;
|
2020-10-17 18:02:52 +00:00
|
|
|
height: auto;
|
|
|
|
}
|
|
|
|
table {
|
|
|
|
width: 100%;
|
2020-10-17 13:30:30 +00:00
|
|
|
}
|
|
|
|
img {
|
|
|
|
margin: auto auto;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
`;
|
|
|
|
|
|
|
|
if (!this.loaded) {
|
|
|
|
return fetch(`/api/item/${this.getAttribute('item-id')}`)
|
|
|
|
.then(res => res.json())
|
|
|
|
.then(item => {
|
|
|
|
template.innerHTML += item.Content || item.Description;
|
|
|
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
|
|
})
|
|
|
|
.then(() => this.loaded = true);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define('feed-item', FeedItem);
|