clean up comments

dev/client.js

@@ -11,7 +11,7 @@ if (!navigator.webdriver) {
 
     let reload = true;
 
-    // hot reload stylesheets
+    // Hot reload stylesheets
     document.querySelectorAll('link[rel=stylesheet]').forEach((el) => {
       if (el.getAttribute('href') === data.url) {
         el.setAttribute('href', data.url);
@@ -19,7 +19,7 @@ if (!navigator.webdriver) {
       }
     });
 
-    // hot reload images
+    // Hot reload images
     document.querySelectorAll('img').forEach((el) => {
       if (el.getAttribute('src') === data.url) {
         el.setAttribute('src', data.url);
@@ -27,7 +27,7 @@ if (!navigator.webdriver) {
       }
     });
 
-    // otherwise, reload page
+    // Otherwise, reload page
     if (reload) location.reload();
   });
 

public/scripts/AppDraggable.js

@@ -22,10 +22,10 @@ export function AppDraggable(el, options) {
   let imageX, imageY;
   let currentTarget;
 
-  el.addEventListener('touchstart', start);
+  el.addEventListener('touchstart', start, { passive: true });
   el.addEventListener('mousedown', start);
 
-  // maybe prevent click
+  // Maybe prevent click
   el.addEventListener(
     'click',
     (e) => {

public/scripts/AppFlip.js

@@ -11,13 +11,13 @@ export function AppFlip(el, options) {
   let first;
   let level = 0;
 
-  // enable animations only after an initial delay
+  // Enable animations only after an initial delay.
   setTimeout(() => {
     enabled = true;
   }, options.initialDelay ?? 100);
 
-  // take a snapshot before any HTML changes
+  // Take a snapshot before any HTML changes.
-  // do this only for the first beforeFlip event in the current cycle
+  // Do this only for the first beforeFlip event in the current cycle.
   el.addEventListener('beforeFlip', () => {
     if (!enabled) return;
     if (++level > 1) return;
@@ -25,8 +25,8 @@ export function AppFlip(el, options) {
     first = snapshot();
   });
 
-  // take a snapshot after HTML changes, calculate and play animations
+  // Take a snapshot after HTML changes, calculate and play animations.
-  // do this only for the last flip event in the current cycle
+  // Do this only for the last flip event in the current cycle.
   el.addEventListener('flip', () => {
     if (!enabled) return;
     if (--level > 0) return;
@@ -45,16 +45,16 @@ export function AppFlip(el, options) {
     });
   });
 
-  // build a snapshot of the current HTML's client rectangles
+  // Build a snapshot of the current HTML's client rectangles,
-  // includes original transforms and hierarchy
+  // including original transforms and hierarchy.
   function snapshot() {
     const map = new Map();
 
     el.querySelectorAll(options.selector).forEach((el) => {
       const key = el.dataset.key ?? el;
 
-      // parse original transform
+      // Parse original transform,
-      // i.e. strip inverse transform using "scale(1)" marker
+      // i.e. strip inverse transform using "scale(1)" marker.
       const transform = el.style.transform
         ? el.style.transform.replace(/^.*scale\(1\)/, '')
         : '';
@@ -90,7 +90,7 @@ export function AppFlip(el, options) {
     });
   }
 
-  // reinsert removed elements at their original position
+  // Reinsert removed elements at their original position.
   function invertForRemoval(first, last) {
     const toRemove = [];
 
@@ -120,8 +120,8 @@ export function AppFlip(el, options) {
     }
   }
 
-  // set position of moved elements to their original position
+  // Set position of moved elements to their original position,
-  // or set opacity to zero for new elements to appear nicely
+  // or set opacity to zero for new elements to appear nicely.
   function invertForAnimation(first, last) {
     const toAnimate = [];
 
@@ -135,7 +135,7 @@ export function AppFlip(el, options) {
         entry.el.style.opacity = '0';
         toAnimate.push(entry);
       } else if (entry.deltaX !== 0 || entry.deltaY !== 0) {
-        // set inverted transform with "scale(1)" marker, see above
+        // Set inverted transform with "scale(1)" marker, see above.
         entry.el.style.transition = 'none';
         entry.el.style.transform = `translate(${entry.deltaX}px, ${entry.deltaY}px) scale(1) ${entry.transform}`;
         toAnimate.push(entry);
@@ -144,7 +144,7 @@ export function AppFlip(el, options) {
 
     return toAnimate;
 
-    // calculate inverse transform relative to any animated ancestors
+    // Calculate inverse transform relative to any animated ancestors.
     function calculate(entry) {
       if (entry.calculated) return;
       entry.calculated = true;
@@ -169,7 +169,7 @@ export function AppFlip(el, options) {
     }
   }
 
-  // play remove animations and remove elements after timeout
+  // Play remove animations and remove elements after timeout.
   function remove(entries) {
     entries.forEach((entry) => {
       entry.el.style.transition = '';
@@ -185,7 +185,7 @@ export function AppFlip(el, options) {
     }, options.removeTimeout);
   }
 
-  // play move/appear animations
+  // Play move/appear animations.
   function animate(entries) {
     entries.forEach((entry) => {
       entry.el.style.transition = '';

public/scripts/TodoApp.js

@@ -57,14 +57,14 @@ export function TodoApp(el) {
   TodoFrameDays(el.querySelector('.todo-frame.-days'));
   TodoFrameCustom(el.querySelector('.todo-frame.-custom'));
 
-  // each of these events make changes to the HTML to be animated using FLIP
+  // Each of these events make changes to the HTML to be animated using FLIP.
-  // listening to them using "capture" dispatches "beforeFlip" before any changes
+  // Listening to them using "capture" dispatches "beforeFlip" before any changes.
   el.addEventListener('todoData', beforeFlip, true);
   el.addEventListener('sortableUpdate', beforeFlip, true);
   el.addEventListener('draggableCancel', beforeFlip, true);
   el.addEventListener('draggableDrop', beforeFlip, true);
 
-  // some necessary work to orchestrate drag & drop with FLIP animations
+  // Some necessary work to orchestrate drag & drop with FLIP animations
   el.addEventListener('draggableStart', (e) => {
     e.detail.image.classList.add('_noflip');
     el.appendChild(e.detail.image);
@@ -83,8 +83,8 @@ export function TodoApp(el) {
     e.detail.placeholder.classList.add('_noflip');
   });
 
-  // dispatch "focusOther" on .use-focus-other inputs if they are not active
+  // Dispatch "focusOther" on .use-focus-other inputs if they are not active.
-  // ensures only one edit input is active
+  // Ensures only one edit input is active.
   el.addEventListener('focusin', (e) => {
     if (!e.target.classList.contains('use-focus-other')) return;
 
@@ -94,16 +94,16 @@ export function TodoApp(el) {
     });
   });
 
-  // listen to the TodoStore's data
+  // Listen to the TodoStore's data.
-  // this is the main update
+  // This is the main update.
-  // everything else is related to drag & drop or FLIP animations
+  // Everything else is related to drag & drop or FLIP animations.
   el.addEventListener('todoData', (e) => {
     todoData = e.detail;
     update();
   });
 
-  // dispatch "flip" after HTML changes from these events
+  // Dispatch "flip" after HTML changes from the following events.
-  // this plays the FLIP animations
+  // This plays the FLIP animations.
   el.addEventListener('todoData', flip);
   el.addEventListener('sortableUpdate', flip);
   el.addEventListener('draggableCancel', flip);

public/scripts/TodoCustomList.js

@@ -38,9 +38,13 @@ export function TodoCustomList(el) {
     update();
   });
 
-  deleteEl.addEventListener('touchstart', () => {
+  deleteEl.addEventListener(
+    'touchstart',
+    () => {
       saveOnBlur = false;
-  });
+    },
+    { passive: true },
+  );
 
   deleteEl.addEventListener('mousedown', () => {
     saveOnBlur = false;
@@ -91,10 +95,10 @@ export function TodoCustomList(el) {
     e.detail.data.list = list;
     e.detail.data.key = list.id;
 
-    // update image (default would only be title element)
+    // Update image (default would only be title element).
     e.detail.setImage(el);
 
-    // override for horizontal dragging only
+    // Override for horizontal dragging only.
     e.detail.image.addEventListener('draggableDrag', (e) => {
       const x = e.detail.clientX - e.detail.imageX;
       const y = e.detail.originY - e.detail.imageY;

public/scripts/TodoFrameCustom.js

@@ -133,7 +133,7 @@ export function TodoFrameCustom(el) {
       container.children[i].style.height = `${height + 30}px`;
     }
 
-    // update collapsible on changing heights
+    // Update collapsible on changing heights
     el.dispatchEvent(new CustomEvent('collapse', { bubbles: true }));
   }
 

public/scripts/TodoFrameDays.js

@@ -8,6 +8,7 @@ import { formatDateId } from './util.js';
  */
 export function TodoFrameDays(el) {
   const RANGE = 14;
+
   let todoData = {
     items: [],
     at: formatDateId(new Date()),

public/scripts/TodoItem.js

@@ -32,9 +32,13 @@ export function TodoItem(el) {
 
   el.querySelectorAll('.app-icon').forEach(AppIcon);
 
-  checkboxEl.addEventListener('touchstart', () => {
+  checkboxEl.addEventListener(
+    'touchstart',
+    () => {
       saveOnBlur = false;
-  });
+    },
+    { passive: true },
+  );
 
   checkboxEl.addEventListener('mousedown', () => {
     saveOnBlur = false;
@@ -62,10 +66,10 @@ export function TodoItem(el) {
 
   inputEl.addEventListener('keyup', (e) => {
     switch (e.keyCode) {
-      case 13: // enter
+      case 13: // Enter
         save();
         break;
-      case 27: // escape
+      case 27: // Escape
         cancelEdit();
         break;
     }
@@ -100,7 +104,7 @@ export function TodoItem(el) {
     const label = inputEl.value.trim();
 
     if (label === '') {
-      // deferred deletion prevents a bug at reconciliation in TodoList:
+      // Deferred deletion prevents a bug at reconciliation in TodoList:
       //   Failed to execute 'removeChild' on 'Node': The node to be removed is
       //   no longer a child of this node. Perhaps it was moved in a 'blur'
       //   event handler?
@@ -137,8 +141,6 @@ export function TodoItem(el) {
   }
 
   function update() {
-    // TODO optimize
-
     el.classList.toggle('-done', item.done);
     checkboxEl.querySelector('input').checked = item.done;
     labelEl.innerText = item.label;

public/scripts/TodoItemInput.js

@@ -18,10 +18,10 @@ export function TodoItemInput(el) {
 
   inputEl.addEventListener('keyup', (e) => {
     switch (e.keyCode) {
-      case 13: // enter
+      case 13: // Enter
         save();
         break;
-      case 27: // escape
+      case 27: // Escape
         clear();
         break;
     }