em
/
mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Font size scaling controls
Build / build (push) Has been cancelled Details

This commit is contained in:
Emil Miler 2024-02-17 15:53:36 +01:00
parent 8ac02fd0be
commit 3d3d29304c
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sass/chordpro.scss
View File

@ -10,6 +10,7 @@ body {
color: $col-white;
font-family: "Noto Sans", Tahoma, Geneva, Verdana, sans-serif;
text-rendering: geometricPrecision;
transform-origin: 0 0;
}
table {

15
static/js/song-controls.js
View File

@ -1,6 +1,7 @@
const controls = document.querySelector(".controls");
const song = document.querySelector("iframe.song").contentWindow;
// Autoscroll
var scroll;
function pageScroll() {
song.scrollBy(0, 1);
@ -16,5 +17,19 @@ document.querySelector("#autoscroll").addEventListener("click", function() {
this.classList.toggle("active");
});
// Scaling
function pageScale(value) {
if (value === 0) {
song.document.body.style.transform = "scale(1)";
return;
}
const currentScale = parseFloat(song.document.body.style.transform.split("scale(")[1]) || 1;
song.document.body.style.transform = "scale(" + (currentScale + value) + ")";
}
controls.querySelector("#font-size-increase").addEventListener("click", () => pageScale(0.1));
controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
// Display the controls on JS-enabled browsers
window.addEventListener("load", () => controls.classList.remove = "hidden");