diff options
| -rw-r--r-- | html/index.html | 40 |
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 |