allow query params 'text', 'd', 'rainbow', and 'lines' to set respective inputs

1 files changed, 28 insertions, 3 deletions

diff --git a/html/index.html b/html/index.html
index fcb4b4b..413fac3 100644
--- a/html/index.html
+++ b/html/index.html
@@ -148,10 +148,14 @@
     textPath.appendChild(animateRTL);
     
     var input = document.getElementById('the_text');
-    input.addEventListener("input", updateValue);
+    input.addEventListener("input",
+      function () {
+        updateValue(input.value);
+      }
+    );
     
-    function updateValue(e) {
-      textPath.textContent = (e.target.value);
+    function updateValue(_text) {
+      textPath.textContent = (_text);
       updateAnim(
         (window.getComputedStyle(textPath, null).getPropertyValue('font-size').slice(0,-2))
         * (100/(window.screen.width))
@@ -213,6 +217,27 @@
         }
       }
     );
+
+    // allow inputs to be specified in query params
+    const _queryparam_d = new URL(location.href).searchParams.get("d");
+    const _queryparam_text = new URL(location.href).searchParams.get("text");
+    const _queryparam_rainbow = new URL(location.href).searchParams.get("rainbow");
+    const _queryparam_lines = new URL(location.href).searchParams.get("lines");
+    if (_queryparam_d) {
+      svg_input.setAttribute("value", _queryparam_d);
+      updateSVG(_queryparam_d);
+    };
+    if (_queryparam_text) {
+      input.setAttribute("value", _queryparam_text);
+      updateValue(_queryparam_text);
+    };
+    if (_queryparam_rainbow == 1) {
+      rainbow_input.click();
+    };
+    if (_queryparam_lines == 1) {
+      lines_input.click();
+    };
+
   // @license-end
   </script>
   <a href="https://git.jpnc.info/calligram.me/about/">src</a>