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

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

Browse Source
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
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; color: $col-white;
font-family: "Noto Sans", Tahoma, Geneva, Verdana, sans-serif; font-family: "Noto Sans", Tahoma, Geneva, Verdana, sans-serif;
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
transform-origin: 0 0;
} }
table { table {

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

@@ -1,6 +1,7 @@
const controls = document.querySelector(".controls"); const controls = document.querySelector(".controls");
const song = document.querySelector("iframe.song").contentWindow; const song = document.querySelector("iframe.song").contentWindow;
// Autoscroll
var scroll; var scroll;
function pageScroll() { function pageScroll() {
song.scrollBy(0, 1); song.scrollBy(0, 1);
@@ -16,5 +17,19 @@ document.querySelector("#autoscroll").addEventListener("click", function() {
this.classList.toggle("active"); 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 // Display the controls on JS-enabled browsers
window.addEventListener("load", () => controls.classList.remove = "hidden"); window.addEventListener("load", () => controls.classList.remove = "hidden");