diff --git a/js/customElements/newComment.js b/js/customElements/newComment.js index 0fd60c3279a0ee5643d0d484dda91a8219252d10..99defa717e10e31a5f8f10b138d78317f4075bb5 100644 --- a/js/customElements/newComment.js +++ b/js/customElements/newComment.js @@ -1,20 +1,21 @@ class newComment extends HTMLElement { - constructor() { - super(); - this.innerHTML = ` - <button class="bigButton" id="showCommentButton">Neues Kommentar verfassen</button> - `; - document.getElementById("showCommentButton").onclick = this.setupForm; + connectedCallback() { + const buttonElement = document.createElement("button"); + buttonElement.classList.add("bigButton"); + buttonElement.id = "showCommentButton"; + buttonElement.innerText = "Neues Kommentar verfassen"; + this.appendChild(buttonElement); + buttonElement.onclick = this.setupForm; } async setupForm() { var graphql = JSON.stringify({ query: "query {sitekey}" - }) - var requestOptions = { + }) + var requestOptions = { method: 'POST', body: graphql, - }; + }; let sitekey = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.sitekey; @@ -67,7 +68,7 @@ class newComment extends HTMLElement { commentInput.id = "comment"; form.appendChild(commentInput); - + linebreak = document.createElement("br"); form.appendChild(linebreak); @@ -76,7 +77,7 @@ class newComment extends HTMLElement { hcaptcha.setAttribute("data-theme", "dark"); hcaptcha.setAttribute("data-sitekey", sitekey); form.appendChild(hcaptcha); - + linebreak = document.createElement("br"); form.appendChild(linebreak); @@ -98,27 +99,27 @@ class newComment extends HTMLElement { labelDatenschutz.appendChild(datenschutzTextNode); submitButton.onclick = async () => { - if(nameInput.value == "" || commentInput.value == "") { + if (nameInput.value == "" || commentInput.value == "") { alert("Name oder Kommentar nicht ausgefüllt."); return; } var graphql = JSON.stringify({ - query: 'query($article: String!, $name: String!, $hCaptchaResponse: String!, $email: String!, $comment: String!) { newComment(article: $article, name: $name, email: $email, comment: $comment, hCaptchaResponse: $hCaptchaResponse)}', - variables: { - "article": pageName, - "name": nameInput.value, - "email": mailInput.value, - "comment": commentInput.value, - "hCaptchaResponse": form.querySelector(".h-captcha iframe").getAttribute("data-hcaptcha-response") - } + query: 'query($article: String!, $name: String!, $hCaptchaResponse: String!, $email: String!, $comment: String!) { newComment(article: $article, name: $name, email: $email, comment: $comment, hCaptchaResponse: $hCaptchaResponse)}', + variables: { + "article": pageName, + "name": nameInput.value, + "email": mailInput.value, + "comment": commentInput.value, + "hCaptchaResponse": form.querySelector(".h-captcha iframe").getAttribute("data-hcaptcha-response") + } }) var requestOptions = { - method: 'POST', - body: graphql, + method: 'POST', + body: graphql, }; let data = (await (await fetch("/API/graphql.php", requestOptions)).json()).data; - if(data.newComment == "OK"){ + if (data.newComment == "OK") { document.querySelector("jl-comments_display").getComments(); parent.innerHTML = "<jl-new_comment></jl-new_comment>" } else {