From 7949fcdc683d07689bad5da5d20bfa3eeb5a6a46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Tue, 5 Sep 2023 01:25:00 +0200 Subject: Move frontend code to subdirectories, to simplify command line flags. --- static/ts/components/date-time-input.ts | 119 ++++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 static/ts/components/date-time-input.ts (limited to 'static/ts/components/date-time-input.ts') diff --git a/static/ts/components/date-time-input.ts b/static/ts/components/date-time-input.ts new file mode 100644 index 00000000..20e9a505 --- /dev/null +++ b/static/ts/components/date-time-input.ts @@ -0,0 +1,119 @@ +export { DateTimeInput } + +import { makeElement, parseDate } from '../lib' + + +/* '' */ +class DateTimeInput extends /* HTMLInputElement */ HTMLElement { + + readonly time: HTMLInputElement; + readonly date: HTMLInputElement; + + constructor() { + super(); + + this.date = makeElement('input', { + type: 'date' + }) as HTMLInputElement + + this.time = makeElement('input', { + type: 'time', + disabled: this.dateonly + }) as HTMLInputElement + } + + connectedCallback() { + /* This can be in the constructor for chromium, but NOT firefox... + Vivaldi 4.3.2439.63 stable + Mozilla Firefox 94.0.1 + */ + /* + https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes + https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute + */ + this.replaceChildren(this.date, this.time) + } + + static get observedAttributes() { + return ['dateonly'] + } + + attributeChangedCallback(name: string, _: string | null, to: string | null): void { + switch (name) { + case 'dateonly': + if (to == null) { + this.time.disabled = false + } else { + if (to == '' || to == name) { + this.time.disabled = true; + } else { + throw new TypeError(`Invalid value for attribute dateonly: ${to}`) + } + } + break; + } + } + + get dateonly(): boolean { + return this.hasAttribute('dateonly'); + } + + set dateonly(b: boolean) { + if (b) { + this.setAttribute('dateonly', ""); + } else { + this.removeAttribute('dateonly'); + } + } + + set value(date: Date) { + let [d, t] = date.format("~L~Y-~m-~dT~H:~M").split('T'); + this.date.value = d; + this.time.value = t; + + this.dateonly = date.dateonly; + } + + get value(): Date { + let dt; + let date = this.date.value; + if (this.dateonly) { + dt = parseDate(date); + dt.dateonly = true; + } else { + let time = this.time.value; + dt = parseDate(date + 'T' + time) + dt.dateonly = false; + } + return dt; + } + + get stringValue(): string { + if (this.dateonly) { + return this.value.format("~Y-~m-~d") + } else { + return this.value.format("~Y-~m-~dT~H:~M:~S") + } + } + + set stringValue(new_value: Date | string) { + let date, time, dateonly = false; + if (new_value instanceof Date) { + date = new_value.format("~L~Y-~m-~d"); + time = new_value.format("~L~H:~M:~S"); + dateonly = new_value.dateonly; + } else { + [date, time] = new_value.split('T') + } + this.dateonly = dateonly; + this.date.value = date; + this.time.value = time; + } + + addEventListener(type: string, proc: ((e: Event) => void)) { + if (type != 'input') throw "Only input supported"; + + this.date.addEventListener(type, proc); + this.time.addEventListener(type, proc); + } +} -- cgit v1.2.3 From f653a01328be3b8be6af35c0c96867623765ca5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Tue, 5 Sep 2023 11:41:46 +0200 Subject: Move JS documentation into the JS-code. Texinfo was a bad match for how TypeScript is structured. This also allows generation of jsdoc pages, which can be nice. Another large win is that this opens up for the texinfo pages to replace the Guile heading with different subheadings, including - external library - internal library - C library - ... --- static/ts/components/date-time-input.ts | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) (limited to 'static/ts/components/date-time-input.ts') diff --git a/static/ts/components/date-time-input.ts b/static/ts/components/date-time-input.ts index 20e9a505..d1ab5ba1 100644 --- a/static/ts/components/date-time-input.ts +++ b/static/ts/components/date-time-input.ts @@ -1,9 +1,30 @@ +/** + * `` + * + * @category Web Components + * @mergeTarget components + * @module + */ + export { DateTimeInput } import { makeElement, parseDate } from '../lib' - -/* '' */ +/** + * The HTML component ``. + * An element for input for date-times. Similar to + * @example + * ```html + * + * + * ``` + * + * But as a single unit. + * + * ### Attributes + * - dateonly + * + */ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { readonly time: HTMLInputElement; @@ -54,6 +75,11 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { } } + /** + Setting this to true disabled the time part of the input, and makes + any output only have date components (alternativly, the time component + set to zero). + */ get dateonly(): boolean { return this.hasAttribute('dateonly'); } @@ -74,6 +100,7 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { this.dateonly = date.dateonly; } + /** Returns current value as a Date object. */ get value(): Date { let dt; let date = this.date.value; @@ -88,6 +115,7 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { return dt; } + /** Returns current value as an ISO-8601 formatted string. */ get stringValue(): string { if (this.dateonly) { return this.value.format("~Y-~m-~d") -- cgit v1.2.3 From e753d721519f72014241b3d2fc804a919f655769 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Thu, 7 Sep 2023 02:58:41 +0200 Subject: Document remaining javascript items. --- static/ts/components/date-time-input.ts | 38 ++++++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 8 deletions(-) (limited to 'static/ts/components/date-time-input.ts') diff --git a/static/ts/components/date-time-input.ts b/static/ts/components/date-time-input.ts index d1ab5ba1..33201653 100644 --- a/static/ts/components/date-time-input.ts +++ b/static/ts/components/date-time-input.ts @@ -27,7 +27,9 @@ import { makeElement, parseDate } from '../lib' */ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { + /** Our time input element */ readonly time: HTMLInputElement; + /** Our date input element */ readonly date: HTMLInputElement; constructor() { @@ -43,22 +45,30 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { }) as HTMLInputElement } + /** + We set our children first when mounted. + + This can be in the constructor for chromium, but NOT firefox... + + - Vivaldi 4.3.2439.63 stable + - Mozilla Firefox 94.0.1 + */ connectedCallback() { - /* This can be in the constructor for chromium, but NOT firefox... - Vivaldi 4.3.2439.63 stable - Mozilla Firefox 94.0.1 - */ - /* - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes - https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute - */ this.replaceChildren(this.date, this.time) } + /** + Attributes which we want notifications when they are change. + + Part of the Web Component API + + - `dateonly` + */ static get observedAttributes() { return ['dateonly'] } + /** Part of the Web Component API */ attributeChangedCallback(name: string, _: string | null, to: string | null): void { switch (name) { case 'dateonly': @@ -84,6 +94,7 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { return this.hasAttribute('dateonly'); } + /** See getter */ set dateonly(b: boolean) { if (b) { this.setAttribute('dateonly', ""); @@ -92,6 +103,7 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { } } + /** See getter */ set value(date: Date) { let [d, t] = date.format("~L~Y-~m-~dT~H:~M").split('T'); this.date.value = d; @@ -124,6 +136,13 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { } } + /** + Set the selected date. + + @param new_value + If given a date, set the input to that date. + If given a string, parse it as an ISO-8601 formatted datetime. + */ set stringValue(new_value: Date | string) { let date, time, dateonly = false; if (new_value instanceof Date) { @@ -138,6 +157,9 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { this.time.value = time; } + /** + Adds an event listener to both the date and time input. + */ addEventListener(type: string, proc: ((e: Event) => void)) { if (type != 'input') throw "Only input supported"; -- cgit v1.2.3