From 964a58105b99f819581d0f2014099c7e8363e8e2 Mon Sep 17 00:00:00 2001
From: Birger Schacht <birger.schacht@oeaw.ac.at>
Date: Thu, 19 Oct 2023 16:29:15 +0200
Subject: [PATCH] refactor: replace external scrolltotop solution with own

Closes: #365
---
 apis_core/apis_metainfo/templates/base.html   |  8 ++--
 .../core/templates/partials/backtotopbtn.html | 41 +++++++++++++++++++
 2 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 apis_core/core/templates/partials/backtotopbtn.html

diff --git a/apis_core/apis_metainfo/templates/base.html b/apis_core/apis_metainfo/templates/base.html
index 0092b5b14..4867252a2 100644
--- a/apis_core/apis_metainfo/templates/base.html
+++ b/apis_core/apis_metainfo/templates/base.html
@@ -52,9 +52,6 @@
 
     {% if PROJECT_CSS %}<link rel="stylesheet" href="{{ PROJECT_CSS }}?rnd=1" rel="stylesheet" />{% endif %}
 
-    <link rel="stylesheet"
-          href="{% shared_url %}apis/libraries/scroll-to-top/css/ap-scroll-top.min.css" />
-
     {% block scriptHeader %}{% endblock %}
 
   </head>
@@ -250,7 +247,6 @@
       {% include "partials/bootstrap4_js.html" %}
       <script type="text/javascript"
               src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
-      <script src="{% shared_url %}apis/libraries/scroll-to-top/js/ap-scroll-top.min.js"></script>
     {% endblock %}
 
     {% block scripts2 %}
@@ -269,5 +265,9 @@
       </div>
     {% endblock modal %}
 
+    {% block backtotopbtn %}
+      {% include "partials/backtotopbtn.html" %}
+    {% endblock backtotopbtn %}
+
   </body>
 </html>
diff --git a/apis_core/core/templates/partials/backtotopbtn.html b/apis_core/core/templates/partials/backtotopbtn.html
new file mode 100644
index 000000000..5718b2466
--- /dev/null
+++ b/apis_core/core/templates/partials/backtotopbtn.html
@@ -0,0 +1,41 @@
+<style>
+#btn-back-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: none;
+  opacity: 0.5;
+}
+</style>
+<button type="button"
+        class="btn btn-danger btn-floating btn-lg"
+        id="btn-back-to-top">
+  <span>&uarr;</span>
+</button>
+<script>
+//Get the button
+let mybutton = document.getElementById("btn-back-to-top");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function () {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+// When the user clicks on the button, scroll to the top of the document
+mybutton.addEventListener("click", backToTop);
+
+function backToTop() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}
+</script>