From 09a4b138d14305d7ab570bec8d7f25b720f7f715 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Fri, 16 Feb 2024 15:31:30 +0100
Subject: [PATCH] Basic controls css and autoscroll

---
 sass/style.scss            | 58 +++++++++++++++++++++++++++++++++++---
 static/js/song-controls.js | 20 +++++++++++++
 templates/song.html        | 20 ++++++++++++-
 3 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 static/js/song-controls.js

diff --git a/sass/style.scss b/sass/style.scss
index e7a3322..0dc1eda 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -166,21 +166,71 @@ main.songs {
 }
 
 main.song {
+	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	max-width: 50em;
-	min-height: 100vh;
 	margin: 0 auto;
-	padding-left: .5em;
 
 	iframe {
+		flex-grow: 1;
 		display: block;
 		width: 100%;
+		padding-left: .5em;
 		border: 0;
-		flex-grow: 1;
 	}
 
 	.controls {
-		display: none; // Temporary
+		display: flex;
+		justify-content: center;
+		gap: 2em;
+		background-color: #3b4252;
+
+		section {
+			display:flex;
+
+			&.font-size>.button:hover, &.font-size>.button.active { background-color: #bf616a }
+			&.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac }
+			&.autoscroll>.button.active { background-color: #d08770 }
+
+			.button{
+				display: grid;
+				align-items: center;
+				justify-items: center;
+				height: 2.5em;
+				width: 2.5em;
+				cursor: pointer;
+				background-position: center;
+				background-size: 1.5em;
+				background-repeat: no-repeat;
+
+
+				&.icon-add {
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z'%3E%3C/path%3E%3C/svg%3E");
+				}
+				&.icon-subtract {
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M5 11V13H19V11H5Z'%3E%3C/path%3E%3C/svg%3E");
+				}
+				&.icon-font-size {
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M11.246 15H4.75416L2.75416 20H0.600098L7.0001 4H9.0001L15.4001 20H13.246L11.246 15ZM10.446 13L8.0001 6.88516L5.55416 13H10.446ZM21.0001 12.5351V12H23.0001V20H21.0001V19.4649C20.4118 19.8052 19.7287 20 19.0001 20C16.791 20 15.0001 18.2091 15.0001 16C15.0001 13.7909 16.791 12 19.0001 12C19.7287 12 20.4118 12.1948 21.0001 12.5351ZM19.0001 18C20.1047 18 21.0001 17.1046 21.0001 16C21.0001 14.8954 20.1047 14 19.0001 14C17.8955 14 17.0001 14.8954 17.0001 16C17.0001 17.1046 17.8955 18 19.0001 18Z'%3E%3C/path%3E%3C/svg%3E");
+				}
+				&.icon-transpose {
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M12 13.5351V3H20V5H14V17C14 19.2091 12.2091 21 10 21C7.79086 21 6 19.2091 6 17C6 14.7909 7.79086 13 10 13C10.7286 13 11.4117 13.1948 12 13.5351ZM10 19C11.1046 19 12 18.1046 12 17C12 15.8954 11.1046 15 10 15C8.89543 15 8 15.8954 8 17C8 18.1046 8.89543 19 10 19Z'%3E%3C/path%3E%3C/svg%3E");
+				}
+				&.icon-scroll {
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M12 10.0858L7.20712 5.29291L5.79291 6.70712L12 12.9142L18.2071 6.70712L16.7929 5.29291L12 10.0858ZM18 17L6.00001 17L6.00001 15L18 15V17Z'%3E%3C/path%3E%3C/svg%3E");
+				}
+			}
+		}
+
+		@media only screen and (max-width: $width-mobile) {
+			gap: 1em;
+		}
+
+		// This is removed via JS to prevent displaying the controls
+		// on browsers wih JavaScript disabled.
+		.hidden {
+			display: none;
+		}
 	}
 }
diff --git a/static/js/song-controls.js b/static/js/song-controls.js
new file mode 100644
index 0000000..0a07d80
--- /dev/null
+++ b/static/js/song-controls.js
@@ -0,0 +1,20 @@
+const controls = document.querySelector(".controls");
+const song = document.querySelector("iframe.song").contentWindow;
+
+var scroll;
+function pageScroll() {
+	song.scrollBy(0, 1);
+	scroll = setTimeout(pageScroll, 80);
+}
+
+document.querySelector("#autoscroll").addEventListener("click", function() {
+	if (this.classList.contains("active")) {
+		clearTimeout(scroll);
+	} else {
+		pageScroll();
+	}
+	this.classList.toggle("active");
+});
+
+// Display the controls on JS-enabled browsers
+window.addEventListener("load", () => controls.classList.remove = "hidden");
diff --git a/templates/song.html b/templates/song.html
index 1ce3bb9..e286794 100644
--- a/templates/song.html
+++ b/templates/song.html
@@ -4,8 +4,26 @@
 		{% for asset in page.assets %}
 			{% if asset is matching(page.slug~"[.](html)$") %}
 				<iframe class="song" src="{{ asset }}"></iframe>
-				<div class="controls">controls</div>
+				<nav class="controls hidden">
+					<section class="font-size">
+						<div class="button icon-subtract" id="font-size-decrease"></div>
+						<div class="button icon-font-size" id="font-size-reset"></div>
+						<div class="button icon-add" id="font-size-increase"></div>
+					</section>
+					<section class="transpose">
+						<div class="button icon-subtract" id="transpose-decrease"></div>
+						<div class="button icon-transpose" id="transpose-reset"></div>
+						<div class="button icon-add" id="transpose-increase"></div>
+					</section>
+					<section class="autoscroll">
+						<div class="button icon-scroll" id="autoscroll"></div>
+					</section>
+				</nav>
 			{% endif %}
 		{% endfor %}
 	</main>
 {% endblock %}
+
+{% block script %}
+	<script src="{{ get_url(path="/js/song-controls.js") }}"></script>
+{% endblock %}