Add ability to edit todo items.

fdb · fdb · commit 45c01e07b568 · 2018-07-01T00:17:38.000+02:00
diff --git a/Projects/todo/js/todo.js b/Projects/todo/js/todo.js
@@ -4,6 +4,7 @@ let TODOS = [
     // {id: 3, title: 'Finish this project', done: false}
 ];
 let FILTER = 'all';
+let EDITING_ID = null;
 
 function makePlural(word, count) {
     if (count === 1) {
@@ -25,24 +26,45 @@ function update() {
         filteredTodos = TODOS.filter(todo => todo.done);
     }
     filteredTodos.forEach(({id, title, done}) => {
-        $li = document.createElement('li');
+        const $li = document.createElement('li');
         $li.dataset.id = id;
-        $toggle = document.createElement('input');
+        $li.addEventListener('dblclick', onStartEditing.bind(null, id));
+        if (EDITING_ID === id) {
+            $li.classList.add('editing');
+        }
+        $todoList.appendChild($li);
+
+        // Toggle button
+        const $toggle = document.createElement('input');
         $toggle.setAttribute('class', 'toggle');
         $toggle.setAttribute('type', 'checkbox');
         if (done) {
             $toggle.setAttribute('checked', 'checked');
         }
         $toggle.addEventListener('change', onToggleTodo.bind(null, id));
         $li.appendChild($toggle);
-        $label = document.createElement('label');
+
+        // Label
+        const $label = document.createElement('label');
         $label.innerHTML = title;
         $li.appendChild($label);
-        $button = document.createElement('button');
+
+        // Delete button
+        const $button = document.createElement('button');
         $button.setAttribute('class', 'destroy');
         $button.addEventListener('click', onDeleteTodo.bind(null, id));
         $li.appendChild($button);
-        $todoList.appendChild($li);
+
+        // Input field
+        if (EDITING_ID === id) {
+            const $input = document.createElement('input');
+            $input.setAttribute('class', 'edit');
+            $input.addEventListener('change', onCommitEditing.bind(null, id));
+            $input.addEventListener('blur', onCancelEditing.bind(null, id));
+            $li.appendChild($input);
+            $input.value = title;
+            $input.focus();
+        }
     });
     if (TODOS.length === 0) {
         document.querySelector('.main').style.display = 'none';
@@ -85,6 +107,23 @@ function onClearCompleted() {
     update();
 }
 
+function onStartEditing(id) {
+    EDITING_ID = id;
+    update();
+}
+
+function onCommitEditing(id, e) {
+    const item = TODOS.find(todo => todo.id === id);
+    item.title = e.target.value.trim();
+    EDITING_ID = null;
+    update();
+}
+
+function onCancelEditing(id) {
+    EDITING_ID = null;
+    update();
+}
+
 const $newTodo = document.querySelector('.new-todo');
 $newTodo.addEventListener('change', onNewTodo);
 const $filterAll = document.querySelectorAll('.filters a')[0];
