-
Notifications
You must be signed in to change notification settings - Fork 5
/
todo-item.html
92 lines (75 loc) · 1.74 KB
/
todo-item.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
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
<template id="todo-item">
<input type="checkbox" checked="{{props.done}}" />
<input type="text" class="desc" readonly value="{{props.desc}}" />
<button class="remove icon-remove"></button>
<style>
:host {
display: block;
width: 100%;
padding: 7px;
background: white;
border: 1px solid whitesmoke;
}
:host:hover,
:host:hover .desc[readonly] {
background: whitesmoke;
}
:host[done=true] .desc[readonly] {
text-decoration: line-through;
}
:host:hover .remove {
display: inline-block;
}
input.desc {
width: 85%;
font-size: 14px;
}
input.desc[readonly] {
border: none;
}
input[type=checkbox] {
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
.remove {
display: none;
background: transparent;
font-size: 16px;
border: none;
padding: 4px;
cursor: pointer;
float: right;
color: var(--light-red);
}
.remove:hover {
color: var(--dark-red);
}
</style>
</template>
<script>
class TodoItem extends HTMLComponent {
init() {
this.render()
.on('change', '[type=checkbox]', e => this.toggleDone(e))
.on('click', '.remove', e => this.emit('remove'))
.on('dblclick', '.desc', e => this.edit(e))
.on('keyup', '.desc', e => this.save(e))
.on('focusout', '.desc', e => this.render())
}
edit(e) {
e.target.removeAttribute('readonly')
e.target.focus()
}
save(e) {
if (e.keyCode == 13)
this.update({ desc: e.target.value })
}
toggleDone(e) {
this.update({ done: e.target.checked })
this.emit('toggled')
}
}
TodoItem.register()
</script>