From 2815a1eb4c89cde5e4047ed5862c397a57994c26 Mon Sep 17 00:00:00 2001 From: Morris Brodersen Date: Sun, 26 Nov 2023 14:31:37 +0100 Subject: [PATCH] clean up comments --- dev/client.js | 6 +++--- public/scripts/AppDraggable.js | 4 ++-- public/scripts/AppFlip.js | 32 +++++++++++++++---------------- public/scripts/TodoApp.js | 20 +++++++++---------- public/scripts/TodoCustomList.js | 14 +++++++++----- public/scripts/TodoFrameCustom.js | 2 +- public/scripts/TodoFrameDays.js | 1 + public/scripts/TodoItem.js | 18 +++++++++-------- public/scripts/TodoItemInput.js | 4 ++-- 9 files changed, 54 insertions(+), 47 deletions(-) diff --git a/dev/client.js b/dev/client.js index af57961..587006b 100644 --- a/dev/client.js +++ b/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(); }); diff --git a/public/scripts/AppDraggable.js b/public/scripts/AppDraggable.js index 055cbe3..0776973 100644 --- a/public/scripts/AppDraggable.js +++ b/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) => { diff --git a/public/scripts/AppFlip.js b/public/scripts/AppFlip.js index 5d8f013..4ebf49b 100644 --- a/public/scripts/AppFlip.js +++ b/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 - // do this only for the first beforeFlip event in the current cycle + // Take a snapshot before any HTML changes. + // 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 - // do this only for the last flip event in the current cycle + // Take a snapshot after HTML changes, calculate and play animations. + // 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 - // includes original transforms and hierarchy + // Build a snapshot of the current HTML's client rectangles, + // 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 - // i.e. strip inverse transform using "scale(1)" marker + // Parse original transform, + // 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 - // or set opacity to zero for new elements to appear nicely + // Set position of moved elements to their original position, + // 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 = ''; diff --git a/public/scripts/TodoApp.js b/public/scripts/TodoApp.js index da98969..b63cb12 100644 --- a/public/scripts/TodoApp.js +++ b/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 - // listening to them using "capture" dispatches "beforeFlip" before any changes + // Each of these events make changes to the HTML to be animated using FLIP. + // 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 - // ensures only one edit input is active + // Dispatch "focusOther" on .use-focus-other inputs if they are not 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 - // this is the main update - // everything else is related to drag & drop or FLIP animations + // Listen to the TodoStore's data. + // This is the main update. + // 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 - // this plays the FLIP animations + // Dispatch "flip" after HTML changes from the following events. + // This plays the FLIP animations. el.addEventListener('todoData', flip); el.addEventListener('sortableUpdate', flip); el.addEventListener('draggableCancel', flip); diff --git a/public/scripts/TodoCustomList.js b/public/scripts/TodoCustomList.js index 96b2cc4..ca783a5 100644 --- a/public/scripts/TodoCustomList.js +++ b/public/scripts/TodoCustomList.js @@ -38,9 +38,13 @@ export function TodoCustomList(el) { update(); }); - deleteEl.addEventListener('touchstart', () => { - saveOnBlur = false; - }); + 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; diff --git a/public/scripts/TodoFrameCustom.js b/public/scripts/TodoFrameCustom.js index 6006c59..04b3533 100644 --- a/public/scripts/TodoFrameCustom.js +++ b/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 })); } diff --git a/public/scripts/TodoFrameDays.js b/public/scripts/TodoFrameDays.js index 96e3099..af598cd 100644 --- a/public/scripts/TodoFrameDays.js +++ b/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()), diff --git a/public/scripts/TodoItem.js b/public/scripts/TodoItem.js index f25b83a..9451202 100644 --- a/public/scripts/TodoItem.js +++ b/public/scripts/TodoItem.js @@ -32,9 +32,13 @@ export function TodoItem(el) { el.querySelectorAll('.app-icon').forEach(AppIcon); - checkboxEl.addEventListener('touchstart', () => { - saveOnBlur = false; - }); + 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; diff --git a/public/scripts/TodoItemInput.js b/public/scripts/TodoItemInput.js index 96b87ca..e88afc0 100644 --- a/public/scripts/TodoItemInput.js +++ b/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; }