Add legal checkboxes under comment replies

partials/isso-scripts.hbs

@@ -0,0 +1,76 @@
+<script>
+  function addCheckbox(container = document) {
+    const original_submit = container.querySelector(
+      ".post-action input[type='submit']"
+    );
+    original_submit.style.setProperty("display", "none");
+    const faux_submit = document.createElement("input");
+    faux_submit.value = "Wyślij";
+    faux_submit.type = "submit";
+    const comment_checkbox_id = "comment-checkbox";
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.id = comment_checkbox_id;
+    checkbox.required = true;
+    const label = document.createElement("label");
+    label.style.setProperty("line-height", 1);
+    label.style.setProperty("margin", "1em 0");
+    label.for = comment_checkbox_id;
+    label.appendChild(checkbox);
+    label.id = comment_checkbox_id + "__label";
+    const label_text = document.createElement("span");
+    label_text.innerHTML = `Zapoznałam/em się z <a href="/regulamin-komentarzy">Regulaminem publikowania komentarzy</a> i&nbsp;akceptuję jego treść.`;
+    label.appendChild(label_text);
+    container
+      .querySelector("#isso-thread .auth-section")
+      .insertBefore(
+        label,
+        container.querySelector(".auth-section .post-action")
+      );
+    const legal = document.createElement("p");
+    legal.classList.add("legal");
+    legal.innerHTML = `Współadministratorami danych osobowych są Arkadiusz Wieczorek oraz Jan Orlik. Dane osobowe podane w formularzu są przetwarzane w celu realizacji usługi publikowania komentarzy na stronie internetowej współadministratorów, jak również w celu ustalenia, dochodzenia lub obrony roszczeń. Masz w szczególności prawo dostępu do swoich danych osobowych, ich usunięcia oraz wniesienia sprzeciwu wobec przetwarzania danych. Szczegóły dotyczące przetwarzania danych osobowych i przysługujących Ci praw znajdują się w <a href="/polityka-prywatnosci">Polityce prywatności</a>.`;
+    legal.style.setProperty("hyphens", "auto");
+    legal.style.setProperty("text-align", "justify");
+    legal.style.setProperty("font-style", "italic");
+    legal.style.setProperty("font-size", "1.333rem");
+    legal.style.setProperty("line-height", "150%");
+    container
+      .querySelector("#isso-thread .auth-section")
+      .insertBefore(
+        legal,
+        container.querySelector(".auth-section .post-action")
+      );
+    const email_input = container.querySelector(`input[type="email"]`);
+    email_input.placeholder = "adres E-mail";
+    email_input.required = true;
+    faux_submit.addEventListener("click", () => {
+      if (!email_input.validity.valid) {
+        email_input.reportValidity();
+      } else if (!checkbox.checked) {
+        checkbox.reportValidity();
+      } else {
+        original_submit.click();
+      }
+    });
+    original_submit.parentElement.appendChild(faux_submit);
+  }
+
+  (async function () {
+    for (let i = 0; i <= 20; i++) {
+      await addCheckbox(document.querySelector("#isso-thread"));
+      if (document.querySelector(".post-action input[type='submit']")) {
+        continue;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
+    addCheckbox(document.querySelector("#isso-thread"));
+    document.querySelectorAll(".isso-comment-footer a.reply").forEach((el) =>
+      el.addEventListener("click", (e) =>
+        setTimeout(() => {
+          addCheckbox(e.target.parentNode.nextSibling);
+        }, 20)
+      )
+    );
+  })();
+</script>

post.hbs

@@ -203,61 +203,7 @@
             ></script>
 
             <section id="isso-thread"></section>
-            <script>
+            {{> isso-scripts }}
-                (async function () {
-                    function addCheckbox() {
-                        const original_submit = document.querySelector(".post-action input[type='submit']");
-                        original_submit.style.setProperty("display", "none")
-                        const faux_submit = document.createElement("input")
-                        faux_submit.value = "Wyślij"
-                        faux_submit.type = "submit"
-                        const comment_checkbox_id = "comment-checkbox"
-                        const checkbox = document.createElement("input")
-                        checkbox.type = "checkbox"
-                        checkbox.id = comment_checkbox_id
-                        checkbox.required = true
-                        const label = document.createElement("label")
-                        label.style.setProperty("line-height", 1);
-                        label.style.setProperty("margin", "1em 0");
-                        label.for = comment_checkbox_id;
-                        label.appendChild(checkbox)
-                        label.id = comment_checkbox_id + "__label"
-                        const label_text = document.createElement("span")
-                        label_text.innerHTML = `Zapoznałam/em się z <a href="/regulamin-komentarzy">Regulaminem publikowania komentarzy</a> i&nbsp;akceptuję jego treść.`
-                        label.appendChild(label_text)
-                        document.querySelector("#isso-thread .auth-section").insertBefore(label, document.querySelector(".auth-section .post-action"))
-                        const legal = document.createElement("p");
-                        legal.classList.add("legal");
-                        legal.innerHTML = `Współadministratorami danych osobowych są Arkadiusz Wieczorek oraz Jan Orlik. Dane osobowe podane w formularzu są przetwarzane w celu realizacji usługi publikowania komentarzy na stronie internetowej współadministratorów, jak również w celu ustalenia, dochodzenia lub obrony roszczeń. Masz w szczególności prawo dostępu do swoich danych osobowych, ich usunięcia oraz wniesienia sprzeciwu wobec przetwarzania danych. Szczegóły dotyczące przetwarzania danych osobowych i przysługujących Ci praw znajdują się w <a href="/polityka-prywatnosci">Polityce prywatności</a>.`
-                        legal.style.setProperty("hyphens", "auto")
-                        legal.style.setProperty("text-align", "justify")
-                        legal.style.setProperty("font-style", "italic")
-                        legal.style.setProperty("font-size", "1.333rem")
-                        legal.style.setProperty("line-height", "150%")
-                        document.querySelector("#isso-thread .auth-section").insertBefore(legal, document.querySelector(".auth-section .post-action"))
-                        const email_input = document.querySelector("#isso-thread").querySelector(`input[type="email"]`)
-                        email_input.placeholder = "adres E-mail";
-                        email_input.required = true;
-                        faux_submit.addEventListener("click", ()=>{
-                          if(!email_input.validity.valid){
-                             email_input.reportValidity()
-                           }else if(!checkbox.checked){
-                             checkbox.reportValidity()    
-                           }else {
-                             original_submit.click()
-                           }
-                        })
-                        original_submit.parentElement.appendChild(faux_submit)
-                    }
-                    for (let i = 0; i <= 20; i++) {
-                        if (document.querySelector(".post-action input[type='submit']")) {
-                            continue
-                        }
-                        await new Promise((resolve) => setTimeout(resolve, 200));
-                    }
-                    addCheckbox();
-                })()
-            </script>
         </div>
     </main>
 
@@ -326,7 +272,6 @@
             var $postContent = $(".post-full-content");
             $postContent.fitVids();
             // FitVids - end
-
             // Replace nav with title on scroll - start
             Casper.stickyNavTitle({
                 navSelector: '.site-nav-main',
@@ -354,4 +299,4 @@
             });
         });
     </script>
-    {{/contentFor}}
+    {{/contentFor}}