From ef86a73166029991dc88c649f7ec4931a2a96c86 Mon Sep 17 00:00:00 2001 From: Marc Grabanski Date: Mon, 12 Sep 2022 17:07:57 -0500 Subject: [PATCH] Add an animation branch with lit-html --- css/index.css | 33 +++++++++++++++++++++ js/app.js | 67 ++++++++++++++++++++++++------------------- package-lock.json | 73 ++++++++++++++++++++++++++++++++--------------- package.json | 3 +- 4 files changed, 123 insertions(+), 53 deletions(-) diff --git a/css/index.css b/css/index.css index 5942ed7..7278bc6 100644 --- a/css/index.css +++ b/css/index.css @@ -390,3 +390,36 @@ html .clear-completed:active { box-shadow: 0 0 2px 2px #cf7d7d; outline: 0; } + +@keyframes append-animate { + from { + transform: translateX(-100%); + opacity: 0; + } + to { + transform: translateX(0%); + opacity: 1; + } +} + +@keyframes remove-animate { + from { + transform: translateX(0%); + opacity: 1; + } + to { + transform: translateX(-100%); + opacity: 0; + } +} + +.todo-list li { + overflow: hidden; +} +/* animate new box */ +.new { + animation: append-animate 0.5s ease-out; +} +.remove { + animation: remove-animate 0.5s ease-in; +} \ No newline at end of file diff --git a/js/app.js b/js/app.js index 66992a4..9d7b89f 100644 --- a/js/app.js +++ b/js/app.js @@ -1,5 +1,7 @@ import { delegate, getURLHash, insertHTML, emptyElement } from "./helpers.js"; import { TodoStore } from "./store.js"; +import { html, render } from "/node_modules/lit-html/lit-html.js"; +import { repeat } from "/node_modules/lit-html/directives/repeat.js"; const Todos = new TodoStore("todo-vanillajs-2022"); @@ -73,22 +75,29 @@ const App = { }); }, bindTodoEvents() { - App.todoEvent("click", '[data-todo="destroy"]', (todo) => - Todos.remove(todo) - ); + App.todoEvent("click", '[data-todo="destroy"]', (todo, $li) => { + $li.classList.add("remove"); + setTimeout(function () { + Todos.remove(todo); + }, 500); + }); App.todoEvent("click", '[data-todo="toggle"]', (todo) => Todos.toggle(todo) ); App.todoEvent("dblclick", '[data-todo="label"]', (_, $li) => { $li.classList.add("editing"); $li.querySelector('[data-todo="edit"]').focus(); + $li.querySelector(".new").classList.remove("new"); }); App.todoEvent("keyup", '[data-todo="edit"]', (todo, $li, e) => { let $input = $li.querySelector('[data-todo="edit"]'); - if (e.key === "Enter" && $input.value) + if (e.key === "Enter" && $input.value) { Todos.update({ ...todo, title: $input.value }); + $li.classList.remove("editing"); + } if (e.key === "Escape") { $input.value = todo.title; + $li.classList.remove("editing"); App.render(); } }); @@ -98,35 +107,35 @@ const App = { }); }, createTodoItem(todo) { - const li = document.createElement("li"); - li.dataset.id = todo.id; - if (todo.completed) { - li.classList.add("completed"); - } - insertHTML( - li, - ` -
- - - -
- - ` - ); - li.querySelector('[data-todo="label"]').textContent = todo.title; - li.querySelector('[data-todo="edit"]').value = todo.title; - return li; + const item = html` +
  • +
    + + + +
    + +
    • + `; + return item; }, render() { const count = Todos.all().length; App.$.setActiveFilter(App.filter); - emptyElement(App.$.list); - Todos.all(App.filter).forEach((todo) => { - App.$.list.appendChild(App.createTodoItem(todo)); - }); + const todos = Todos.all(App.filter); + render( + repeat( + todos, + (todo) => todo.id, + (todo) => App.createTodoItem(todo) + ), + App.$.list + ); App.$.showMain(count); App.$.showFooter(count); App.$.showClear(Todos.hasCompleted()); diff --git a/package-lock.json b/package-lock.json index cebfe8c..3052ec2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,24 +1,51 @@ { - "name": "todomvc-vanillajs-2022", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "dependencies": { - "todomvc-app-css": "^2.0.0" - } - }, - "node_modules/todomvc-app-css": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz", - "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg==" - } - }, - "dependencies": { - "todomvc-app-css": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz", - "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg==" - } - } -} \ No newline at end of file + "name": "todomvc-vanillajs-2022", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "lit-html": "^2.3.1", + "todomvc-app-css": "^2.0.0" + } + }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "node_modules/lit-html": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz", + "integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, + "node_modules/todomvc-app-css": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz", + "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg==" + } + }, + "dependencies": { + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "lit-html": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.3.1.tgz", + "integrity": "sha512-FyKH6LTW6aBdkfNhNSHyZTnLgJSTe5hMk7HFtc/+DcN1w74C215q8B+Cfxc2OuIEpBNcEKxgF64qL8as30FDHA==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, + "todomvc-app-css": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz", + "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg==" + } + } +} diff --git a/package.json b/package.json index 99f8eac..61ec396 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "start": "python3 -m http.server 1337" }, "dependencies": { - "todomvc-app-css": "^2.0.0" + "todomvc-app-css": "^2.0.0", + "lit-html": "^2.3.1" }, "dependenciesComments": { "todomvc-app-css": "TodoMVC boilerplate CSS (not in use, just copy/pasted into css/index.css)"