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-block.ts | 99 ++++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 static/ts/components/vevent-block.ts (limited to 'static/ts/components/vevent-block.ts') diff --git a/static/ts/components/vevent-block.ts b/static/ts/components/vevent-block.ts new file mode 100644 index 00000000..9bbb8e7e --- /dev/null +++ b/static/ts/components/vevent-block.ts @@ -0,0 +1,99 @@ +export { ComponentBlock } + +import { ComponentVEvent } from './vevent' +import { VEvent } from '../vevent' +import { parseDate, to_local } from '../lib' + + +/* + + A grahpical block in the week view. +*/ +class ComponentBlock extends ComponentVEvent { + constructor(uid?: string) { + super(uid); + + if (!this.template) { + throw 'vevent-block template required'; + } + + this.addEventListener('click', () => { + let uid = this.uid + /* TODO is it better to find the popup through a query selector, or + by looking through all registered components of a VEvent? */ + let popup = document.querySelector(`popup-element[data-uid="${uid}"]`) + if (popup === null) throw new Error('no popup for uid ' + uid); + popup.toggleAttribute('visible'); + }); + } + + redraw(data: VEvent) { + let body = (this.template!.content.cloneNode(true) as DocumentFragment).firstElementChild!; + + for (let el of body.querySelectorAll('[data-property]')) { + if (!(el instanceof HTMLElement)) continue; + let p = el.dataset.property!; + let d, fmt; + if ((d = data.getProperty(p))) { + if ((fmt = el.dataset.fmt)) { + el.textContent = d.format(fmt); + } else { + el.textContent = d; + } + } else switch (p.toLowerCase()) { + /* We lack that property, but might want to set a default here */ + case 'summary': + el.textContent = 'Ny händelse' + break; + } + } + + this.replaceChildren(body); + + /* -------------------------------------------------- */ + + if (window.VIEW === 'week') { + let p; + if ((p = data.getProperty('dtstart'))) { + let c = this.closest('.event-container') as HTMLElement + let start = parseDate(c.dataset.start!).getTime() + let end = parseDate(c.dataset.end!).getTime(); + // console.log(p); + let pp = to_local(p).getTime() + let result = 100 * (Math.min(end, Math.max(start, pp)) - start) / (end - start) + "%" + if (c.classList.contains('longevents')) { + this.style.left = result + } else { + this.style.top = result + } + // console.log('dtstart', p); + } + if ((p = data.getProperty('dtend'))) { + // console.log('dtend', p); + let c = this.closest('.event-container') as HTMLElement + let start = parseDate(c.dataset.start!).getTime() + let end = parseDate(c.dataset.end!).getTime(); + let pp = to_local(p).getTime() + let result = 100 - (100 * (Math.min(end, Math.max(start, pp)) - start) / (end - start)) + "%" + if (c.classList.contains('longevents')) { + this.style.width = 'unset'; + this.style.right = result; + } else { + this.style.height = 'unset'; + this.style.bottom = result; + } + } + } + + if (data.calendar) { + this.dataset.calendar = data.calendar; + } + + if (data.getProperty('rrule') !== undefined) { + let rep = this.getElementsByClassName('repeating') + if (rep.length !== 0) { + (rep[0] as HTMLElement).innerText = '↺' + } + } + } +} -- 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-block.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'static/ts/components/vevent-block.ts') diff --git a/static/ts/components/vevent-block.ts b/static/ts/components/vevent-block.ts index 9bbb8e7e..374cf103 100644 --- a/static/ts/components/vevent-block.ts +++ b/static/ts/components/vevent-block.ts @@ -1,3 +1,14 @@ +/** + * `` + * + * A block in our graphical view. + * + * Unique in that it works quite differently between the week and month view. + * + * @category Web Components + * @mergeTarget components + * @module + */ export { ComponentBlock } import { ComponentVEvent } from './vevent' -- 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-block.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'static/ts/components/vevent-block.ts') diff --git a/static/ts/components/vevent-block.ts b/static/ts/components/vevent-block.ts index 374cf103..90460740 100644 --- a/static/ts/components/vevent-block.ts +++ b/static/ts/components/vevent-block.ts @@ -16,10 +16,16 @@ import { VEvent } from '../vevent' import { parseDate, to_local } from '../lib' -/* +/** + A graphical block in the inline view. - A grahpical block in the week view. -*/ + The back-end links what should become these to elements in the sidebar + containing extra info, jumping between them using fragment links. + That functionality is removed when we replace the non-js fallback children of + these elements, but we instead link it to a + {@linkcode components/popup-element.PopupElement} + containing the detailed information, along with editing controls and more. + */ class ComponentBlock extends ComponentVEvent { constructor(uid?: string) { super(uid); -- cgit v1.2.3