Add elevator.js
This commit is contained in:
parent
6f3c7a0162
commit
70c9a986b4
5 changed files with 39 additions and 7 deletions
13
package-lock.json
generated
13
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -16,3 +16,4 @@ mkcontrib() {
|
|||
}
|
||||
|
||||
mkcontrib fontawesome node_modules/@fortawesome/fontawesome-free/{css,webfonts}
|
||||
mkcontrib elevator-js node_modules/elevator.js/demo/music/*
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
{% load wagtailcore_tags %}
|
||||
{% load wagtailcore_tags static %}
|
||||
|
||||
<footer class="footer">
|
||||
<div class="has-text-centered">
|
||||
|
@ -6,9 +6,16 @@
|
|||
© <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>
|
||||
|
|
Loading…
Reference in a new issue