Add option to display text description

sonph · Apr 17, 2024 · 9518a8d · 9518a8d
1 parent 541959f
commit 9518a8d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
     }
 
     input#url,
-    input#convertedUrl {
+    input#convertedUrl,
+    input#text {
       width: 70%;
     }
   </style>
@@ -30,10 +31,12 @@ <h3>Tool for converting a GrooveScribe drum notation for embedding in <a href="h
     <form>
       <label for="url">URL:</label>
       <input type="text" id="url" name="url"><br><br>
+      <label for="text">Text:</label>
+      <input type="text" id="text" name="text"><br><br>
       <label for="showTempo">Show Tempo</label>
       <input type="checkbox" id="showTempo" name="showTempo"><br><br>
       <label for="convertedUrl">Converted URL:</label>
-      <input readonly type="text" id="convertedUrl" name="convertedUrl"><br><br>
+      <input type="text" id="convertedUrl" name="convertedUrl"><br><br>
       <button type="button" id="convertBtn">Convert</button>
       <button type="button" id="copyBtn">Convert & copy to clipboard</button>
       <button type="button" id="openLink">Open link</button>
@@ -67,14 +70,20 @@ <h3>Tool for converting a GrooveScribe drum notation for embedding in <a href="h
         return;
       }
 
-      const showTempo = document.getElementById("showTempo").checked;
       const regex = /(https:\/\/)?(www\.)?(mikeslessons\.com|montulli\.github\.io)\/(groove\/|GrooveScribe\/)/;
       const target = "https://sonpham.me/notion-drum-sheet/render.html"
       var convertedUrl = url.replace(regex, target);
+
+      const showTempo = document.getElementById("showTempo").checked;
       if (showTempo) {
         convertedUrl = convertedUrl + "&EmbedTempoTimeSig=true";
       }
 
+      const text = document.getElementById("text").value;
+      if (text.length > 0) {
+        convertedUrl += "&text=" + text;
+      }
+
       const convertedUrlElement = document.getElementById("convertedUrl");
       convertedUrlElement.value = convertedUrl;
       convertedUrlElement.select();

diff --git a/js/groove_display_utils.min.js b/js/groove_display_utils.min.js
diff --git a/render.html b/render.html
@@ -17,34 +17,68 @@
 
 	<script defer id="mainScript" src="./js/groove_display_utils.min.js"></script>
 	<script>
+		function parseQuery(queryString) {
+			var query = {};
+			var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
+			for (var i = 0; i < pairs.length; i++) {
+				var pair = pairs[i].split('=');
+				query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
+			}
+			return query;
+		}
+
 		mainScript.addEventListener('load', function () {
 			// Refer to GrooveDisplay as e with minified JS.
 			e.AddGrooveDisplayToPage(
 				location.search, /* showPlayer= */ false, /* linkToEditor= */ true);
+
+			const textE = document.getElementById("text");
+			const text = parseQuery(window.location.search).text;
+			const tempoTimeSigE = document.getElementById("tempoTimeSig");
+
+			if (text !== undefined) {
+				textE.innerText = text;
+				textE.style.float = 'left';
+				tempoTimeSigE.style.float = 'right';
+			}
 		});
+
 	</script>
 	<style>
 		.Printable {
 			display: block;
 		}
-
 		.nonPrintable {
 			display: block;
 		}
-
 		.svgTarget {
 			width: 100%;
 		}
-
 		.svgTarget svg {
 			width: 100%;
 			height: auto;
 		}
+		#tempoTimeSig {
+			margin-left: 5%;
+			margin-right: 5%;
+			float: 'left';
+		}
+		#text {
+			margin-left: 5%;
+			margin-left: 5%;
+		}
+		#topDiv {
+			width: 100%;
+		}
 	</style>
 </head>
 
 <body>
-	<span id="tempo"></span>
+	<div id="topDiv">
+		<span id="text"></span>
+		<span id="tempoTimeSig"></span>
+	</div>
+	<!-- groove displays here -->
 </body>
 
 </html>