allow for specification of dur and offset in modal and query params

1 files changed, 38 insertions, 2 deletions

diff --git a/html/index.html b/html/index.html
index 79a471e..f617dd9 100644
--- a/html/index.html
+++ b/html/index.html
@@ -87,6 +87,9 @@
     </p><p>
     <input id="the_svg" type="text" value="" title="Paste SVG path 'd' field here">
     </p><p>
+    <input id="the_dur" type="text" value="" title="Duration in seconds for animation" style="width: 3em">
+    <input id="the_offset" type="text" value="" title="Offset from 100% for animation bounds" style="width: 3em">
+    </p><p>
     <input id="the_rainbow" name = "textgradient" type="checkbox" value="Rainbow" title="Rainbow Colors?">
     <input id="the_lines" name = "pathlines" type="checkbox" value="Lines" title="Show lines?">
     <a href="" id=link_href title="link to this calligramme">link</a>
@@ -190,6 +193,8 @@
       + window.location.pathname
       + "?lines="  + ( lines_input.checked ? 1 : 0 )
       + "&rainbow=" + ( rainbow_input.checked ? 1 : 0 )
+      + "&dur=" + ( animateLTR.getAttribute('dur') )
+      + "&offset=" + ( animateLTR.getAttribute('to').slice(0,-1) - 100 )
       + "&d=" + ( encodeURIComponent(svgPath.getAttribute('d')) )
       + "&text=" + ( encodeURIComponent(textPath.textContent) );
       document.getElementById('link_href').setAttribute('href', _generated_url);
@@ -221,11 +226,32 @@
       }
     );
 
+
+    function updateAnimNoArgs () {
+      updateAnim(
+        (window.getComputedStyle(textPath, null).getPropertyValue('font-size').slice(0,-2))
+        * (100/(window.screen.width))
+      );
+      updateLink();
+    };
+
+    var dur_input = document.getElementById('the_dur');
+    dur_input.addEventListener("input",
+      function () {
+        updateAnimNoArgs();
+    });
+
+    var offset_input = document.getElementById('the_offset');
+    offset_input.addEventListener("input",
+      function () {
+        updateAnimNoArgs();
+    });
+
     function updateAnim (_font_size) {
-      let _dur = svgPath.getTotalLength() / ( 50 * ( _font_size ) );
+      let _dur = dur_input ? Number(dur_input.value) : svgPath.getTotalLength() / ( 50 * ( _font_size ) );
       animateLTR.setAttributeNS(null, 'dur', _dur);
       animateRTL.setAttributeNS(null, 'dur', _dur);
-      let _offset = (
+      let _offset = offset_input ? Number(offset_input.value) : (
         ((( svgPath.getTotalLength() + textPath.textContent.length )
           / svgPath.getTotalLength() ) * 100 ) - 100
           - ( textPath.textContent.length * _font_size / 100)
@@ -275,6 +301,8 @@
     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");
+    const _queryparam_dur = new URL(location.href).searchParams.get("dur");
+    const _queryparam_offset = new URL(location.href).searchParams.get("offset");
     if (_queryparam_d) {
       svg_input.setAttribute("value", _queryparam_d);
       updateSVG(_queryparam_d);
@@ -289,6 +317,14 @@
     if (_queryparam_lines == 1) {
       lines_input.click();
     };
+    if (_queryparam_dur) {
+      dur_input.setAttribute("value", _queryparam_dur);
+      updateAnimNoArgs();
+    };
+    if (_queryparam_offset) {
+      offset_input.setAttribute("value", _queryparam_offset);
+      updateAnimNoArgs();
+    };
 
     updateLink();
   // @license-end