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 0bd9d56113..97079a275b 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 @@ -1,70 +1,20 @@ - destroy() { - tooltip.remove(); - node.removeEventListener('mouseenter', append); - node.removeEventListener('mouseleave', remove); - } - }; - } + - function toggleLanguage() { - language = language === 'english' ? 'latin' : 'english' - } - + - \ No newline at end of file +{#if pressed} +
congratulations, you pressed and held for {duration}ms
+{/if} \ No newline at end of file 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 new file mode 100644 index 0000000000..0bb3019c7b --- /dev/null +++ b/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); + } + }; +} \ 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 0bd9d56113..f0860f194e 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 @@ -1,70 +1,20 @@ - destroy() { - tooltip.remove(); - node.removeEventListener('mouseenter', append); - node.removeEventListener('mouseleave', remove); - } - }; - } + - function toggleLanguage() { - language = language === 'english' ? 'latin' : 'english' - } - + - \ No newline at end of file +{#if pressed} +congratulations, you pressed and held for {duration}ms
+{/if} \ No newline at end of file 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 new file mode 100644 index 0000000000..03c13a7b81 --- /dev/null +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js @@ -0,0 +1,17 @@ +export function longpress(node) { + const handleMousedown = () => { + setTimeout(() => { + node.dispatchEvent( + new CustomEvent('longpress') + ); + }, 500); + }; + + node.addEventListener('mousedown', handleMousedown); + + return { + destroy() { + node.removeEventListener('mousedown', handleMousedown); + } + }; +} \ 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 0bd9d56113..97079a275b 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 @@ -1,70 +1,20 @@ - destroy() { - tooltip.remove(); - node.removeEventListener('mouseenter', append); - node.removeEventListener('mouseleave', remove); - } - }; - } + - function toggleLanguage() { - language = language === 'english' ? 'latin' : 'english' - } - + - \ No newline at end of file +{#if pressed} +congratulations, you pressed and held for {duration}ms
+{/if} \ No newline at end of file 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 new file mode 100644 index 0000000000..0bb3019c7b --- /dev/null +++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/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); + } + }; +} \ 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 e6262b2f6c..2c0a3b3cf5 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 @@ -2,4 +2,45 @@ title: Adding parameters --- -TODO come up with a better example \ No newline at end of file +Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to. + +Here, we're using a `longpress` action that fires an event with the same name whenever the user presses and holds the button for a given duration. Right now, if you switch over to the `longpress.js` file, you'll see it's hardcoded to 500ms. + +We can change the action function to accept a `duration` as a second argument, and pass that `duration` to the `setTimeout` call: + +```js +export function longpress(node, duration) { + const handleMousedown = () => { + setTimeout(() => { + node.dispatchEvent( + new CustomEvent('longpress') + ); + }, duration); + }; + + // ... +} +``` + +Back in `App.svelte`, we can pass the `duration` value to the action: + +```html +