46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
class commentsDisplay extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.getComments()
|
|
}
|
|
|
|
async getComments() {
|
|
var graphql = JSON.stringify({
|
|
query: 'query($article: String!) { comments(article: $article) { name comment gravatarURL }}',
|
|
variables: {
|
|
"article": window.location.pathname
|
|
}
|
|
})
|
|
var requestOptions = {
|
|
method: 'POST',
|
|
body: graphql,
|
|
};
|
|
let comments = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data.comments;
|
|
comments.forEach((element) => {
|
|
const h3 = document.createElement("h3");
|
|
h3.classList.add("commentTitle");
|
|
h3.innerText = element["name"];
|
|
this.appendChild(h3);
|
|
|
|
const commentDiv = document.createElement("div");
|
|
commentDiv.classList.add("comment");
|
|
this.appendChild(commentDiv);
|
|
|
|
const image = document.createElement("img");
|
|
image.src = element["gravatarURL"];
|
|
commentDiv.appendChild(image);
|
|
|
|
const article = document.createElement("article");
|
|
article.classList.add("commentArticle");
|
|
commentDiv.appendChild(article);
|
|
|
|
const commentText = document.createElement("p");
|
|
commentText.classList.add("commentText");
|
|
commentText.innerText = element["comment"];
|
|
article.appendChild(commentText);
|
|
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("jl-comments_display", commentsDisplay);
|