Add an animation branch with lit-html · 1Marc/modern-todomvc-vanillajs@ef86a73 (original) (raw)
1
1
`import { delegate, getURLHash, insertHTML, emptyElement } from "./helpers.js";
`
2
2
`import { TodoStore } from "./store.js";
`
``
3
`+
import { html, render } from "/node_modules/lit-html/lit-html.js";
`
``
4
`+
import { repeat } from "/node_modules/lit-html/directives/repeat.js";
`
3
5
``
4
6
`const Todos = new TodoStore("todo-vanillajs-2022");
`
5
7
``
`@@ -73,22 +75,29 @@ const App = {
`
73
75
`});
`
74
76
`},
`
75
77
`bindTodoEvents() {
`
76
``
`-
App.todoEvent("click", '[data-todo="destroy"]', (todo) =>
`
77
``
`-
Todos.remove(todo)
`
78
``
`-
);
`
``
78
`+
App.todoEvent("click", '[data-todo="destroy"]', (todo, $li) => {
`
``
79
`+
$li.classList.add("remove");
`
``
80
`+
setTimeout(function () {
`
``
81
`+
Todos.remove(todo);
`
``
82
`+
}, 500);
`
``
83
`+
});
`
79
84
`App.todoEvent("click", '[data-todo="toggle"]', (todo) =>
`
80
85
`Todos.toggle(todo)
`
81
86
`);
`
82
87
`App.todoEvent("dblclick", '[data-todo="label"]', (_, $li) => {
`
83
88
`$li.classList.add("editing");
`
84
89
`$li.querySelector('[data-todo="edit"]').focus();
`
``
90
`+
$li.querySelector(".new").classList.remove("new");
`
85
91
`});
`
86
92
`App.todoEvent("keyup", '[data-todo="edit"]', (todo, $li, e) => {
`
87
93
`let input=input = input=li.querySelector('[data-todo="edit"]');
`
88
``
`-
if (e.key === "Enter" && $input.value)
`
``
94
`+
if (e.key === "Enter" && $input.value) {
`
89
95
`Todos.update({ ...todo, title: $input.value });
`
``
96
`+
$li.classList.remove("editing");
`
``
97
`+
}
`
90
98
`if (e.key === "Escape") {
`
91
99
`$input.value = todo.title;
`
``
100
`+
$li.classList.remove("editing");
`
92
101
`App.render();
`
93
102
`}
`
94
103
`});
`
`@@ -98,35 +107,35 @@ const App = {
`
98
107
`});
`
99
108
`},
`
100
109
`createTodoItem(todo) {
`
101
``
`-
const li = document.createElement("li");
`
102
``
`-
li.dataset.id = todo.id;
`
103
``
`-
if (todo.completed) {
`
104
``
`-
li.classList.add("completed");
`
105
``
`-
}
`
106
``
`-
insertHTML(
`
107
``
`-
li,
`
108
``
`` -
`
``
109
``
`-
`
110
``
`-
<input data-todo="toggle" class="toggle" type="checkbox" ${
`
111
``
`-
todo.completed ? "checked" : ""
`
112
``
`-
}>
`
113
``
`-
`
114
``
`-
`
115
``
`-
`
116
``
`-
`
117
``
`` -
`
``
118
``
`-
);
`
119
``
`-
li.querySelector('[data-todo="label"]').textContent = todo.title;
`
120
``
`-
li.querySelector('[data-todo="edit"]').value = todo.title;
`
121
``
`-
return li;
`
``
110
`` +
const item = html`
``
``
111
`+
`
``
112
`+
`
``
113
`+
<input
`
``
114
`+
data-todo="toggle"
`
``
115
`+
type="checkbox"
`
``
116
`+
class="toggle"
`
``
117
`+
?checked=${todo.completed}
`
``
118
`+
/>
`
``
119
`+
${todo.title}
`
``
120
`+
`
``
121
`+
`
``
122
`+
`
``
123
`+
`
``
124
`` +
`;
``
``
125
`+
return item;
`
122
126
`},
`
123
127
`render() {
`
124
128
`const count = Todos.all().length;
`
125
129
`App.$.setActiveFilter(App.filter);
`
126
``
`-
emptyElement(App.$.list);
`
127
``
`-
Todos.all(App.filter).forEach((todo) => {
`
128
``
`-
App.$.list.appendChild(App.createTodoItem(todo));
`
129
``
`-
});
`
``
130
`+
const todos = Todos.all(App.filter);
`
``
131
`+
render(
`
``
132
`+
repeat(
`
``
133
`+
todos,
`
``
134
`+
(todo) => todo.id,
`
``
135
`+
(todo) => App.createTodoItem(todo)
`
``
136
`+
),
`
``
137
`+
App.$.list
`
``
138
`+
);
`
130
139
`App.$.showMain(count);
`
131
140
`App.$.showFooter(count);
`
132
141
`App.$.showClear(Todos.hasCompleted());
`