auto generate link for current setup for bookmarking/sharing

1 files changed, 21 insertions, 2 deletions

diff --git a/html/index.html b/html/index.html
index 6bb87ff..dc265a6 100644
--- a/html/index.html
+++ b/html/index.html
@@ -68,6 +68,8 @@
   <input id="the_svg" type="text" value="" placeholder="Paste SVG path 'd' field here...">
   <input id="the_rainbow" name = "textgradient" type="checkbox" value="Rainbow">
   <input id="the_lines" name = "pathlines" type="checkbox" value="Lines">
+  <a href="" id=link_href>link</a>
+  <a href="https://git.jpnc.info/calligram.me/about/">src</a>
   <div id="svg-target"></div>
   <script>
     // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt
@@ -144,14 +146,28 @@
     animateRTL.setAttributeNS(null, 'fill', 'freeze');
 
     /* envelope icon by Amelia from https://thenounproject.com/icon/envelope-1526185/ under CC-BY-3.0 */
-    updateSVG("M82,20.3H18a13,13,0,0,0-13,13V66.7a13,13,0,0,0,13,13H82a13,13,0,0,0,13-13V33.3A13,13,0,0,0,82,20.3Zm-2.2,8L52.1,45.5a4,4,0,0,1-4.2,0L20.2,28.3ZM87,66.7a5,5,0,0,1-5,5H18a5,5,0,0,1-5-5V33.3h0L43.7,52.3a11.9,11.9,0,0,0,12.6,0L87,33.2h0Z");
+    const _default_svg = "M82,20.3H18a13,13,0,0,0-13,13V66.7a13,13,0,0,0,13,13H82a13,13,0,0,0,13-13V33.3A13,13,0,0,0,82,20.3Zm-2.2,8L52.1,45.5a4,4,0,0,1-4.2,0L20.2,28.3ZM87,66.7a5,5,0,0,1-5,5H18a5,5,0,0,1-5-5V33.3h0L43.7,52.3a11.9,11.9,0,0,0,12.6,0L87,33.2h0Z";
+    updateSVG(_default_svg);
     textPath.appendChild(animateRTL);
     textPath.appendChild(animateLTR);
+
+    // output current setup as URL for sharing/bookmarking
+    function updateLink () {
+    let _generated_url =
+      ( window.location.origin != "null" ? window.location.origin : "" )
+      + window.location.pathname
+      + "?lines="  + ( lines_input.checked ? 1 : 0 )
+      + "&rainbow=" + ( rainbow_input.checked ? 1 : 0 )
+      + "&d=" + ( encodeURIComponent(svgPath.getAttribute('d')) )
+      + "&text=" + ( encodeURIComponent(textPath.textContent) );
+      document.getElementById('link_href').setAttribute('href', _generated_url);
+    }
     
     var input = document.getElementById('the_text');
     input.addEventListener("input",
       function () {
         updateValue(input.value);
+	updateLink();
       }
     );
     
@@ -169,6 +185,7 @@
     svg_input.addEventListener("input",
       function () {
         updateSVG(svg_input.value);
+	updateLink();
       }
     );
 
@@ -205,6 +222,7 @@
         } else {
           moving_text.style.removeProperty("fill");
         }
+	updateLink();
       }
     );
 
@@ -216,6 +234,7 @@
         } else {
           svgpath.style.removeProperty("stroke");
         }
+	updateLink();
       }
     );
 
@@ -239,8 +258,8 @@
       lines_input.click();
     };
 
+    updateLink();
   // @license-end
   </script>
-  <a href="https://git.jpnc.info/calligram.me/about/">src</a>
 </body>
 </html>