update example alongside tutorial

site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte

@@ -1,70 +1,20 @@
 <script>
-	let language = "english";
+	import { longpress } from './longpress.js';
 
-	const translations = {
+	let pressed = false;
-		english: {
+	let duration = 2000;
-			tooltip: "Switch Languages",
+</script>
-		},
-		latin: {
-			tooltip: "Itchsway Anguageslay",
-		}
-	};
-
-	function tooltip(node, text) {
-		const tooltip = document.createElement('div');
-		tooltip.textContent = text;
-
-		Object.assign(tooltip.style, {
-			position: 'absolute',
-			background: 'black',
-			color: 'white',
-			padding: '0.5em 1em',
-			fontSize: '12px',
-			pointerEvents: 'none',
-			transform: 'translate(5px, -50%)',
-			borderRadius: '2px',
-			transition: 'opacity 0.4s'
-		});
-
-		function position() {
-			const { top, right, bottom } = node.getBoundingClientRect();
-			tooltip.style.top = `${(top + bottom) / 2}px`;
-			tooltip.style.left = `${right}px`;
-		}
-
-		function append() {
-			document.body.appendChild(tooltip);
-			tooltip.style.opacity = 0;
-			setTimeout(() => tooltip.style.opacity = 1);
-			position();
-		}
-
-		function remove() {
-			tooltip.remove();
-		}
-
-		node.addEventListener('mouseenter', append);
-		node.addEventListener('mouseleave', remove);
-
-		return {
-			update(text) {
-				tooltip.textContent = text;
-				position();
-			},
 
-			destroy() {
+<label>
-				tooltip.remove();
+	<input type=range bind:value={duration} max={2000} step={100}>
-				node.removeEventListener('mouseenter', append);
+	{duration}ms
-				node.removeEventListener('mouseleave', remove);
+</label>
-			}
-		};
-	}
 
-	function toggleLanguage() {
+<button use:longpress={duration}
-		language = language === 'english' ? 'latin' : 'english'
+	on:longpress="{() => pressed = true}"
-	}
+	on:mouseout="{() => pressed = false}"
-</script>
+>press and hold</button>
 
-<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+{#if pressed}
-	{language}
+	<p>congratulations, you pressed and held for {duration}ms</p>
-</button>
+{/if}

site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js

@@ -0,0 +1,20 @@
+export function longpress(node, duration) {
+	const handleMousedown = () => {
+		setTimeout(() => {
+			node.dispatchEvent(
+				new CustomEvent('longpress')
+			);
+		}, duration);
+	};
+
+	node.addEventListener('mousedown', handleMousedown);
+
+	return {
+		update(newDuration) {
+			duration = newDuration;
+		},
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+		}
+	};
+}