From 3d3d29304c52a5605a056c9f4f275a3d9f7b9754 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Sat, 17 Feb 2024 15:53:36 +0100
Subject: [PATCH] Font size scaling controls

---
 sass/chordpro.scss         |  1 +
 static/js/song-controls.js | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/sass/chordpro.scss b/sass/chordpro.scss
index 2f30d40..57e6d67 100644
--- a/sass/chordpro.scss
+++ b/sass/chordpro.scss
@@ -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 {
diff --git a/static/js/song-controls.js b/static/js/song-controls.js
index 0a07d80..3d89728 100644
--- a/static/js/song-controls.js
+++ b/static/js/song-controls.js
@@ -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");