From e0615bf0ed5bca0ae23df872378aafa815b3a72a Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Fri, 10 Sep 2021 19:16:11 +0000
Subject: [PATCH] show new comment Form only when clicking button, to prevent
hcaptcha from loading
---
js/customElements/newComment.js | 7 +++++--
scss/_comments.scss | 13 +++++++++++++
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/js/customElements/newComment.js b/js/customElements/newComment.js
index b150dd8..30b301c 100644
--- a/js/customElements/newComment.js
+++ b/js/customElements/newComment.js
@@ -1,13 +1,16 @@
class newComment extends HTMLElement {
constructor() {
super();
- this.setupForm();
+ this.innerHTML = `
+ <button class="bigButton" id="showCommentButton">Neues Kommentar verfassen</button>
+ `;
+ document.getElementById("showCommentButton").onclick = this.setupForm;
}
async setupForm(){
let sitekey = await (await fetch("/API/config.php?name=sitekey")).text();
- this.innerHTML = `
+ this.parentElement.innerHTML = `
<form action="/API/newComment.php" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
diff --git a/scss/_comments.scss b/scss/_comments.scss
index 98d4de1..10b4e8c 100644
--- a/scss/_comments.scss
+++ b/scss/_comments.scss
@@ -65,3 +65,16 @@
.emailBox {
display: inline;
}
+
+.bigButton {
+ background-color: $accent-color;
+ color: #fff;
+ text-transform: uppercase;
+ padding: 15px;
+ font-size: 14px;
+ cursor: pointer;
+ outline: 0;
+ border: 0;
+ transition: background-color $link-hover-animation-time linear;
+ width: 100%;
+}
\ No newline at end of file
--
GitLab