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

add date picker, refactor event names, cleanups

Browse Source
This commit is contained in:
Morris Brodersen
2022-05-10 12:47:17 +02:00
parent 45e0f3899d
commit 77238353f9
18 changed files with 334 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
public/scripts/TodoFrameDays.js
View File

@@ -1,3 +1,4 @@
import { AppDatePicker } from './AppDatePicker.js';
import { AppIcon } from './AppIcon.js';
import { TodoDay } from './TodoDay.js';
import { formatDateId } from './util.js';
@@ -11,39 +12,78 @@ export function TodoFrameDays(el) {
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>
<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>
</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>
<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>
<p>
<button class="app-button pickdate">
<i class="app-icon" data-id="calendar-16"></i>
</button>
</p>
<div class="app-dropdown app-date-picker datepicker"></div>
</nav>
`;
setTimeout(() => el.classList.add('-animated'), 200);
el.querySelectorAll('.app-icon').forEach(AppIcon);
el.querySelectorAll('.app-date-picker').forEach(AppDatePicker);
el.querySelector('.backward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: -1, bubbles: true }))
el.dispatchEvent(new CustomEvent('seekDays', { detail: -1, bubbles: true }))
);
el.querySelector('.forward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: 1, bubbles: true }))
el.dispatchEvent(new CustomEvent('seekDays', { detail: 1, bubbles: true }))
);
el.querySelector('.fastbackward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: -5, bubbles: true }))
el.dispatchEvent(new CustomEvent('seekDays', { detail: -5, bubbles: true }))
);
el.querySelector('.fastforward').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seek', { detail: 5, bubbles: true }))
el.dispatchEvent(new CustomEvent('seekDays', { detail: 5, bubbles: true }))
);
el.querySelector('.home').addEventListener('click', () =>
el.dispatchEvent(new CustomEvent('seekHome', { bubbles: true }))
el.dispatchEvent(new CustomEvent('seekToToday', { bubbles: true }))
);
el.querySelector('.pickdate').addEventListener('click', () =>
el
.querySelector('.datepicker')
.dispatchEvent(new CustomEvent('toggleDatePicker'))
);
el.querySelector('.datepicker').addEventListener('pickDate', (e) =>
el.dispatchEvent(
new CustomEvent('seekToDate', { detail: e.detail, bubbles: true })
)
);
el.addEventListener('todoData', (e) => update(e.detail));