From b8968f2d7c66b63d701ea3bc8ca5258276c03abc Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Tue, 30 Nov 2021 20:44:43 +0545
Subject: [PATCH] [docs] Use a simpler demo for the first actions tutorial
(#5014) (#6962)
* Change actions tutorial
* Rename files containing action functions
* Move old pannable example to separate directory
* Add new tutorial to examples
* Update title of the pannable example
* Add thumbnail for pannable action example
* I can't remember all css properties, okay?
* Fix order of style tag in new example
* Inline outclick handlers
* Rename pannable example
* Fix formatting
Co-authored-by: Nayan Gautam <50981692+698969@users.noreply.github.com>
---
.../examples/13-actions/00-actions/App.svelte | 46 +++-------
.../13-actions/00-actions/click_outside.js | 15 ++++
.../13-actions/03-actions-pannable/App.svelte | 51 +++++++++++
.../13-actions/03-actions-pannable/meta.json | 3 +
.../pannable.js | 0
.../12-actions/01-actions/app-a/App.svelte | 44 +++-------
.../app-a/{pannable.js => click_outside.js} | 4 +-
.../12-actions/01-actions/app-b/App.svelte | 46 +++-------
.../01-actions/app-b/click_outside.js | 15 ++++
.../12-actions/01-actions/app-b/pannable.js | 47 ----------
.../tutorial/12-actions/01-actions/text.md | 82 +++++-------------
.../examples/thumbnails/actions-pannable.jpg | Bin 0 -> 4078 bytes
12 files changed, 143 insertions(+), 210 deletions(-)
create mode 100644 site/content/examples/13-actions/00-actions/click_outside.js
create mode 100644 site/content/examples/13-actions/03-actions-pannable/App.svelte
create mode 100644 site/content/examples/13-actions/03-actions-pannable/meta.json
rename site/content/examples/13-actions/{00-actions => 03-actions-pannable}/pannable.js (100%)
rename site/content/tutorial/12-actions/01-actions/app-a/{pannable.js => click_outside.js} (69%)
create mode 100644 site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
delete mode 100644 site/content/tutorial/12-actions/01-actions/app-b/pannable.js
create mode 100644 site/static/examples/thumbnails/actions-pannable.jpg
diff --git a/site/content/examples/13-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte
index 4548a5cbb6..bd990a5360 100644
--- a/site/content/examples/13-actions/00-actions/App.svelte
+++ b/site/content/examples/13-actions/00-actions/App.svelte
@@ -1,39 +1,15 @@
-
+
+{#if showModal}
+
(showModal = false)}>
+ Click outside me!
+
+{/if}
\ No newline at end of file
+
diff --git a/site/content/examples/13-actions/00-actions/click_outside.js b/site/content/examples/13-actions/00-actions/click_outside.js
new file mode 100644
index 0000000000..e8983c1457
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/click_outside.js
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+ const handleClick = (event) => {
+ if (!node.contains(event.target)) {
+ node.dispatchEvent(new CustomEvent("outclick"));
+ }
+ };
+
+ document.addEventListener("click", handleClick, true);
+
+ return {
+ destroy() {
+ document.removeEventListener("click", handleClick, true);
+ }
+ };
+}
diff --git a/site/content/examples/13-actions/03-actions-pannable/App.svelte b/site/content/examples/13-actions/03-actions-pannable/App.svelte
new file mode 100644
index 0000000000..4548a5cbb6
--- /dev/null
+++ b/site/content/examples/13-actions/03-actions-pannable/App.svelte
@@ -0,0 +1,51 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/site/content/examples/13-actions/03-actions-pannable/meta.json b/site/content/examples/13-actions/03-actions-pannable/meta.json
new file mode 100644
index 0000000000..b97be8071f
--- /dev/null
+++ b/site/content/examples/13-actions/03-actions-pannable/meta.json
@@ -0,0 +1,3 @@
+{
+ "title": "A more complex action"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/00-actions/pannable.js b/site/content/examples/13-actions/03-actions-pannable/pannable.js
similarity index 100%
rename from site/content/examples/13-actions/00-actions/pannable.js
rename to site/content/examples/13-actions/03-actions-pannable/pannable.js
diff --git a/site/content/tutorial/12-actions/01-actions/app-a/App.svelte b/site/content/tutorial/12-actions/01-actions/app-a/App.svelte
index feacc44c52..40b4ea2673 100644
--- a/site/content/tutorial/12-actions/01-actions/app-a/App.svelte
+++ b/site/content/tutorial/12-actions/01-actions/app-a/App.svelte
@@ -1,29 +1,16 @@
+
+{#if showModal}
+
(showModal = false)}>
+ Click outside me!
+
+{/if}
+
-
-
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/01-actions/app-a/pannable.js b/site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
similarity index 69%
rename from site/content/tutorial/12-actions/01-actions/app-a/pannable.js
rename to site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
index 332cd3e147..c406f6e95c 100644
--- a/site/content/tutorial/12-actions/01-actions/app-a/pannable.js
+++ b/site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
@@ -1,4 +1,4 @@
-export function pannable(node) {
+export function clickOutside(node) {
// setup work goes here...
return {
@@ -6,4 +6,4 @@ export function pannable(node) {
// ...cleanup goes here
}
};
-}
\ No newline at end of file
+}
diff --git a/site/content/tutorial/12-actions/01-actions/app-b/App.svelte b/site/content/tutorial/12-actions/01-actions/app-b/App.svelte
index 171f82762c..bd990a5360 100644
--- a/site/content/tutorial/12-actions/01-actions/app-b/App.svelte
+++ b/site/content/tutorial/12-actions/01-actions/app-b/App.svelte
@@ -1,30 +1,16 @@
+
+{#if showModal}
+
(showModal = false)}>
+ Click outside me!
+
+{/if}
+
-
-
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/01-actions/app-b/click_outside.js b/site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
new file mode 100644
index 0000000000..e8983c1457
--- /dev/null
+++ b/site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+ const handleClick = (event) => {
+ if (!node.contains(event.target)) {
+ node.dispatchEvent(new CustomEvent("outclick"));
+ }
+ };
+
+ document.addEventListener("click", handleClick, true);
+
+ return {
+ destroy() {
+ document.removeEventListener("click", handleClick, true);
+ }
+ };
+}
diff --git a/site/content/tutorial/12-actions/01-actions/app-b/pannable.js b/site/content/tutorial/12-actions/01-actions/app-b/pannable.js
deleted file mode 100644
index f7d15328be..0000000000
--- a/site/content/tutorial/12-actions/01-actions/app-b/pannable.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export function pannable(node) {
- let x;
- let y;
-
- function handleMousedown(event) {
- x = event.clientX;
- y = event.clientY;
-
- node.dispatchEvent(new CustomEvent('panstart', {
- detail: { x, y }
- }));
-
- window.addEventListener('mousemove', handleMousemove);
- window.addEventListener('mouseup', handleMouseup);
- }
-
- function handleMousemove(event) {
- const dx = event.clientX - x;
- const dy = event.clientY - y;
- x = event.clientX;
- y = event.clientY;
-
- node.dispatchEvent(new CustomEvent('panmove', {
- detail: { x, y, dx, dy }
- }));
- }
-
- function handleMouseup(event) {
- x = event.clientX;
- y = event.clientY;
-
- node.dispatchEvent(new CustomEvent('panend', {
- detail: { x, y }
- }));
-
- window.removeEventListener('mousemove', handleMousemove);
- window.removeEventListener('mouseup', handleMouseup);
- }
-
- node.addEventListener('mousedown', handleMousedown);
-
- return {
- destroy() {
- node.removeEventListener('mousedown', handleMousedown);
- }
- };
-}
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/01-actions/text.md b/site/content/tutorial/12-actions/01-actions/text.md
index 3706b31e7c..dfe75c192f 100644
--- a/site/content/tutorial/12-actions/01-actions/text.md
+++ b/site/content/tutorial/12-actions/01-actions/text.md
@@ -4,85 +4,45 @@ title: The use directive
Actions are essentially element-level lifecycle functions. They're useful for things like:
-* interfacing with third-party libraries
-* lazy-loaded images
-* tooltips
-* adding custom event handlers
+- interfacing with third-party libraries
+- lazy-loaded images
+- tooltips
+- adding custom event handlers
-In this app, we want to make the orange box 'pannable'. It has event handlers for the `panstart`, `panmove` and `panend` events, but these aren't native DOM events. We have to dispatch them ourselves. First, import the `pannable` function...
+In this app, we want to make the orange modal close when the user clicks outside it. It has an event handler for the `outclick` event, but it isn't a native DOM event. We have to dispatch it ourselves. First, import the `clickOutside` function...
```js
-import { pannable } from './pannable.js';
+import { clickOutside } from "./click_outside.js";
```
...then use it with the element:
```html
-
+
+ Click outside me!
+
```
-Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
+Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
-We want to fire `panstart` event when the user mouses down on the element, `panmove` events (with `dx` and `dy` properties showing how far the mouse moved) when they drag it, and `panend` events when they mouse up. One possible implementation looks like this:
+We want to fire the `outclick` event when the user clicks outside the orange box. One possible implementation looks like this:
```js
-export function pannable(node) {
- let x;
- let y;
-
- function handleMousedown(event) {
- x = event.clientX;
- y = event.clientY;
-
- node.dispatchEvent(new CustomEvent('panstart', {
- detail: { x, y }
- }));
-
- window.addEventListener('mousemove', handleMousemove);
- window.addEventListener('mouseup', handleMouseup);
- }
-
- function handleMousemove(event) {
- const dx = event.clientX - x;
- const dy = event.clientY - y;
- x = event.clientX;
- y = event.clientY;
-
- node.dispatchEvent(new CustomEvent('panmove', {
- detail: { x, y, dx, dy }
- }));
- }
-
- function handleMouseup(event) {
- x = event.clientX;
- y = event.clientY;
-
- node.dispatchEvent(new CustomEvent('panend', {
- detail: { x, y }
- }));
-
- window.removeEventListener('mousemove', handleMousemove);
- window.removeEventListener('mouseup', handleMouseup);
- }
+export function clickOutside(node) {
+ const handleClick = (event) => {
+ if (!node.contains(event.target)) {
+ node.dispatchEvent(new CustomEvent("outclick"));
+ }
+ };
- node.addEventListener('mousedown', handleMousedown);
+ document.addEventListener("click", handleClick, true);
return {
destroy() {
- node.removeEventListener('mousedown', handleMousedown);
- }
+ document.removeEventListener("click", handleClick, true);
+ },
};
}
```
-Update the `pannable` function and try moving the box around.
-
-> This implementation is for demonstration purposes — a more complete one would also consider touch events.
+Update the `clickOutside` function, click the button to show the modal and then click outside it to close it.
diff --git a/site/static/examples/thumbnails/actions-pannable.jpg b/site/static/examples/thumbnails/actions-pannable.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3c152ab5707b72265a9b5b2368779bbafaf396d7
GIT binary patch
literal 4078
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
EAKkva6951J
literal 0
HcmV?d00001