Add elevator.js

This commit is contained in:
Jake Howard 2022-06-20 08:46:42 +01:00
parent 6f3c7a0162
commit 70c9a986b4
Signed by: jake
GPG key ID: 57AFB45680EDD477
5 changed files with 39 additions and 7 deletions

13
package-lock.json generated
View file

@ -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",

View file

@ -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"
}
}

View file

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

View file

@ -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,
});
});

View file

@ -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>