aboutsummaryrefslogtreecommitdiffstats
path: root/html/index.html
diff options
context:
space:
mode:
authorjames pannacciulli <jpnc@jpnc.info>2023-07-03 17:19:27 -0400
committerjames pannacciulli <jpnc@jpnc.info>2023-07-03 17:21:37 -0400
commitc82e726aaa31a461b2557add94b0452c0564dea1 (patch)
tree375eb02c3b00fc8be87c0a0a27ba734b9f5269aa /html/index.html
parent60d375a3256a9284783635d24327e5bdcadf8f72 (diff)
downloadcalligram.me-c82e726aaa31a461b2557add94b0452c0564dea1.tar.gz
calligram.me-c82e726aaa31a461b2557add94b0452c0564dea1.tar.bz2
allow for specification of dur and offset in modal and query params
Diffstat (limited to 'html/index.html')
-rw-r--r--html/index.html40
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