119 lines
3.0 KiB
JavaScript
119 lines
3.0 KiB
JavaScript
import { dispatch, upgrade } from '../../../../node_modules/@browserkids/dom/index.js';
|
|
|
|
export default class CalendarView extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
upgrade(this, `
|
|
<template>
|
|
<link rel="stylesheet" href="calendar-view/calendar-view.css" @keydown.window="onKeyDown" />
|
|
<calendar-background @postrender="onPostRender">
|
|
<calendar-today @postrender="onPostRender" @click="onTodayClicked"></calendar-today>
|
|
<calendar-show-preferences @click="onShowPreferences"></calendar-show-preferences>
|
|
</calendar-background>
|
|
<calendar-legend @click="onLegendClicked" @postrender="onPostRender"></calendar-legend>
|
|
<calendar-month #$month @postrender="onPostRender"></calendar-month>
|
|
<calendar-navigation #$navigation @change="onChange" hidden></calendar-navigation>
|
|
</template>
|
|
`);
|
|
|
|
const { calendar, preferences } = window;
|
|
|
|
calendar.on('hide', this.onTodayClicked.bind(this));
|
|
preferences.on('changed', this.onPreferencesChanged.bind(this));
|
|
|
|
setInterval(this.update.bind(this), 1000);
|
|
|
|
this.selectedMonth = null;
|
|
this.lastUpdate = null;
|
|
|
|
this.onTodayClicked();
|
|
}
|
|
|
|
async update(force = false) {
|
|
const { selectedMonth } = this;
|
|
const { calendar } = window;
|
|
const now = await calendar.getDate();
|
|
const isFirstTime = this.lastUpdate === null;
|
|
const isSameHour = await calendar.isSameHour(this.lastUpdate || now, now);
|
|
|
|
if (force === false && isFirstTime === false && isSameHour) {
|
|
return;
|
|
}
|
|
|
|
this.lastUpdate = now;
|
|
|
|
dispatch(window, 'postupdate', { selectedMonth });
|
|
}
|
|
|
|
onKeyDown(e) {
|
|
const { key, metaKey } = e;
|
|
const { app, calendar, preferences } = window;
|
|
const { $navigation } = this.$refs;
|
|
|
|
if (key === 'Escape') {
|
|
if ($navigation.hidden) {
|
|
calendar.hide();
|
|
} else {
|
|
$navigation.hidden = true;
|
|
}
|
|
} else if (key === 'w' && metaKey === false) {
|
|
this.onToggle({ weeks: true });
|
|
} else if (key === ',' && metaKey) {
|
|
preferences.show();
|
|
} else if (key === 'q' && metaKey) {
|
|
app.quit();
|
|
}
|
|
}
|
|
|
|
onPreferencesChanged() {
|
|
this.update(true);
|
|
}
|
|
|
|
onToggle({ weeks }) {
|
|
const { $month } = this.$refs;
|
|
|
|
if (weeks) {
|
|
$month.classList.toggle('show-weeks');
|
|
}
|
|
|
|
this.onPostRender();
|
|
}
|
|
|
|
onPostRender() {
|
|
const { app } = window;
|
|
|
|
app.resizeWindow({
|
|
width: this.offsetWidth,
|
|
height: this.offsetHeight,
|
|
});
|
|
}
|
|
|
|
onShowPreferences() {
|
|
const { preferences } = window;
|
|
|
|
preferences.show();
|
|
|
|
return this;
|
|
}
|
|
|
|
onTodayClicked() {
|
|
this.onChange();
|
|
}
|
|
|
|
onLegendClicked() {
|
|
this.$refs.$navigation.hidden = false;
|
|
}
|
|
|
|
async onChange({ detail } = {}) {
|
|
const { calendar } = window;
|
|
|
|
this.selectedMonth = await calendar.getDate(detail ? { date: this.selectedMonth, ...detail } : {});
|
|
this.update(true);
|
|
|
|
if (detail?.diff?.years === undefined) {
|
|
this.$refs.$navigation.hidden = true;
|
|
}
|
|
}
|
|
}
|