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/vevent.ts | 69 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 static/ts/components/vevent.ts (limited to 'static/ts/components/vevent.ts') diff --git a/static/ts/components/vevent.ts b/static/ts/components/vevent.ts new file mode 100644 index 00000000..7487cbb6 --- /dev/null +++ b/static/ts/components/vevent.ts @@ -0,0 +1,69 @@ +export { ComponentVEvent } + +import { vcal_objects } from '../globals' +import { VEvent } from '../vevent' + +/* Root component for all events which content is closely linked to a +@code{VEvent} object + +Lacks an accompaning tag, and shouldn't be directly instanciated. +*/ +abstract class ComponentVEvent extends HTMLElement { + + template?: HTMLTemplateElement + uid: string + + constructor(uid?: string) { + super(); + this.template = document.getElementById(this.tagName.toLowerCase()) as HTMLTemplateElement | undefined + + let real_uid; + + if (uid) { + // console.log('Got UID directly'); + real_uid = uid; + } else { + /* I know that this case is redundant, it's here if we don't want to + look up the tree later */ + if (this.dataset.uid) { + // console.log('Had UID as direct attribute'); + real_uid = this.dataset.uid; + } else { + let el = this.closest('[data-uid]') + if (el) { + // console.log('Found UID higher up in the tree'); + real_uid = (el as HTMLElement).dataset.uid + } else { + throw "No parent with [data-uid] set" + } + } + } + + if (!real_uid) { + console.warn(this.outerHTML); + throw `UID required` + } + + // console.log(real_uid); + this.uid = real_uid; + this.dataset.uid = real_uid; + + vcal_objects.get(this.uid)?.register(this); + + /* We DON'T have a redraw here in the general case, since the + HTML rendered server-side should be fine enough for us. + Those that need a direct rerendering (such as the edit tabs) + should take care of that some other way */ + } + + connectedCallback() { + let uid = this.dataset.uid + if (uid) { + let v = vcal_objects.get(uid) + if (v) this.redraw(v); + } + } + + abstract redraw(data: VEvent): void + +} -- 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/vevent.ts | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'static/ts/components/vevent.ts') diff --git a/static/ts/components/vevent.ts b/static/ts/components/vevent.ts index 7487cbb6..1d400e1e 100644 --- a/static/ts/components/vevent.ts +++ b/static/ts/components/vevent.ts @@ -1,18 +1,34 @@ +/** + * Root component for all events which content is closely linked to a `VEvent` object + * + * Lacks an accompaning tag, and shouldn't be directly instanciated. + * + * Note that many of these assume that their initial children are + * configured specifically, that is however not completely documented. + * + * @category Web Components + * @mergeTarget components + * @module + */ + export { ComponentVEvent } import { vcal_objects } from '../globals' import { VEvent } from '../vevent' -/* Root component for all events which content is closely linked to a -@code{VEvent} object - -Lacks an accompaning tag, and shouldn't be directly instanciated. -*/ abstract class ComponentVEvent extends HTMLElement { template?: HTMLTemplateElement uid: string + /** + * This registeres itself, but doesn't redraw + * We do however redraw in connectedCallback + + * @privateRemarks + * TODO what is done in the default constructor, + * and the default connectedCallback + */ constructor(uid?: string) { super(); this.template = document.getElementById(this.tagName.toLowerCase()) as HTMLTemplateElement | undefined @@ -64,6 +80,7 @@ abstract class ComponentVEvent extends HTMLElement { } } + /** While abstract for this, @emph{must} be overridden for everyone else */ abstract redraw(data: VEvent): void } -- 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/vevent.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'static/ts/components/vevent.ts') diff --git a/static/ts/components/vevent.ts b/static/ts/components/vevent.ts index 1d400e1e..50ff4a30 100644 --- a/static/ts/components/vevent.ts +++ b/static/ts/components/vevent.ts @@ -16,9 +16,23 @@ export { ComponentVEvent } import { vcal_objects } from '../globals' import { VEvent } from '../vevent' +/** + Base class for all Web Components closely linked with VEvents. + + TODO document how templates work. + + TODO document lifecycle, and how objects are fetched from the "global" store. + */ abstract class ComponentVEvent extends HTMLElement { + /** + The template for this event. + + TODO document how this is populate + */ template?: HTMLTemplateElement + + /** The UID of the VEvent we are tracking */ uid: string /** @@ -72,6 +86,11 @@ abstract class ComponentVEvent extends HTMLElement { should take care of that some other way */ } + /** + Called when the component is mounted. + + Redraws the target if the wanted object is available at that time. + */ connectedCallback() { let uid = this.dataset.uid if (uid) { -- cgit v1.2.3