Skip to content

Commit 9588a86

Browse files
zerodevxzerodevx
committed
Improve demo
1 parent adf46e8 commit 9588a86

File tree

6 files changed

+164
-141
lines changed

6 files changed

+164
-141
lines changed

‎docs/App.svelte‎

Lines changed: 141 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,161 @@
11
<script>
2-
/* eslint no-useless-escape: 0 */
3-
42
import { tick } from 'svelte'
53
import { SvelteToast, toast } from '../src'
64
75
// Hoist to `window` for debug
86
window.toast = toast
97
108
let selected
11-
let code = ''
12-
13-
const handleDefault = () => {
14-
selected = 'default'
15-
code = 'toast.push(\'Hello world!\')'
16-
toast.push('Hello world!')
17-
}
9+
let code = '// Tap a button below'
10+
let colors = false
11+
let bottom = false
12+
let options = {}
1813
19-
const handleGreen = () => {
20-
selected = 'green'
21-
code = `toast.push('Success!', {
14+
const handleClick = btn => {
15+
selected = btn.name
16+
code = btn.code
17+
btn.run()
18+
}
19+
20+
const buttons = [
21+
{
22+
name: 'DEFAULT',
23+
code: `toast.push('Hello world!')`, // eslint-disable-line quotes
24+
run: () => {
25+
toast.push('Hello world!')
26+
}
27+
},
28+
{
29+
name: 'GREEN',
30+
code: `toast.push('Success!', {
2231
theme: {
2332
'--toastBackground': '#48BB78',
2433
'--toastProgressBackground': '#2F855A'
2534
}
26-
)`
27-
toast.push('Success!', { theme: { '--toastBackground': '#48BB78', '--toastProgressBackground': '#2F855A' } })
28-
}
29-
30-
const handleYellow = () => {
31-
selected = 'yellow'
32-
code = `toast.push('Warning!', {
35+
)`,
36+
run: () => {
37+
toast.push('Success!', { theme: { '--toastBackground': '#48BB78', '--toastProgressBackground': '#2F855A' } })
38+
}
39+
},
40+
{
41+
name: 'YELLOW',
42+
code: `toast.push('Warning!', {
3343
theme: {
3444
'--toastBackground': '#ECC94B',
3545
'--toastProgressBackground': '#B7791F'
3646
}
37-
)`
38-
toast.push('Warning!', { theme: { '--toastBackground': '#ECC94B', '--toastProgressBackground': '#B7791F' } })
39-
}
40-
41-
const handleRed = () => {
42-
selected = 'red'
43-
code = `toast.push('Error!', {
47+
)`,
48+
run: () => {
49+
toast.push('Warning!', { theme: { '--toastBackground': '#ECC94B', '--toastProgressBackground': '#B7791F' } })
50+
}
51+
},
52+
{
53+
name: 'RED',
54+
code: `toast.push('Error!', {
4455
theme: {
4556
'--toastBackground': '#F56565',
4657
'--toastProgressBackground': '#C53030'
4758
}
48-
)`
49-
toast.push('Error!', { theme: { '--toastBackground': '#F56565', '--toastProgressBackground': '#C53030' } })
50-
}
51-
52-
const handleLong = () => {
53-
selected = 'long'
54-
code = 'toast.push(\'Watching the paint dry...\', { duration: 20000 })'
55-
toast.push('Watching the paint dry...', { duration: 20000 })
56-
}
57-
58-
const handleNodismiss = () => {
59-
selected = 'nodismiss'
60-
code = `toast.push('Where the close btn?!?', {
59+
)`,
60+
run: () => {
61+
toast.push('Error!', { theme: { '--toastBackground': '#F56565', '--toastProgressBackground': '#C53030' } })
62+
}
63+
},
64+
{
65+
name: 'LONG DURATION',
66+
code: `toast.push('Watching the paint dry...', { duration: 20000 })`, // eslint-disable-line quotes
67+
run: () => {
68+
toast.push('Watching the paint dry...', { duration: 20000 })
69+
}
70+
},
71+
{
72+
name: 'NON-DISMISSABLE',
73+
code: `toast.push('Where the close btn?!?', {
6174
initial: 0,
6275
progress: 0,
6376
dismissable: false
64-
})`
65-
toast.push('Where the close btn?!?', { initial: 0, progress: 0, dismissable: false })
66-
}
67-
68-
const handleRemove = () => {
69-
selected = 'remove'
70-
code = `// Remove the latest toast
77+
})`,
78+
run: () => {
79+
toast.push('Where the close btn?!?', { initial: 0, progress: 0, dismissable: false })
80+
}
81+
},
82+
{
83+
name: 'REMOVE LAST TOAST',
84+
code: `// Remove the latest toast
7185
toast.pop()
7286
7387
// Or remove a particular one
7488
const id = toast('Yo!')
75-
toast.pop(id)`
76-
toast.pop()
77-
}
78-
79-
const handleFlip = () => {
80-
selected = 'flip'
81-
code = `toast.push('Progress bar is flipped', {
89+
toast.pop(id)`,
90+
run: () => {
91+
toast.pop()
92+
}
93+
},
94+
{
95+
name: 'FLIP PROGRESS BAR',
96+
code: `toast.push('Progress bar is flipped', {
8297
initial: 0,
8398
progress: 1
84-
})`
85-
toast.push('Progress bar is flipped', { initial: 0, progress: 1 })
86-
}
99+
})`,
100+
run: () => {
101+
toast.push('Progress bar is flipped', { initial: 0, progress: 1 })
102+
}
103+
},
104+
{
105+
name: 'USE AS LOADING INDICATOR',
106+
code: `const sleep = t => new Promise(resolve => setTimeout(resolve, t))
87107
88-
const sleep = t => new Promise(resolve => setTimeout(resolve, t))
89-
const handleLoading = async () => {
90-
selected = 'loading'
91-
code = `const sleep = t => new Promise(resolve => setTimeout(resolve, t))
92108
const id = toast.push('Loading, please wait...', {
93109
duration: 300,
94110
initial: 0,
95111
progress: 0,
96112
dismissable: false
97113
})
114+
98115
await sleep(500)
99116
toast.set(id, { progress: 0.1 })
117+
100118
await sleep(3000)
101119
toast.set(id, { progress: 0.7 })
120+
102121
await sleep(1000)
103122
toast.set(id, { msg: 'Just a bit more', progress: 0.8 })
104-
await sleep(2000)
105-
toast.set(id, { progress: 1 })
106-
`
107-
const id = toast.push('Loading, please wait...', { duration: 300, initial: 0, progress: 0, dismissable: false })
108-
await sleep(500)
109-
toast.set(id, { progress: 0.1 })
110-
await sleep(3000)
111-
toast.set(id, { progress: 0.7 })
112-
await sleep(1000)
113-
toast.set(id, { msg: 'Just a bit more', progress: 0.8 })
114-
await sleep(2000)
115-
toast.set(id, { progress: 1 })
116-
}
117123
118-
let colors = false
119-
const handleColor = () => {
120-
selected = 'color'
121-
code = `<style>
122-
:root {
123-
--toastBackground: rgba(255,255,255,0.98);
124-
--toastColor: #2D3748;
125-
}
124+
await sleep(2000)
125+
toast.set(id, { progress: 1 })`,
126+
run: async () => {
127+
const sleep = t => new Promise(resolve => setTimeout(resolve, t))
128+
const id = toast.push('Loading, please wait...', { duration: 300, initial: 0, progress: 0, dismissable: false })
129+
await sleep(500)
130+
toast.set(id, { progress: 0.1 })
131+
await sleep(3000)
132+
toast.set(id, { progress: 0.7 })
133+
await sleep(1000)
134+
toast.set(id, { msg: 'Just a bit more', progress: 0.8 })
135+
await sleep(2000)
136+
toast.set(id, { progress: 1 })
137+
}
138+
},
139+
{
140+
name: 'CHANGE DEFAULT COLORS',
141+
code: `<style>
142+
:root {
143+
--toastBackground: rgba(255,255,255,0.95);
144+
--toastColor: #424242;
145+
--toastProgressBackground: aquamarine;
146+
}
126147
</style>
127148
<script>
128149
toast.push('Changed some colors')
129-
<\/script>`
130-
colors = true
131-
toast.push('Changed some colors')
132-
}
133-
134-
let options = {}
135-
let bottom = false
136-
const handleBottom = async () => {
137-
selected = 'bottom'
138-
code = `<style>
150+
<\/script>`, // eslint-disable-line no-useless-escape
151+
run: () => {
152+
colors = true
153+
toast.push('Changed some colors')
154+
}
155+
},
156+
{
157+
name: 'POSITION TO BOTTOM',
158+
code: `<style>
139159
:root {
140160
--toastContainerTop: auto;
141161
--toastContainerRight: auto;
@@ -148,29 +168,34 @@ const handleBottom = async () => {
148168
149169
<script>
150170
toast.push('Bottoms up!')
151-
<\/script>`
152-
bottom = true
153-
options = { reversed: true, intro: { y: 128 } }
154-
await tick()
155-
toast.push('Bottoms up!')
156-
}
157-
158-
const handleRestore = async () => {
159-
selected = 'restore'
160-
code = '// All default settings restored!'
161-
colors = false
162-
bottom = false
163-
options = {}
164-
await tick()
165-
toast.push('All themes reset!')
166-
}
171+
<\/script>`, // eslint-disable-line no-useless-escape
172+
run: async () => {
173+
bottom = true
174+
options = { reversed: true, intro: { y: 128 } }
175+
await tick()
176+
toast.push('Bottoms up!')
177+
}
178+
},
179+
{
180+
name: 'RESTORE DEFAULTS',
181+
code: '// All default settings restored!',
182+
run: async () => {
183+
colors = false
184+
bottom = false
185+
options = { reversed: false, intro: { x: 256 } }
186+
await tick()
187+
toast.push('All themes reset!')
188+
}
189+
}
190+
]
167191
168192
</script>
169193

170194
<style>
171195
.colors {
172-
--toastBackground: rgba(255,255,255,0.98);
173-
--toastColor: #2D3748;
196+
--toastBackground: rgba(255,255,255,0.95);
197+
--toastColor: #424242;
198+
--toastProgressBackground: aquamarine;
174199
}
175200
.bottom {
176201
--toastContainerTop: auto;
@@ -183,25 +208,19 @@ const handleRestore = async () => {
183208
<div class="container">
184209

185210
<div class="w-full h-64 px-2 mt-4 mb-8">
186-
<pre class="w-full h-full bg-gray-700 text-gray-200 font-mono border border-gray-500 rounded-sm overflow-scroll p-4"><code>
211+
<pre class="w-full h-full bg-gray-700 text-gray-200 font-mono shadow rounded-sm overflow-scroll p-4"><code>
187212
{code}
188213
</code></pre>
189214
</div>
190215

191216
<div class="flex flex-row flex-wrap items-center justify-center">
192217

193-
<button class="btn" class:selected={selected === 'default'} on:click={handleDefault}>DEFAULT</button>
194-
<button class="btn" class:selected={selected === 'green'} on:click={handleGreen}>GREEN</button>
195-
<button class="btn" class:selected={selected === 'yellow'} on:click={handleYellow}>YELLOW</button>
196-
<button class="btn" class:selected={selected === 'red'} on:click={handleRed}>RED</button>
197-
<button class="btn" class:selected={selected === 'long'} on:click={handleLong}>LONG TIME</button>
198-
<button class="btn" class:selected={selected === 'nodismiss'} on:click={handleNodismiss}>NO DISMISS</button>
199-
<button class="btn" class:selected={selected === 'remove'} on:click={handleRemove}>REMOVE LAST</button>
200-
<button class="btn" class:selected={selected === 'flip'} on:click={handleFlip}>FLIP PROGRESS</button>
201-
<button class="btn" class:selected={selected === 'loading'} on:click={handleLoading}>USE AS LOADING INDICATOR</button>
202-
<button class="btn" class:selected={selected === 'color'} on:click={handleColor}>CHANGE DEFAULT COLORS</button>
203-
<button class="btn" class:selected={selected === 'bottom'} on:click={handleBottom}>POSITION TO BOTTOM</button>
204-
<button class="btn" class:selected={selected === 'restore'} on:click={handleRestore}>RESTORE DEFAULTS</button>
218+
{#each buttons as btn}
219+
<button
220+
class:selected={selected === btn.name}
221+
on:click={() => { handleClick(btn) }}
222+
>{btn.name}</button>
223+
{/each}
205224

206225
</div>
207226
</div>

‎docs/build/bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)