update to ES2020, some refactoring and cleanups

public/scripts/TodoFrameCustom.js

@@ -1,51 +1,52 @@
-/* global VT */
-window.VT = window.VT || {};
+import { AppIcon } from './AppIcon.js';
+import { AppSortable } from './AppSortable.js';
+import { TodoCustomList } from './TodoCustomList.js';
 
-VT.TodoFrameCustom = function (el) {
-  var state = {
-    lists: [],
+export function TodoFrameCustom(el) {
+  const state = {
+    customLists: [],
     items: [],
-    at: 0,
+    customAt: 0,
     show: true,
   };
 
-  el.innerHTML = [
-    '<div class="leftcontrols">',
-    '  <p><button class="app-button -circle -xl back"><i class="app-icon" data-id="chevron-left-24"></i></button></p>',
-    '</div>',
-    '<div class="container"></div>',
-    '<div class="rightcontrols">',
-    '  <p><button class="app-button -circle -xl forward"><i class="app-icon" data-id="chevron-right-24"></i></button></p>',
-    '  <p><button class="app-button -circle -xl add"><i class="app-icon" data-id="plus-circle-24"></i></button></p>',
-    '</div>',
-  ].join('\n');
+  el.innerHTML = `
+    <div class="leftcontrols">
+      <p><button class="app-button -circle -xl back"><i class="app-icon" data-id="chevron-left-24"></i></button></p>
+    </div>
+    <div class="container"></div>
+    <div class="rightcontrols">
+      <p><button class="app-button -circle -xl forward"><i class="app-icon" data-id="chevron-right-24"></i></button></p>
+      <p><button class="app-button -circle -xl add"><i class="app-icon" data-id="plus-circle-24"></i></button></p>
+    </div>
+  `;
 
-  VT.AppSortable(el.querySelector('.container'), { direction: 'horizontal' });
+  AppSortable(el.querySelector('.container'), { direction: 'horizontal' });
 
-  setTimeout(function () {
+  setTimeout(() => {
     el.classList.add('-animated');
   }, 200);
 
-  el.querySelectorAll('.app-icon').forEach(VT.AppIcon);
+  el.querySelectorAll('.app-icon').forEach(AppIcon);
 
-  el.querySelector('.back').addEventListener('click', function () {
+  el.querySelector('.back').addEventListener('click', () => {
     el.dispatchEvent(
       new CustomEvent('customSeek', { detail: -1, bubbles: true })
     );
   });
 
-  el.querySelector('.forward').addEventListener('click', function () {
+  el.querySelector('.forward').addEventListener('click', () => {
     el.dispatchEvent(
       new CustomEvent('customSeek', { detail: 1, bubbles: true })
     );
   });
 
-  el.querySelector('.add').addEventListener('click', function () {
+  el.querySelector('.add').addEventListener('click', () => {
     el.dispatchEvent(new CustomEvent('addList', { detail: {}, bubbles: true }));
     // TODO seek if not at end
   });
 
-  el.addEventListener('sortableDrop', function (e) {
+  el.addEventListener('sortableDrop', (e) => {
     if (!e.detail.data.list) return;
 
     el.dispatchEvent(
@@ -59,30 +60,26 @@ VT.TodoFrameCustom = function (el) {
     );
   });
 
-  el.addEventListener('draggableOver', function (e) {
+  el.addEventListener('draggableOver', (e) => {
     if (!e.detail.data.list) return;
 
     updatePositions();
   });
 
-  el.todoFrameCustom = {
-    update: update,
-  };
+  el.addEventListener('todoData', (e) => update(e.detail));
 
   function update(next) {
     Object.assign(state, next);
 
-    var lists = getLists();
-    var container = el.querySelector('.container');
-    var obsolete = new Set(container.children);
-    var childrenByKey = new Map();
+    const lists = getLists();
+    const container = el.querySelector('.container');
+    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 = lists.map(function (list) {
-      var child = childrenByKey.get(list.id);
+    const children = lists.map((list) => {
+      let child = childrenByKey.get(list.id);
 
       if (child) {
         obsolete.delete(child);
@@ -90,19 +87,17 @@ VT.TodoFrameCustom = function (el) {
         child = document.createElement('div');
         child.className = 'card todo-custom-list';
         child.dataset.key = list.id;
-        VT.TodoCustomList(child);
+        TodoCustomList(child);
       }
 
-      child.todoCustomList.update({ list: list });
+      child.dispatchEvent(new CustomEvent('todoCustomList', { detail: list }));
 
       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]);
       }
@@ -113,54 +108,40 @@ VT.TodoFrameCustom = function (el) {
   }
 
   function updatePositions() {
-    el.querySelectorAll('.container > *').forEach(function (child, index) {
-      child.style.transform = 'translateX(' + (index - state.at) * 100 + '%)';
+    el.querySelectorAll('.container > *').forEach((child, index) => {
+      child.style.transform = `translateX(${(index - state.customAt) * 100}%)`;
     });
   }
 
   function updateHeight() {
-    var height = 280;
-    var container = el.querySelector('.container');
+    let height = 280;
+    const container = el.querySelector('.container');
 
-    var i, l;
-
-    for (i = 0, l = container.children.length; i < l; ++i) {
+    for (let i = 0, l = container.children.length; i < l; ++i) {
       height = Math.max(container.children[i].offsetHeight, height);
     }
 
-    el.style.height = height + 50 + 'px';
+    el.style.height = `${height + 50}px`;
 
-    for (i = 0, l = container.children.length; i < l; ++i) {
-      container.children[i].style.height = height + 'px';
+    for (let i = 0, l = container.children.length; i < l; ++i) {
+      container.children[i].style.height = `${height}px`;
     }
   }
 
   function getLists() {
-    var lists = state.lists.map(function (list) {
-      return {
+    return state.customLists
+      .map((list) => ({
         id: list.id,
         index: list.index,
         title: list.title,
         items: getItemsForList(list.id),
-      };
-    });
-
-    lists.sort(function (a, b) {
-      return a.index - b.index;
-    });
-
-    return lists;
+      }))
+      .sort((a, b) => a.index - b.index);
   }
 
   function getItemsForList(listId) {
-    var items = state.items.filter(function (item) {
-      return item.listId === listId;
-    });
-
-    items.sort(function (a, b) {
-      return a.index - b.index;
-    });
-
-    return items;
+    return state.items
+      .filter((item) => item.listId === listId)
+      .sort((a, b) => a.index - b.index);
   }
-};
+}