From 79aa4847d584746a0ac9ed31d7e16797aada5e42 Mon Sep 17 00:00:00 2001
From: Flo Greistorfer <flo.greistorfer@sorogon.eu>
Date: Thu, 11 Jul 2024 13:14:18 +0200
Subject: [PATCH] added back to top button

---
 files/global.css           | 12 ++++++++++++
 templates/index.html.j2    | 23 ++++++++++++++++++++---
 themes/carnation.css       |  6 ++++++
 themes/cornflower.css      |  6 ++++++
 themes/default-dark.css    |  5 +++++
 themes/default.css         |  5 +++++
 themes/ivy.css             |  4 ++++
 themes/kjoe.css            |  5 +++++
 themes/monokai-vibrant.css |  5 +++++
 themes/rainbow.css         |  6 ++++++
 themes/sunflower.css       |  6 ++++++
 11 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/files/global.css b/files/global.css
index 77d9c58..e40f761 100644
--- a/files/global.css
+++ b/files/global.css
@@ -164,6 +164,18 @@ figure {
   object-fit: contain;
 }
 
+#totop {
+  display: none;
+  position: fixed;
+  bottom: 40px;
+  right: 30px;
+  z-index: 99;
+  cursor: pointer;
+  padding: 14px;
+  border-radius: 10px;
+  border-style: none;
+}
+
 /* Responsive layout - makes a four column-layout instead of eight columns */
 @media screen and (max-width: 1000px) {
   .column {
diff --git a/templates/index.html.j2 b/templates/index.html.j2
index 574aa7c..50d35e3 100644
--- a/templates/index.html.j2
+++ b/templates/index.html.j2
@@ -94,6 +94,7 @@
     {%- endif %}
     <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank">StaticGalleryBuilder</a></a> by <a href="https://github.com/greflm13"
         target="_blank">Flo Greistorfer</a>.</span>
+    <button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}
   {%- else %}
@@ -101,6 +102,7 @@
     <span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder</a></a> by <a
         href="https://github.com/greflm13"
         target="_blank" rel="noopener noreferrer">Flo Greistorfer</a>.</span>
+    <button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
   </div>
   {%- endif %}
   {% if images %}
@@ -150,10 +152,8 @@
     var re = /pid=(\d+)/;
 
     function openSwipe(img) {
-      // define options (if needed)
       var options = {
-        // optionName: 'option value'
-        index: img // start at first slide
+        index: img
       };
       var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
       gallery.init();
@@ -163,6 +163,23 @@
       var pid = window.location.href.match(re)[1];
       openSwipe(parseInt(pid));
     }
+
+    let totopbutton = document.getElementById("totop");
+
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        totopbutton.style.display = "block";
+      } else {
+        totopbutton.style.display = "none";
+      }
+    }
+
+    function topFunction() {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    }
   </script>
   {%- endif %}
 </body>
diff --git a/themes/carnation.css b/themes/carnation.css
index e27e770..b59c6ff 100644
--- a/themes/carnation.css
+++ b/themes/carnation.css
@@ -78,6 +78,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);
diff --git a/themes/cornflower.css b/themes/cornflower.css
index ce02c08..03d4179 100644
--- a/themes/cornflower.css
+++ b/themes/cornflower.css
@@ -78,6 +78,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);
diff --git a/themes/default-dark.css b/themes/default-dark.css
index 0efb6e5..308bb4a 100644
--- a/themes/default-dark.css
+++ b/themes/default-dark.css
@@ -56,6 +56,11 @@
   background-color: var(--bcolor2);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor1);
diff --git a/themes/default.css b/themes/default.css
index 7ecad04..7382b16 100644
--- a/themes/default.css
+++ b/themes/default.css
@@ -56,6 +56,11 @@
   background-color: var(--color2);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor2);
diff --git a/themes/ivy.css b/themes/ivy.css
index b0e0fbf..cd9f109 100644
--- a/themes/ivy.css
+++ b/themes/ivy.css
@@ -78,6 +78,10 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);
diff --git a/themes/kjoe.css b/themes/kjoe.css
index fbc612e..1ef7824 100644
--- a/themes/kjoe.css
+++ b/themes/kjoe.css
@@ -76,6 +76,11 @@
   background-color: var(--bcolor3);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor1);
diff --git a/themes/monokai-vibrant.css b/themes/monokai-vibrant.css
index a647059..26f530b 100644
--- a/themes/monokai-vibrant.css
+++ b/themes/monokai-vibrant.css
@@ -59,6 +59,11 @@
   background-color: var(--bcolor5);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
 
 body {
   color: var(--bcolor1);
diff --git a/themes/rainbow.css b/themes/rainbow.css
index 13ad791..2e34f81 100644
--- a/themes/rainbow.css
+++ b/themes/rainbow.css
@@ -80,6 +80,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color2);
+  color: var(--bcolor4);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);
diff --git a/themes/sunflower.css b/themes/sunflower.css
index d6b0ca5..435ddef 100644
--- a/themes/sunflower.css
+++ b/themes/sunflower.css
@@ -78,6 +78,12 @@
   background-color: var(--bcolor4);
 }
 
+#totop {
+  background-color: var(--color1);
+  color: var(--bcolor1);
+  font-weight: 800;
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);