Enhancements to todo app

robtweed · Aug 7, 2023 · 6410c55 · 6410c55
1 parent 834ba83
commit 6410c55
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 12 deletions.
diff --git a/examples/todo/js/app.js b/examples/todo/js/app.js
@@ -177,7 +177,7 @@
     }
   };
 
-  golgi.logging = true;
+  //golgi.logging = true;
 
   await golgi.renderAssembly('root', 'body', context);
 

diff --git a/examples/todo/js/components/todo/todo-footer.js b/examples/todo/js/components/todo/todo-footer.js
@@ -125,13 +125,13 @@ button {
 
   <ul class="filters">
     <li>
-      <a href="#/all" golgi:prop="allSelector" class="selected" golgi:on_click="showAll">All</a>
+      <a href="#" golgi:prop="allSelector" class="selected" golgi:on_click="showAll">All</a>
     </li>
     <li>
-      <a href="#/active" golgi:prop="activeSelector" golgi:on_click="showActive">Active</a>
+      <a href="#" golgi:prop="activeSelector" golgi:on_click="showActive">Active</a>
     </li> 
     <li>
-      <a href="#/completed" golgi:prop="completedSelector" golgi:on_click="showCompleted">Completed</a>
+      <a href="#" golgi:prop="completedSelector" golgi:on_click="showCompleted">Completed</a>
     </li>
   </ul> 
 

diff --git a/examples/todo/js/components/todo/todo-header.js b/examples/todo/js/components/todo/todo-header.js
@@ -51,10 +51,13 @@ input:placeholder-shown {
     }
 
     async addTodo() {
-      let id = this.context.createTodo(this.input.value);
-      let itemComponent = await this.context.mainComponent.addItem(id, this.input.value, false);
-      this.context.registerItemComponent(id, itemComponent);
-      this.input.value = '';
+      let value = this.input.value.trim();
+      if (value !== '') {
+        let id = this.context.createTodo(value);
+        let itemComponent = await this.context.mainComponent.addItem(id, value, false);
+        this.context.registerItemComponent(id, itemComponent);
+        this.input.value = '';
+      }
     }
 
   });

diff --git a/examples/todo/js/components/todo/todo-item.js b/examples/todo/js/components/todo/todo-item.js
@@ -171,7 +171,7 @@ input[type='text']:not(.edit) {
     <label golgi:on_dblclick="editingOn">golgi:bind=value</label>
     <button class="destroy" golgi:on_click="destroy"></button>
   </div> 
-  <input type="text" class="edit hidden" golgi:prop="editField" value="golgi:bind=value" golgi:on_blur="editingOff" golgi:on_change="editingOff" />
+  <input type="text" class="edit hidden" golgi:prop="editField" value="golgi:bind=value" golgi:on_blur="editingOff" golgi:on_keydown="testForEnd" />
 </li>
 
       `;
@@ -252,23 +252,40 @@ input[type='text']:not(.edit) {
 
     editingOn() {
 
+      this.originalValue = this.editField.value;
+
       // turn on the edit field
 
       this.viewDiv.classList.add('hidden');
       this.editField.classList.remove('hidden');
       this.editField.focus();
     }
 
+    testForEnd(e) {
+      if (e.key === 'Escape') {
+        this.editField.value = this.originalValue;
+      }
+      if (e.key === 'Escape' || e.key === 'Enter') {
+        this.editingOff();
+      }
+    }
+
     editingOff() {
 
       // turn off the edit field and transfer the new value to the UI and todos object
 
+      let text = this.editField.value.trim();
+      if (text === '') {
+        this.destroy();
+        return;
+      }
+
       this.viewDiv.classList.remove('hidden');
       this.editField.classList.add('hidden');
       this.modifyState({
-        value: this.editField.value
+        value: text
       });
-      this.context.editTodo(this.todoId, this.editField.value);
+      this.context.editTodo(this.todoId, text);
     }
 
     destroy() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "golgi",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Dynamically-loading WebComponent Assembly Framework",
   "main": "/src/golgi.mjs",
   "browser": "/src/golgi.min.js",