77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
const template = document.createElement('template');
|
|
|
|
template.innerHTML = `
|
|
<style>
|
|
a {
|
|
color: var(--wc-link-color);
|
|
text-decoration-color: var(--wc-link-decoration-color);
|
|
text-decoration-thickness: var(--wc-link-decoration-thickness);
|
|
}
|
|
#comment {
|
|
margin: var(--wc-comment-text-margin);
|
|
}
|
|
#comment p {
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
#meta {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
}
|
|
#meta-text {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
width: 100%;
|
|
}
|
|
#meta-text p {
|
|
margin: 0 1rem 0 1rem;
|
|
}
|
|
</style>
|
|
|
|
<article id="commentContainer" class="blog-comment" part="main">
|
|
<div id="meta" part="meta">
|
|
<div>
|
|
<wc-profile-pic url="" />
|
|
</div>
|
|
<div id="meta-text" part="meta-text">
|
|
<p id="author" part="author">
|
|
<a id="author-link" part="author-link"></a><span> says:</span>
|
|
</p>
|
|
<p id="publish-date" part="publish-date"></p>
|
|
</div>
|
|
</div>
|
|
<div id="comment" part="content">
|
|
</div>
|
|
</article>
|
|
`
|
|
|
|
class comment extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
|
|
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
|
this.$comment = this._shadowRoot.querySelector('#commentContainer');
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['author_name', 'author_url', 'avatar_url', 'comment_content', 'publish_date'];
|
|
}
|
|
|
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
if (oldVal != newVal) {
|
|
this[name] = newVal;
|
|
this.render();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
this.$comment.querySelector('#author-link').innerHTML = this.author_name;
|
|
this.$comment.querySelector('#author-link').href = this.author_url;
|
|
this.$comment.querySelector('wc-profile-pic').setAttribute('url', this.avatar_url)
|
|
this.$comment.querySelector('#comment').innerHTML = this.comment_content;
|
|
this.$comment.querySelector('#publish-date').innerHTML = this.publish_date;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('wc-comment', comment);
|