blob: f1cfe7e62a651f305b0e130ad5f07e5f0fc2c647 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
/**
`<date-jump />`
@category Web Components
@mergeTarget components
@module
*/
export { DateJump }
/** Replace backend-driven [today] link with frontend, with one that
gets correctly set in the frontend. Similarly, update the go to
specific date button into a link which updates wheneven the date
form updates.
TODO is this comment correct? We somehow contain an input element also.
*/
class DateJump extends HTMLElement {
readonly #golink: HTMLAnchorElement;
readonly #input: HTMLInputElement;
constructor() {
super();
this.#golink = document.createElement('a')
this.#golink.classList.add('btn');
this.#golink.textContent = "➔"
this.#input = document.createElement('input')
this.#input.type = 'date';
}
/** Sets the link to NOW upon mounting */
connectedCallback() {
/* Form is just here so the css works out */
let form = document.createElement('form');
form.replaceChildren(this.#input, this.#golink);
this.replaceChildren(form);
this.#input.onchange = () => {
let date = this.#input.valueAsDate!.format('~Y-~m-~d');
this.#golink.href = `${date}.html`
}
let now = (new Date).format("~Y-~m-~d")
this.#input.value = now;
/* onchange isn't triggered by manually setting the value */
this.#golink.href = `${now}.html`
}
}
|
