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

update to ES2020, some refactoring and cleanups

Browse Source
This commit is contained in:
Morris Brodersen
2022-05-09 15:46:58 +02:00
parent b4c57030f8
commit 2fbfc5e650
26 changed files with 1507 additions and 2129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
public/scripts/TodoFrameDays.js
View File

@@ -1,71 +1,66 @@
/* global VT */
window.VT = window.VT || {};
import { AppIcon } from './AppIcon.js';
import { TodoDay } from './TodoDay.js';
import { formatDateId } from './util.js';
VT.TodoFrameDays = function (el) {
var RANGE = 14;
var state = {
export function TodoFrameDays(el) {
const RANGE = 14;
const state = {
items: [],
at: VT.formatDateId(new Date()),
at: formatDateId(new Date()),
};
el.innerHTML = [
'<nav class="leftcontrols">',
' <p><button class="app-button -circle -xl backward"><i class="app-icon" data-id="chevron-left-24"></i></button></p>',
' <p><button class="app-button fastbackward"><i class="app-icon -double" data-id="chevron-left-16"></i></i></button></p>',
' <p><button class="app-button home"><i class="app-icon" data-id="home-16"></i></button></p>',
'</nav>',
'<div class="container"></div>',
'<nav 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 fastforward"><i class="app-icon -double" data-id="chevron-right-16"></i></button></p>',
'</nav>',
].join('\n');
el.innerHTML = `
<nav class="leftcontrols">
<p><button class="app-button -circle -xl backward"><i class="app-icon" data-id="chevron-left-24"></i></button></p>
<p><button class="app-button fastbackward"><i class="app-icon -double" data-id="chevron-left-16"></i></i></button></p>
<p><button class="app-button home"><i class="app-icon" data-id="home-16"></i></button></p>
</nav>
<div class="container"></div>
<nav 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 fastforward"><i class="app-icon -double" data-id="chevron-right-16"></i></button></p>
</nav>
`;
setTimeout(function () {
el.classList.add('-animated');
}, 200);
setTimeout(() => el.classList.add('-animated'), 200);
el.querySelectorAll('.app-icon').forEach(VT.AppIcon);
el.querySelectorAll('.app-icon').forEach(AppIcon);
el.querySelector('.backward').addEventListener('click', function () {
el.dispatchEvent(new CustomEvent('seek', { detail: -1, bubbles: true }));
});
el.querySelector('.backward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: -1, bubbles: true }))
);
el.querySelector('.forward').addEventListener('click', function () {
el.dispatchEvent(new CustomEvent('seek', { detail: 1, bubbles: true }));
});
el.querySelector('.forward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: 1, bubbles: true }))
);
el.querySelector('.fastbackward').addEventListener('click', function () {
el.dispatchEvent(new CustomEvent('seek', { detail: -5, bubbles: true }));
});
el.querySelector('.fastbackward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: -5, bubbles: true }))
);
el.querySelector('.fastforward').addEventListener('click', function () {
el.dispatchEvent(new CustomEvent('seek', { detail: 5, bubbles: true }));
});
el.querySelector('.fastforward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: 5, bubbles: true }))
);
el.querySelector('.home').addEventListener('click', function () {
el.dispatchEvent(new CustomEvent('seekHome', { bubbles: true }));
});
el.querySelector('.home').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seekHome', { bubbles: true }))
);
el.todoFrameDays = {
update: update,
};
el.addEventListener('todoData', (e) => update(e.detail));
function update(next) {
Object.assign(state, next);
var days = getDays();
const days = getDays();
var container = el.querySelector('.container');
var obsolete = new Set(container.children);
var childrenByKey = new Map();
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 = days.map(function (day) {
var child = childrenByKey.get(day.id);
const children = days.map((day) => {
let child = childrenByKey.get(day.id);
if (child) {
obsolete.delete(child);
@@ -73,20 +68,18 @@ VT.TodoFrameDays = function (el) {
child = document.createElement('div');
child.className = 'card todo-day';
child.dataset.key = day.id;
VT.TodoDay(child);
TodoDay(child);
}
child.todoDay.update(day);
child.style.transform = 'translateX(' + day.position * 100 + '%)';
child.dispatchEvent(new CustomEvent('todoDay', { detail: day }));
child.style.transform = `translateX(${day.position * 100}%)`;
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]);
}
@@ -96,26 +89,26 @@ VT.TodoFrameDays = function (el) {
}
function updateHeight() {
var height = 280;
var container = el.querySelector('.container');
let height = 280;
const container = el.querySelector('.container');
for (var 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`;
}
function getDays() {
var days = [];
const days = [];
for (var i = 0; i < 2 * RANGE; ++i) {
var t = new Date(state.at);
for (let i = 0; i < 2 * RANGE; ++i) {
const t = new Date(state.at);
t.setDate(t.getDate() - RANGE + i);
var id = VT.formatDateId(t);
const id = formatDateId(t);
days.push({
id: id,
id,
items: getItemsForDay(id),
position: -RANGE + i,
});
@@ -125,14 +118,8 @@ VT.TodoFrameDays = function (el) {
}
function getItemsForDay(dateId) {
var items = state.items.filter(function (item) {
return item.listId === dateId;
});
items.sort(function (a, b) {
return a.index - b.index;
});
return items;
return state.items
.filter((item) => item.listId === dateId)
.sort((a, b) => a.index - b.index);
}
};
}