blob: 60f4a00831f48732df40f566638f560f613ed37f [file] [log] [blame]
/**
* @module modules/day-range-sk
* @description <h2><code>day-range-sk</code></h2>
*
* @evt day-range-change - Fired when the selection has stopped changing. Contains
* the begin and end timestamps in the details:
*
* {
* begin: 1470084997,
* end: 1474184677
* }
*
* @attr {Number} begin - The beginning of the time range in seconds since the epoch.
* @attr {Number} end - The end of the time range in seconds since the epoch.
*
*/
import { define } from 'elements-sk/define';
import { html } from 'lit-html';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import '../calendar-input-sk';
import { CalendarInputSk } from '../calendar-input-sk/calendar-input-sk';
export interface DayRangeSkChangeDetail {
// Seconds from the Unix epoch.
begin: number;
// Seconds from the Unix epoch.
end: number;
}
// Converts the timestamp in seconds from the epoch into a Date.
function dateFromTimestamp(timestamp: number) {
return new Date(timestamp * 1000);
}
export class DayRangeSk extends ElementSk {
static template = (ele: DayRangeSk) => html`
<label class="begin">
Begin
<calendar-input-sk
@change=${ele._beginChanged}
.displayDate=${dateFromTimestamp(ele.begin)}
></calendar-input-sk>
</label>
<label class="end">
End
<calendar-input-sk
@change=${ele._endChanged}
.displayDate=${dateFromTimestamp(ele.end)}
></calendar-input-sk>
</label>
`;
constructor() {
super(DayRangeSk.template);
}
connectedCallback() {
super.connectedCallback();
this._upgradeProperty('begin');
this._upgradeProperty('end');
const now = Date.now();
if (!this.begin) {
this.begin = now / 1000 - 24 * 60 * 60;
}
if (!this.end) {
this.end = now / 1000;
}
this._render();
}
_sendEvent() {
const detail = {
begin: this.begin,
end: this.end,
};
this.dispatchEvent(
new CustomEvent<DayRangeSkChangeDetail>('day-range-change', {
detail,
bubbles: true,
})
);
}
_beginChanged(e: Event) {
this.begin = Math.floor(
(e.target! as CalendarInputSk).displayDate.valueOf() / 1000
);
this._sendEvent();
}
_endChanged(e: Event) {
this.end = Math.floor(
(e.target! as CalendarInputSk).displayDate.valueOf() / 1000
);
this._sendEvent();
}
static get observedAttributes() {
return ['begin', 'end'];
}
/** @prop begin - Mirrors the 'begin' attribute. */
get begin() {
return +(this.getAttribute('begin') || '0');
}
set begin(val) {
this.setAttribute('begin', `${val}`);
}
/** @prop end - Mirrors the 'end' attribute. */
get end() {
return +(this.getAttribute('end') || '0');
}
set end(val) {
this.setAttribute('end', `${val}`);
}
attributeChangedCallback() {
this._render();
}
}
define('day-range-sk', DayRangeSk);