generated from adamrybinski/haunted-snow
-
Notifications
You must be signed in to change notification settings - Fork 1
/
mulLike.html
39 lines (35 loc) · 1.11 KB
/
mulLike.html
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
<!-- Use xstate 4.23.1 to creat HTML button with transitions through data- HTML attributes -->
<!-- https://cdn.skypack.dev/xstate -->
<!DOCTYPE html>
<html>
<script type="module">
import 'https://deno.land/x/[email protected]/demoSetup.js'
import 'https://deno.land/x/[email protected]/MulButton.js'
import { html, component, useRef, createMachine, assign } from 'https://deno.land/x/[email protected]/deps.js'
import { useMachine } from 'https://deno.land/x/[email protected]/useMachine.js'
export const likeMachine = createMachine({
initial: 'unliked',
states: {
unliked: { on: { toggle: 'liking'}},
liking: { after: { 600: 'liked'} },
liked: { on: { toggle: 'unliking'}},
unliking: { after: { 600: 'unliked'}}
}
});
function mulState(element) {
const { state, send } = useMachine(likeMachine)
const onToggle = () => {
send('toggle')
}
const countValue = 0;
return html`
<mul-button @click=${onToggle}>
<span>${state.value}</span>
</mul-button>
`
}
customElements.define('mul-state', component(mulState))
</script>
<mul-state></mul-state>
</html>
<!-- end -->