gopherss/views/static/feed-item.js

92 lines
2.5 KiB
JavaScript
Raw Normal View History

2020-10-17 13:30:30 +00:00
class FeedItem extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
}
2020-10-17 19:52:23 +00:00
connectedCallback() {
2020-10-17 13:30:30 +00:00
const template = document.createElement('template');
template.innerHTML = `
<style>
2020-10-17 19:52:23 +00:00
@font-face {
font-family: "charter";
src: url("https://glyph.medium.com/font/be78681/0-3j_4g_6bu_6c4_6c8_6c9_6cc_6cd_6ci_6cm/charter-400-normal.woff") format("woff");
font-style: normal;
font-weight: 400;
unicode-range: U+0-7F, U+A0, U+200A, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026;
}
2020-10-17 18:50:13 +00:00
:host {
width: 100% !important;
overflow: scroll !important;
overflow-x: auto !important;
2020-11-08 19:16:10 +00:00
font-size: 18px;
2020-10-17 13:30:30 +00:00
}
* {
2020-10-17 18:50:13 +00:00
max-width: 100% !important;
height: auto !important;
2020-11-08 19:16:10 +00:00
float: none !important;
2020-10-17 18:02:52 +00:00
}
table {
2020-10-17 18:50:13 +00:00
width: 100% !important;
2020-10-17 13:30:30 +00:00
}
2020-11-08 19:16:10 +00:00
2020-10-17 13:30:30 +00:00
img {
2020-10-17 18:50:13 +00:00
margin: auto auto !important;
2020-10-17 13:30:30 +00:00
}
2020-10-17 18:50:13 +00:00
p {
2020-10-17 19:52:23 +00:00
font-family: charter, Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: 400;
letter-spacing: -0.063px;
line-height: 32px
2020-10-17 18:50:13 +00:00
}
a {
color: #333;
font-weight: bold;
}
:host(.dark) a {
color: #ccc;
}
2020-11-08 19:16:10 +00:00
a:hover, :host(.dark) a:hover {
color: #ff2e88;
}
2020-10-17 18:50:13 +00:00
2020-10-17 13:30:30 +00:00
</style>
`;
2020-10-17 19:52:23 +00:00
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));
2020-11-07 16:30:15 +00:00
[...this.shadowRoot.querySelectorAll('a[href^=http]')].forEach(a => {
a.setAttribute("target", "_blank");
a.setAttribute("rel", "noopener");
2020-11-09 21:19:15 +00:00
});
[...this.shadowRoot.querySelectorAll('p')].forEach(p => {
if (p.innerText.trim() == "") {
p.remove();
}
2020-11-18 19:02:31 +00:00
});
let url = new URL(item.URL);
[...this.shadowRoot.querySelectorAll('img[src^="/"]')].forEach(i => {
i.src = url.origin + i.getAttribute('src');
});
[...this.shadowRoot.querySelectorAll('a[href^="/"]')].forEach(a => {
a.href = url.origin + a.getAttribute('src');
});
[...this.shadowRoot.querySelectorAll('img:not([src^=http])')].forEach(i => {
i.src = url.origin +'/'+ i.getAttribute('src');
});
[...this.shadowRoot.querySelectorAll('a:not([href^=http])')].forEach(a => {
a.href = url.origin +'/'+ a.getAttribute('src');
});
2020-10-17 19:52:23 +00:00
})
2020-10-17 13:30:30 +00:00
}
}
customElements.define('feed-item', FeedItem);