From 04053e25edebb08d0b468b58ed32158e47d3925d Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Sun, 12 Feb 2023 22:43:09 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Animate=20destination=20text=20w?=
 =?UTF-8?q?hen=20they=C2=B4re=20too=20long=20for=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/passagesPanel.tsx | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/passagesPanel.tsx b/frontend/src/passagesPanel.tsx
index 359c0f5..3a7cdde 100644
--- a/frontend/src/passagesPanel.tsx
+++ b/frontend/src/passagesPanel.tsx
@@ -1,5 +1,7 @@
-import { VoidComponent, createResource, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
+import { VoidComponent, createResource, onMount, ParentComponent, ParentProps, Show, useContext, For } from 'solid-js';
 import { createDateNow, getTime } from '@solid-primitives/date';
+
+import { timeline } from '@motionone/dom';
 import { AnimationOptions } from '@motionone/types';
 import { Motion } from "@motionone/solid";
 
@@ -79,6 +81,24 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 	// const trafficStatusStyle = { fill: trafficStatusColor.get(props.line.trafficStatus) };
 	const trafficStatusStyle = { fill: trafficStatusColor.get(TrafficStatus.UNKNOWN) };
 
+	let destinationViewboxRef: SVGSVGElement | undefined = undefined;
+	let destinationTextRef: SVGTextElement | undefined = undefined;
+
+	onMount(() => {
+		if (destinationViewboxRef !== undefined && destinationTextRef !== undefined) {
+			const overlap = destinationTextRef.getComputedTextLength() - destinationViewboxRef.viewBox.baseVal.width;
+			if (overlap > 0) {
+				timeline(
+					[
+						[destinationTextRef, { x: [-overlap] }, { duration: 5 }],
+						[destinationTextRef, { x: [0] }, { duration: 2 }],
+					],
+					{ repeat: Infinity },
+				);
+			}
+		}
+	});
+
 	return (
 		<div class={styles.line}>
 			<div class={styles.transportMode}>
@@ -86,8 +106,11 @@ const DestinationPassages: VoidComponent<{ line: Line, destination: string }> =
 			</div>
 			{renderLinePicto(props.line, styles)}
 			<div class={styles.destination}>
-				<svg viewBox="0 0 600 40">
-					<text x="0" y="50%" dominant-baseline="middle" font-size="40" style={{ fill: "#000000" }}>
+				<svg ref={destinationViewboxRef} viewBox="0 0 600 40">
+					<text ref={destinationTextRef} x="0" y="50%"
+						dominant-baseline="middle"
+						font-size="40"
+						style={{ fill: "#000000" }}>
 						{props.destination}
 					</text>
 				</svg>