update to ES2020, some refactoring and cleanups

public/scripts/TodoList.js

@@ -1,20 +1,21 @@
-/* global VT */
-window.VT = window.VT || {};
+import { AppSortable } from './AppSortable.js';
+import { TodoItem } from './TodoItem.js';
+import { TodoItemInput } from './TodoItemInput.js';
 
-VT.TodoList = function (el) {
-  var state = {
+export function TodoList(el) {
+  const state = {
     items: [],
   };
 
-  el.innerHTML = [
-    '<div class="items"></div>',
-    '<div class="todo-item-input"></div>',
-  ].join('\n');
+  el.innerHTML = `
+    <div class="items"></div>
+    <div class="todo-item-input"></div>
+  `;
 
-  VT.AppSortable(el.querySelector('.items'), {});
-  VT.TodoItemInput(el.querySelector('.todo-item-input'));
+  AppSortable(el.querySelector('.items'), {});
+  TodoItemInput(el.querySelector('.todo-item-input'));
 
-  el.addEventListener('sortableDrop', function (e) {
+  el.addEventListener('sortableDrop', (e) =>
     el.dispatchEvent(
       new CustomEvent('moveItem', {
         detail: {
@@ -23,22 +24,22 @@ VT.TodoList = function (el) {
         },
         bubbles: true,
       })
-    );
-  });
+    )
+  );
+
+  el.addEventListener('todoItems', (e) => update({ items: e.detail }));
 
   function update(next) {
     Object.assign(state, next);
 
-    var container = el.querySelector('.items');
-    var obsolete = new Set(container.children);
-    var childrenByKey = new Map();
+    const container = el.querySelector('.items');
+    const obsolete = new Set(container.children);
+    const childrenByKey = new Map();
 
-    obsolete.forEach(function (child) {
-      childrenByKey.set(child.dataset.key, child);
-    });
+    obsolete.forEach((child) => childrenByKey.set(child.dataset.key, child));
 
-    var children = state.items.map(function (item) {
-      var child = childrenByKey.get(item.id);
+    const children = state.items.map((item) => {
+      let child = childrenByKey.get(item.id);
 
       if (child) {
         obsolete.delete(child);
@@ -46,26 +47,20 @@ VT.TodoList = function (el) {
         child = document.createElement('div');
         child.classList.add('todo-item');
         child.dataset.key = item.id;
-        VT.TodoItem(child);
+        TodoItem(child);
       }
 
-      child.todoItem.update({ item: item });
+      child.dispatchEvent(new CustomEvent('todoItem', { detail: item }));
 
       return child;
     });
 
-    obsolete.forEach(function (child) {
-      container.removeChild(child);
-    });
+    obsolete.forEach((child) => container.removeChild(child));
 
-    children.forEach(function (child, index) {
+    children.forEach((child, index) => {
       if (child !== container.children[index]) {
         container.insertBefore(child, container.children[index]);
       }
     });
   }
-
-  el.todoList = {
-    update: update,
-  };
-};
+}