Skip to content

Commit 6ff1aed

Browse files
gtm-nayangtm-nayan
authored
[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 <[email protected]>
1 parent 81fc3f8 commit 6ff1aed

File tree

12 files changed

+143
-210
lines changed

12 files changed

+143
-210
lines changed

‎site/content/examples/13-actions/00-actions/App.svelte‎

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,15 @@
11
<script>
2-
import { spring } from 'svelte/motion';
3-
import { pannable } from './pannable.js';
2+
import { clickOutside } from "./click_outside.js";
43
5-
const coords = spring({ x: 0, y: 0 }, {
6-
stiffness: 0.2,
7-
damping: 0.4
8-
});
9-
10-
function handlePanStart() {
11-
coords.stiffness = coords.damping = 1;
12-
}
13-
14-
function handlePanMove(event) {
15-
coords.update($coords => ({
16-
x: $coords.x + event.detail.dx,
17-
y: $coords.y + event.detail.dy
18-
}));
19-
}
20-
21-
function handlePanEnd(event) {
22-
coords.stiffness = 0.2;
23-
coords.damping = 0.4;
24-
coords.set({ x: 0, y: 0 });
25-
}
4+
let showModal = true;
265
</script>
276

28-
<div class="box"
29-
use:pannable
30-
on:panstart={handlePanStart}
31-
on:panmove={handlePanMove}
32-
on:panend={handlePanEnd}
33-
style="transform:
34-
translate({$coords.x}px,{$coords.y}px)
35-
rotate({$coords.x * 0.2}deg)"
36-
></div>
7+
<button on:click={() => (showModal = true)}>Show Modal</button>
8+
{#if showModal}
9+
<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
10+
Click outside me!
11+
</div>
12+
{/if}
3713

3814
<style>
3915
.box {
@@ -46,6 +22,8 @@
4622
top: calc(50% - var(--height) / 2);
4723
border-radius: 4px;
4824
background-color: #ff3e00;
49-
cursor: move;
25+
color: #fff;
26+
text-align: center;
27+
font-weight: bold;
5028
}
51-
</style>
29+
</style>

‎site/content/examples/13-actions/00-actions/click_outside.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function clickOutside(node) {
2+
const handleClick = (event) => {
3+
if (!node.contains(event.target)) {
4+
node.dispatchEvent(new CustomEvent("outclick"));
5+
}
6+
};
7+
8+
document.addEventListener("click", handleClick, true);
9+
10+
return {
11+
destroy() {
12+
document.removeEventListener("click", handleClick, true);
13+
}
14+
};
15+
}

‎site/content/examples/13-actions/03-actions-pannable/App.svelte‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script>
2+
import { spring } from 'svelte/motion';
3+
import { pannable } from './pannable.js';
4+
5+
const coords = spring({ x: 0, y: 0 }, {
6+
stiffness: 0.2,
7+
damping: 0.4
8+
});
9+
10+
function handlePanStart() {
11+
coords.stiffness = coords.damping = 1;
12+
}
13+
14+
function handlePanMove(event) {
15+
coords.update($coords => ({
16+
x: $coords.x + event.detail.dx,
17+
y: $coords.y + event.detail.dy
18+
}));
19+
}
20+
21+
function handlePanEnd(event) {
22+
coords.stiffness = 0.2;
23+
coords.damping = 0.4;
24+
coords.set({ x: 0, y: 0 });
25+
}
26+
</script>
27+
28+
<div class="box"
29+
use:pannable
30+
on:panstart={handlePanStart}
31+
on:panmove={handlePanMove}
32+
on:panend={handlePanEnd}
33+
style="transform:
34+
translate({$coords.x}px,{$coords.y}px)
35+
rotate({$coords.x * 0.2}deg)"
36+
></div>
37+
38+
<style>
39+
.box {
40+
--width: 100px;
41+
--height: 100px;
42+
position: absolute;
43+
width: var(--width);
44+
height: var(--height);
45+
left: calc(50% - var(--width) / 2);
46+
top: calc(50% - var(--height) / 2);
47+
border-radius: 4px;
48+
background-color: #ff3e00;
49+
cursor: move;
50+
}
51+
</style>

‎site/content/examples/13-actions/03-actions-pannable/meta.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"title": "A more complex action"
3+
}

site/content/examples/13-actions/00-actions/pannable.js renamed to site/content/examples/13-actions/03-actions-pannable/pannable.js

File renamed without changes.

‎site/content/tutorial/12-actions/01-actions/app-a/App.svelte‎

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,16 @@
11
<script>
2-
import { spring } from 'svelte/motion';
32
4-
const coords = spring({ x: 0, y: 0 }, {
5-
stiffness: 0.2,
6-
damping: 0.4
7-
});
8-
9-
function handlePanStart() {
10-
coords.stiffness = coords.damping = 1;
11-
}
12-
13-
function handlePanMove(event) {
14-
coords.update($coords => ({
15-
x: $coords.x + event.detail.dx,
16-
y: $coords.y + event.detail.dy
17-
}));
18-
}
19-
20-
function handlePanEnd(event) {
21-
coords.stiffness = 0.2;
22-
coords.damping = 0.4;
23-
coords.set({ x: 0, y: 0 });
24-
}
3+
4+
let showModal = true;
255
</script>
266

7+
<button on:click={() => (showModal = true)}>Show Modal</button>
8+
{#if showModal}
9+
<div class="box" on:outclick={() => (showModal = false)}>
10+
Click outside me!
11+
</div>
12+
{/if}
13+
2714
<style>
2815
.box {
2916
--width: 100px;
@@ -35,15 +22,8 @@
3522
top: calc(50% - var(--height) / 2);
3623
border-radius: 4px;
3724
background-color: #ff3e00;
38-
cursor: move;
25+
color: #fff;
26+
text-align: center;
27+
font-weight: bold;
3928
}
4029
</style>
41-
42-
<div class="box"
43-
on:panstart={handlePanStart}
44-
on:panmove={handlePanMove}
45-
on:panend={handlePanEnd}
46-
style="transform:
47-
translate({$coords.x}px,{$coords.y}px)
48-
rotate({$coords.x * 0.2}deg)"
49-
></div>

site/content/tutorial/12-actions/01-actions/app-a/pannable.js renamed to site/content/tutorial/12-actions/01-actions/app-a/click_outside.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
export function pannable(node) {
1+
export function clickOutside(node) {
22
// setup work goes here...
33

44
return {
55
destroy() {
66
// ...cleanup goes here
77
}
88
};
9-
}
9+
}

‎site/content/tutorial/12-actions/01-actions/app-b/App.svelte‎

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,16 @@
11
<script>
2-
import { spring } from 'svelte/motion';
3-
import { pannable } from './pannable.js';
2+
import { clickOutside } from "./click_outside.js";
43
5-
const coords = spring({ x: 0, y: 0 }, {
6-
stiffness: 0.2,
7-
damping: 0.4
8-
});
9-
10-
function handlePanStart() {
11-
coords.stiffness = coords.damping = 1;
12-
}
13-
14-
function handlePanMove(event) {
15-
coords.update($coords => ({
16-
x: $coords.x + event.detail.dx,
17-
y: $coords.y + event.detail.dy
18-
}));
19-
}
20-
21-
function handlePanEnd(event) {
22-
coords.stiffness = 0.2;
23-
coords.damping = 0.4;
24-
coords.set({ x: 0, y: 0 });
25-
}
4+
let showModal = true;
265
</script>
276

7+
<button on:click={() => (showModal = true)}>Show Modal</button>
8+
{#if showModal}
9+
<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
10+
Click outside me!
11+
</div>
12+
{/if}
13+
2814
<style>
2915
.box {
3016
--width: 100px;
@@ -36,16 +22,8 @@
3622
top: calc(50% - var(--height) / 2);
3723
border-radius: 4px;
3824
background-color: #ff3e00;
39-
cursor: move;
25+
color: #fff;
26+
text-align: center;
27+
font-weight: bold;
4028
}
4129
</style>
42-
43-
<div class="box"
44-
use:pannable
45-
on:panstart={handlePanStart}
46-
on:panmove={handlePanMove}
47-
on:panend={handlePanEnd}
48-
style="transform:
49-
translate({$coords.x}px,{$coords.y}px)
50-
rotate({$coords.x * 0.2}deg)"
51-
></div>

‎site/content/tutorial/12-actions/01-actions/app-b/click_outside.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function clickOutside(node) {
2+
const handleClick = (event) => {
3+
if (!node.contains(event.target)) {
4+
node.dispatchEvent(new CustomEvent("outclick"));
5+
}
6+
};
7+
8+
document.addEventListener("click", handleClick, true);
9+
10+
return {
11+
destroy() {
12+
document.removeEventListener("click", handleClick, true);
13+
}
14+
};
15+
}

‎site/content/tutorial/12-actions/01-actions/app-b/pannable.js‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

0 commit comments

Comments
 (0)