mirror/vanilla-todo
1
0
Fork 0
mirror of https://github.com/morris/vanilla-todo.git synced 2025-08-21 05:11:20 +02:00
Code Issues Releases Wiki Activity

clean up comments

Browse Source
This commit is contained in:
Morris Brodersen
2023-11-26 14:31:37 +01:00
parent c91b27980e
commit 2815a1eb4c
9 changed files with 54 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dev/client.js
View File

@@ -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();
});

4
public/scripts/AppDraggable.js
View File

@@ -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) => {

32
public/scripts/AppFlip.js
View File

@@ -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 = '';

20
public/scripts/TodoApp.js
View File

@@ -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);

12
public/scripts/TodoCustomList.js
View File

@@ -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;

2
public/scripts/TodoFrameCustom.js
View File

@@ -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 }));
}

1
public/scripts/TodoFrameDays.js
View File

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

16
public/scripts/TodoItem.js
View File

@@ -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;

4
public/scripts/TodoItemInput.js
View File

@@ -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;
}