アクション(action)は基本的に要素レベルのライフサイクル関数です。これらは以下のような場合に便利です。
- サードパーティライブラリとの連携
- 画像の遅延読み込み
- ツールチップ
- カスタムイベントハンドラの追加
このアプリは <canvas> に落書きすることができます。メニューから色やブラシの大きさを変えたりすることができます。しかし、メニューを開いてタブキーでオプションを循環させようとすると、フォーカスがモーダルの中に閉じ込められていないことに気が付くと思います。
これはアクションで修正することができます。actions.js から trapFocus をインポートし…
App.svelte
<script>
import Canvas from './Canvas.svelte';
import { trapFocus } from './actions.js';
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black'];
let selected = colors[0];
let size = 10;
let showMenu = true;
</script>…そして、それを use: ディレクティブを使ってメニュー(menu)に追加します:
App.svelte
<div class="menu" use:trapFocus>actions.js にある trapFocus 関数を見てみましょう。アクション関数は node (この場合は <div class="menu">) が DOM にマウントされたときに、その node を引数に取って呼び出され、destroy メソッドを持つアクションオブジェクトを返します。
まず、タブキーが押されたことをインターセプトするイベントリスナーを追加する必要があります:
actions.js
focusable()[0]?.focus();
node.addEventListener('keydown', handleKeydown);次に、node がアンマウントされたときにいくつかクリーンアップする必要があります — イベントリスナーを削除し、フォーカスを要素がマウントされる前の場所に戻します:
actions.js
focusable()[0]?.focus();
node.addEventListener('keydown', handleKeydown);
return {
destroy() {
node.removeEventListener('keydown', handleKeydown);
previous?.focus();
}
};これで、メニューを開いた時に、タブキーでオプションを循環させられるようになりました。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<script>
import Canvas from './Canvas.svelte';
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet', 'white', 'black'];
let selected = colors[0];
let size = 10;
let showMenu = true;
</script>
<div class="container">
<Canvas color={selected} size={size} /> {#if showMenu}<div
class="modal-background"
on:click|self={() => showMenu = false} on:keydown={(e) => {if (e.key === 'Escape') showMenu = false;
}}
>
<div class="menu">
<div class="colors">
{#each colors as color}<button
class="color"
aria-label={color} aria-current={selected === color} style="--color: {color}" on:click={() => {selected = color;
}}
/>
{/each}</div>
<label>
small
<input type="range" bind:value={size} min="1" max="50" />large
</label>
</div>
</div>
{/if}<div class="controls">
<button class="show-menu" on:click={() => showMenu = !showMenu}> {showMenu ? 'close' : 'menu'}</button>
</div>
</div>
<style>
.container {position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.controls {position: absolute;
left: 0;
top: 0;
padding: 1em;
}
.show-menu {width: 5em;
}
.modal-background {position: fixed;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(20px);
}
.menu {position: relative;
background: var(--bg-2);
width: calc(100% - 2em);
max-width: 28em;
padding: 1em 1em 0.5em 1em;
border-radius: 1em;
box-sizing: border-box;
user-select: none;
}
.colors {display: grid;
align-items: center;
grid-template-columns: repeat(9, 1fr);
grid-gap: 0.5em;
}
.color {aspect-ratio: 1;
border-radius: 50%;
background: var(--color, #fff);
transform: none;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
transition: all 0.1s;
}
.color[aria-current="true"] {transform: translate(1px, 1px);
filter: none;
box-shadow: inset 3px 3px 4px rgba(0,0,0,0.2);
}
.menu label {display: flex;
width: 100%;
margin: 1em 0 0 0;
}
.menu input {flex: 1;
}
</style>