Add elevator.js

package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
         "bulma": "^0.9.4",
-        "darkreader": "^4.9.51"
+        "darkreader": "^4.9.51",
+        "elevator.js": "^1.0.1"
       },
       "devDependencies": {
         "esbuild": "^0.14.43",
@@ -211,6 +212,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/elevator.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elevator.js/-/elevator.js-1.0.1.tgz",
+      "integrity": "sha512-3+jUQIrUxDGjhF7cyrxi+NcqaDkYhQ+Y2UfVqozYMLxAY1i9l2ZjLWzPlFMFc4nx3SPYf9EPHEn1zUqpIWlXng=="
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -1735,6 +1741,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "elevator.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elevator.js/-/elevator.js-1.0.1.tgz",
+      "integrity": "sha512-3+jUQIrUxDGjhF7cyrxi+NcqaDkYhQ+Y2UfVqozYMLxAY1i9l2ZjLWzPlFMFc4nx3SPYf9EPHEn1zUqpIWlXng=="
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "bulma": "^0.9.4",
-    "darkreader": "^4.9.51"
+    "darkreader": "^4.9.51",
+    "elevator.js": "^1.0.1"
   }
 }

scripts/copy-npm-contrib.sh

@@ -16,3 +16,4 @@ mkcontrib() {
 }
 
 mkcontrib fontawesome node_modules/@fortawesome/fontawesome-free/{css,webfonts}
+mkcontrib elevator-js node_modules/elevator.js/demo/music/*

static/src/js/base.js

@@ -1,3 +1,5 @@
+const Elevator = require("elevator.js");
+
 window.addEventListener("load", () => {
   const navbarBurger = document.getElementById("navbar-burger");
   const navbar = document.getElementById("navbar");
@@ -7,7 +9,17 @@ window.addEventListener("load", () => {
     navbar.classList.toggle("is-active");
   });
 
-  document.getElementById("scroll-top").addEventListener("click", () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
+  document.querySelectorAll(".scroll-top").forEach((element) => {
+    element.addEventListener("click", () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+  });
+
+  const elevatorButton = document.getElementById("to-top-elevator");
+  new Elevator({
+    element: elevatorButton,
+    mainAudio: elevatorButton.dataset.mainAudio,
+    endAudio: elevatorButton.dataset.endAudio,
+    preloadAudio: false,
   });
 });

website/common/templates/common/footer.html

@@ -1,4 +1,4 @@
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags static %}
 
 <footer class="footer">
   <div class="has-text-centered">
@@ -6,9 +6,16 @@
       &copy; <a href="{% pageurl homepage %}">TheOrangeOne</a> {% now "Y" %}
     </p>
   </div>
-  <div class="has-text-centered is-size-7" id="to-top">
+  <div class="has-text-centered is-size-7">
     <p>
-      <a href="">To top <em>in style</em></a>
+      <a class="scroll-top">To top</a>
+      <a
+        id="to-top-elevator"
+        data-main-audio="{% static 'contrib/elevator-js/elevator.mp3' %}"
+        data-end-audio="{% static 'contrib/elevator-js/ding.mp3' %}"
+      >
+        <em>in style</em>
+      </a>
     </p>
   </div>
 </footer>