128 lines
3.7 KiB
JavaScript
128 lines
3.7 KiB
JavaScript
import { dispatch, upgrade } from '../../../../node_modules/@browserkids/dom/index.js';
|
|
|
|
export default class CalendarNavigation extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
upgrade(this, `
|
|
<template>
|
|
<link rel="stylesheet" href="calendar-navigation/calendar-navigation.css">
|
|
|
|
<div
|
|
class="calendar-navigation"
|
|
@keydown.window="onKeyDown"
|
|
@postupdate.window="onPostUpdate"
|
|
>
|
|
<div class="year">
|
|
<button class="go-to" @click="goPreviousYear">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="icon-chevron">
|
|
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<strong class="go-to -year" #$year></strong>
|
|
|
|
<button class="go-to" @click="goNextYear">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="icon-chevron">
|
|
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L10.293 8 4.646 2.354a.5.5 0 010-.708z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="month">
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
<button #$month class="go-to" @click="goMonth"></button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
`);
|
|
}
|
|
|
|
onKeyDown(e) {
|
|
const { key } = e;
|
|
|
|
if (key === 'ArrowRight') {
|
|
this.goNextMonth();
|
|
} else if (key === 'ArrowLeft') {
|
|
this.goPreviousMonth();
|
|
} else if (key === 'ArrowUp') {
|
|
this.goNextYear();
|
|
} else if (key === 'ArrowDown') {
|
|
this.goPreviousYear();
|
|
} else if (key === ' ') {
|
|
this.goToday();
|
|
|
|
// Hitting space might as well trigger a focused button (month),
|
|
// avoid that behaviour.
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
async onPostUpdate({ detail }) {
|
|
const { calendar } = window;
|
|
const { selectedMonth } = detail;
|
|
const { $year, $month } = this.$refs;
|
|
const months = await calendar.getMonths();
|
|
|
|
$year.textContent = selectedMonth.getFullYear();
|
|
|
|
$month.forEach(($el, month) => {
|
|
$el.classList.toggle(
|
|
'-current',
|
|
month === selectedMonth.getMonth(),
|
|
);
|
|
|
|
// eslint-disable-next-line no-param-reassign
|
|
$el.textContent = months[month];
|
|
});
|
|
|
|
return this;
|
|
}
|
|
|
|
goToday() {
|
|
dispatch(this, 'change');
|
|
|
|
return this;
|
|
}
|
|
|
|
goMonth({ currentTarget }) {
|
|
dispatch(this, 'change', { set: { month: this.$refs.$month.indexOf(currentTarget) } });
|
|
|
|
return this;
|
|
}
|
|
|
|
goPreviousYear() {
|
|
dispatch(this, 'change', { diff: { years: -1 } });
|
|
|
|
return this;
|
|
}
|
|
|
|
goNextYear() {
|
|
dispatch(this, 'change', { diff: { years: 1 } });
|
|
|
|
return this;
|
|
}
|
|
|
|
goPreviousMonth() {
|
|
dispatch(this, 'change', { diff: { months: -1 } });
|
|
|
|
return this;
|
|
}
|
|
|
|
goNextMonth() {
|
|
dispatch(this, 'change', { diff: { months: 1 } });
|
|
|
|
return this;
|
|
}
|
|
}
|