feat: add checkbox options

- visitor can now disable umami tracking
- visitor can now hide Batrick


Former-commit-id: c092fca1f824e18586309376478e3ad95fcab3a2

2 files changed, 54 insertions, 49 deletions

diff --git a/layouts/_partials/components/back-to-top.html b/layouts/_partials/components/back-to-top.html
index 43e0807e..7e6786d8 100644
--- a/layouts/_partials/components/back-to-top.html
+++ b/layouts/_partials/components/back-to-top.html
@@ -14,59 +14,64 @@
 </div>
 
 <script>
+// hide Batrick if set
+if (localStorage.getItem('geedeapro.ui.hideBatrick') === 'true') {
+    document.getElementById('back2top').classList.add('hidden');
+} else {
+  // Batrick functionality
+  const backToTop = document.getElementById("back2top")
+  const backToTopButton = document.getElementById("back2top-button")
+  const backToTopInstruction = document.getElementById("back2top-instruction")
+  const seenAndUsedBat = localStorage.getItem("seenAndUsedBat")
 
-const backToTop = document.getElementById("back2top")
-const backToTopButton = document.getElementById("back2top-button")
-const backToTopInstruction = document.getElementById("back2top-instruction")
-const seenAndUsedBat = localStorage.getItem("seenAndUsedBat")
-
-function hideInstruction() {
-  backToTopInstruction.remove()
-}
-if (seenAndUsedBat) hideInstruction()
-
-// listen to button click and scroll to top
-backToTopButton.addEventListener("click", () => {
-  window.scrollTo({ top: 0, behavior: "smooth" })
-  if (!seenAndUsedBat) {
-    localStorage.setItem("seenAndUsedBat", true);
-    hideInstruction();
+  function hideInstruction() {
+    backToTopInstruction.remove()
   }
-})
+  if (seenAndUsedBat) hideInstruction()
 
-// listen to scroll and toggle button visibility
-let lastOffset = window.scrollY
+  // listen to button click and scroll to top
+  backToTopButton.addEventListener("click", () => {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+    if (!seenAndUsedBat) {
+      localStorage.setItem("seenAndUsedBat", true);
+      hideInstruction();
+    }
+  })
 
-window.addEventListener("scroll", () => {
-  const offset = window.scrollY
-  const batIsHidden = backToTop.classList.contains("-top-25")
-  const enoughHeight = offset >= 2000
-  const isScrollingUp = offset < lastOffset
-  const isScrollingDown = offset > lastOffset
+  // listen to scroll and toggle button visibility
+  let lastOffset = window.scrollY
 
-  function hide() {
-    backToTop.classList.remove("top-0")
-    backToTop.classList.add("-top-25")
-    backToTop.classList.remove("animate-head-shake")
-  }
+  window.addEventListener("scroll", () => {
+    const offset = window.scrollY
+    const batIsHidden = backToTop.classList.contains("-top-25")
+    const enoughHeight = offset >= 2000
+    const isScrollingUp = offset < lastOffset
+    const isScrollingDown = offset > lastOffset
 
-  function show() {
-    backToTop.classList.remove("-top-25")
-    backToTop.classList.add("top-0")
-    backToTop.classList.add("animate-head-shake")
-  }
+    function hide() {
+      backToTop.classList.remove("top-0")
+      backToTop.classList.add("-top-25")
+      backToTop.classList.remove("animate-head-shake")
+    }
 
-  if (enoughHeight && isScrollingUp && batIsHidden) {
-    // show only when scrolling up
-    show()
-  } else if (isScrollingDown && !batIsHidden) {
-    // hide as soon as user scrolls down again
-    hide()
-  }
+    function show() {
+      backToTop.classList.remove("-top-25")
+      backToTop.classList.add("top-0")
+      backToTop.classList.add("animate-head-shake")
+    }
 
-  // hide no matter what if too close to top
-  if (!enoughHeight) hide()
+    if (enoughHeight && isScrollingUp && batIsHidden) {
+      // show only when scrolling up
+      show()
+    } else if (isScrollingDown && !batIsHidden) {
+      // hide as soon as user scrolls down again
+      hide()
+    }
 
-  lastOffset = offset
-})
+    // hide no matter what if too close to top
+    if (!enoughHeight) hide()
+
+    lastOffset = offset
+  })
+}
 </script>
diff --git a/layouts/settings.html b/layouts/settings.html
index 85df3a78..8f373567 100644
--- a/layouts/settings.html
+++ b/layouts/settings.html
@@ -15,7 +15,8 @@
                 <button data-text-size="medium" class="{{ $buttonClass }} text-base md:text-lg">{{ T "settings.sampleText" }}</button>
                 <button data-text-size="large" class="{{ $buttonClass }} text-lg md:text-xl">{{ T "settings.sampleText" }}</button>
             </div>
-            <div class="leading-relaxed bg-neutral-200/50 py-1 px-4 rounded">
+            <div class="leading-relaxed bg-neutral-200/50 py-1 px-4 rounded
+                h-50 overflow-y-auto">
                 <p class="markdown-body">{{ T "settings.loremIpsum" . }}</p>
             </div>
         </section>
@@ -23,8 +24,7 @@
         <hr />
 
         <h3>{{ T "settings.otherOptions" . }}</h3>
-        <input id="allowTracking" type="checkbox" checked />
-        <label for="allowTracking">{{ T "settings.allowTracking" . }}</label>
+        <section id="checkbox-options" class="text-sm"></section>
     </article>
 {{ partial "footer.html" . }}
 {{ end }}