Util page for converting URLS from mikeslessons

sonph · Apr 16, 2024 · 281f4ba · 281f4ba
1 parent 87329fc
commit 281f4ba
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -18,4 +18,4 @@ you can edit the notation and play it.
 notation. To use this, add `&EmbedTempoTimeSig=true` to the end of the URL.
 
 4. An utility to convert a `https://www.mikeslessons.com/groove` link to an
-embeddable link.
+embeddable link: https://sonph.github.io/notion-drum-sheet/convert.html
diff --git a/convert.html b/convert.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Embedded Groove</title>
+  <style>
+    input#url,
+    input#convertedUrl {
+      width: 80%
+    }
+  </style>
+</head>
+
+<body>
+  <div>
+    <form>
+      <label for="url">URL:</label>
+      <input type="text" id="url" name="url"><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>
+      <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>
+    </form>
+  </div>
+  <div></div>
+  <div>
+    <span id="status"></span>
+  </div>
+
+  <script>
+    function convertAndCopyOnEnter(event) {
+      if (event.key === "Enter") {
+        convertAndCopy();
+      }
+    }
+
+    function setStatus(status) {
+      const statusE = document.getElementById("status");
+      statusE.innerHTML = "<b>" + status + "</b>";
+      setTimeout(function () {
+        statusE.innerHTML = "";
+      }, 2000 /* ms */);
+    }
+
+    function convert() {
+      const url = document.getElementById("url").value;
+      if (url.length == 0) {
+        setStatus("URL is empty!");
+        return;
+      }
+
+      const showTempo = document.getElementById("showTempo").checked;
+      const regex = /(https:\/\/)?(www\.)?(mikeslessons\.com|montulli\.github\.io)\/(groove\/|GrooveScribe\/)/;
+      var convertedUrl =
+        url.replace(regex, "https://sonpham.me/notion-drum-sheet/");
+      if (showTempo) {
+        convertedUrl = convertedUrl + "&EmbedTempoTimeSig=true";
+      }
+
+      const convertedUrlElement = document.getElementById("convertedUrl");
+      convertedUrlElement.value = convertedUrl;
+      convertedUrlElement.select();
+
+      setStatus("Converted!");
+    }
+
+    function convertAndCopy() {
+      convert();
+      const convertedUrlElement = document.getElementById("convertedUrl");
+      if (convertedUrlElement.value.length > 0) {
+        navigator.clipboard.writeText(convertedUrlElement.value);
+        setStatus("Copied!");
+        return;
+      }
+    }
+
+    function openLink() {
+      const convertedUrl = document.getElementById("convertedUrl").value;
+      if (convertedUrl.length > 0) {
+        window.open(convertedUrl, '_blank');
+      }
+    }
+
+    // Convert and copy on "Enter". Also select on click.
+    document.getElementById("url").addEventListener("keypress", convertAndCopyOnEnter);
+    document.getElementById("url").addEventListener("click", function() {
+      const url = document.getElementById("url").select();
+    });
+    document.getElementById("showTempo").addEventListener("keypress", convertAndCopyOnEnter);
+
+    document.getElementById("convertBtn").addEventListener("click", convert);
+    document.getElementById("copyBtn").addEventListener("click", convertAndCopy);
+    document.getElementById("openLink").addEventListener("click", openLink);
+  </script>
+</body>
+
+</html>