Merge pull request #3947 from AlexxNB/master

fix 'action with param' example and tutorial

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

@@ -12,7 +12,7 @@
 
 <button use:longpress={duration}
 	on:longpress="{() => pressed = true}"
-	on:mouseout="{() => pressed = false}"
+	on:mouseenter="{() => pressed = false}"
 >press and hold</button>
 
 {#if pressed}

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

@@ -1,13 +1,20 @@
 export function longpress(node, duration) {
+	let timer;
+	
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
 		}, duration);
 	};
+	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
 
 	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
 
 	return {
 		update(newDuration) {
@@ -15,6 +22,7 @@ export function longpress(node, duration) {
 		},
 		destroy() {
 			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
 		}
 	};
 }

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte

@@ -12,7 +12,7 @@
 
 <button use:longpress
 	on:longpress="{() => pressed = true}"
-	on:mouseout="{() => pressed = false}"
+	on:mouseenter="{() => pressed = false}"
 >press and hold</button>
 
 {#if pressed}

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js

@@ -1,17 +1,25 @@
-export function longpress(node) {
+export function longpress(node, duration) {
+	let timer;
+	
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
 		}, 500);
 	};
+	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
 
 	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
 
 	return {
 		destroy() {
 			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
 		}
 	};
 }

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte

@@ -12,7 +12,7 @@
 
 <button use:longpress={duration}
 	on:longpress="{() => pressed = true}"
-	on:mouseout="{() => pressed = false}"
+	on:mouseenter="{() => pressed = false}"
 >press and hold</button>
 
 {#if pressed}

site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js

@@ -1,13 +1,20 @@
 export function longpress(node, duration) {
+	let timer;
+	
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
 		}, duration);
 	};
+	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
 
 	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
 
 	return {
 		update(newDuration) {
@@ -15,6 +22,7 @@ export function longpress(node, duration) {
 		},
 		destroy() {
 			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
 		}
 	};
 }

site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md

@@ -10,8 +10,10 @@ We can change the action function to accept a `duration` as a second argument, a
 
 ```js
 export function longpress(node, duration) {
+	// ...
+
 	const handleMousedown = () => {
-		setTimeout(() => {
+		timer = setTimeout(() => {
 			node.dispatchEvent(
 				new CustomEvent('longpress')
 			);
@@ -37,9 +39,7 @@ return {
 	update(newDuration) {
 		duration = newDuration;
 	},
-	destroy() {
-		node.removeEventListener('mousedown', handleMousedown);
-	}
+	// ...
 };
 ```