From 1df33940a15628a712524090c2bfb482aaa28753 Mon Sep 17 00:00:00 2001 From: AlexxNB Date: Mon, 18 Nov 2019 12:47:30 +0300 Subject: [PATCH] fix 'action with param' example and tutorial --- .../01-adding-parameters-to-actions/App.svelte | 2 +- .../01-adding-parameters-to-actions/longpress.js | 10 +++++++++- .../02-adding-parameters-to-actions/app-a/App.svelte | 2 +- .../app-a/longpress.js | 12 ++++++++++-- .../02-adding-parameters-to-actions/app-b/App.svelte | 2 +- .../app-b/longpress.js | 10 +++++++++- .../02-adding-parameters-to-actions/text.md | 8 ++++---- 7 files changed, 35 insertions(+), 11 deletions(-) diff --git a/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte index 97079a275b..d6eaa0ff12 100644 --- a/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte +++ b/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte @@ -12,7 +12,7 @@ {#if pressed} diff --git a/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js b/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js index 0bb3019c7b..9d807cb13a 100644 --- a/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js +++ b/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); } }; } \ No newline at end of file diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte index f0860f194e..8ed286b574 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte @@ -12,7 +12,7 @@ {#if pressed} diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js index 03c13a7b81..00bb9d05c8 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js +++ b/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); } }; } \ No newline at end of file diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte index 97079a275b..d6eaa0ff12 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte @@ -12,7 +12,7 @@ {#if pressed} diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js index 0bb3019c7b..9d807cb13a 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js +++ b/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); } }; } \ No newline at end of file diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md index 2c0a3b3cf5..0cb3b7aeca 100644 --- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md +++ b/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); - } + // ... }; ```