Improve autoscrolling

This commit is contained in:
Emil Miler 2024-12-30 17:13:41 +01:00
parent ff8d9c80e6
commit 246d9aeed7
3 changed files with 33 additions and 6 deletions

View File

@ -191,7 +191,8 @@ main.song {
&.font-size>.button:hover, &.font-size>.button.active { background-color: #bf616a } &.font-size>.button:hover, &.font-size>.button.active { background-color: #bf616a }
&.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac } &.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac }
&.autoscroll>.button.active { background-color: #d08770 } &.autoscroll>.button:hover, &.autoscroll>.button.active { background-color: #d08770 }
&.autoscroll>#autoscroll.active { background-color: #bf616a }
.button{ .button{
display: grid; display: grid;

View File

@ -3,18 +3,40 @@ const song = document.querySelector("iframe.song").contentWindow;
// Autoscroll // Autoscroll
var scroll; var scroll;
var scrollTimeout = 60;
const minTimeout = 10;
const maxTimeout = 120;
const scrollIncrement = 20;
function pageScroll() { function pageScroll() {
song.scrollBy(0, 1); song.scrollBy(0, 1);
scroll = setTimeout(pageScroll, 80); scroll = setTimeout(pageScroll, scrollTimeout);
} }
document.querySelector("#autoscroll").addEventListener("click", function() { function updateScrollSpeed() {
if (this.classList.contains("active")) { if (controls.querySelector("#autoscroll").classList.contains("active")) {
clearTimeout(scroll); clearTimeout(scroll);
} else { scroll = setTimeout(pageScroll, scrollTimeout);
pageScroll();
} }
}
controls.querySelector("#autoscroll-increase").addEventListener("click", () => {
scrollTimeout = Math.max(minTimeout, scrollTimeout - scrollIncrement);
updateScrollSpeed();
});
controls.querySelector("#autoscroll-decrease").addEventListener("click", () => {
scrollTimeout = Math.min(maxTimeout, scrollTimeout + scrollIncrement);
updateScrollSpeed();
});
controls.querySelector("#autoscroll").addEventListener("click", function() {
this.classList.toggle("active"); this.classList.toggle("active");
if (this.classList.contains("active")) {
pageScroll();
} else {
clearTimeout(scroll);
}
}); });
// Scaling // Scaling
@ -31,5 +53,6 @@ controls.querySelector("#font-size-increase").addEventListener("click", () => pa
controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1)); controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0)); controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
// Display the controls on JS-enabled browsers // Display the controls on JS-enabled browsers
window.addEventListener("load", () => controls.classList.remove = "hidden"); window.addEventListener("load", () => controls.classList.remove = "hidden");

View File

@ -1,4 +1,5 @@
{% extends "index.html" %} {% extends "index.html" %}
{% block content %} {% block content %}
<main class="song"> <main class="song">
{% for asset in page.assets %} {% for asset in page.assets %}
@ -16,7 +17,9 @@
<div class="button icon-add" id="transpose-increase"></div> <div class="button icon-add" id="transpose-increase"></div>
</section> </section>
<section class="autoscroll"> <section class="autoscroll">
<div class="button icon-subtract" id="autoscroll-decrease"></div>
<div class="button icon-scroll" id="autoscroll"></div> <div class="button icon-scroll" id="autoscroll"></div>
<div class="button icon-add" id="autoscroll-increase"></div>
</section> </section>
</nav> </nav>
{% endif %} {% endif %}