From 410404cfdd54c083b6609fd52334e02d320145d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Wed, 10 Nov 2021 01:40:22 +0100 Subject: Re-modularize javascript. This moves almost everything out of globals.ts, into sepparate files. Things are still slightly to tightly coupled. But that is worked on. --- static/components/vevent-block.ts | 63 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 static/components/vevent-block.ts (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts new file mode 100644 index 00000000..439ba20e --- /dev/null +++ b/static/components/vevent-block.ts @@ -0,0 +1,63 @@ +export { ComponentBlock } + +import { ComponentVEvent } from './vevent' +import { VEvent } from '../vevent' +import { toggle_popup, find_popup } from '../popup' +import { parseDate, to_local } from '../lib' + + +/* + + A grahpical block in the week view. +*/ +class ComponentBlock extends ComponentVEvent { + constructor(uid?: string) { + super(uid); + + this.addEventListener('click', () => { + let uid = this.uid + let popup = find_popup(uid); + if (popup === null) throw new Error('no popup for uid ' + uid); + toggle_popup(popup); + }); + } + + redraw(data: VEvent) { + super.redraw(data); + + 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; + } + } +} -- cgit v1.2.3 From 7b604002e5dd73f933ef89b37e60ab07d347c44d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 15 Nov 2021 00:43:49 +0100 Subject: Reword popup visible attribute. Now all logic for handling hiding and showing popups are inside the PopupElement class, making it much harder to do stuff incorrectly. It also slowly releases the knot around popup.ts. --- static/components/vevent-block.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index 439ba20e..8c6d11cf 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -56,8 +56,8 @@ class ComponentBlock extends ComponentVEvent { } } - if (data._calendar) { - this.dataset.calendar = data._calendar; + if (data.calendar) { + this.dataset.calendar = data.calendar; } } } -- cgit v1.2.3 From 3bd26b63adf49ec1b3f52897008738f13b864451 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 19 Nov 2021 16:45:06 +0100 Subject: Add basic rrule tab. --- static/components/vevent-block.ts | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index 8c6d11cf..a4aaba24 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -59,5 +59,9 @@ class ComponentBlock extends ComponentVEvent { if (data.calendar) { this.dataset.calendar = data.calendar; } + + if (data.getProperty('rrule') !== undefined) { + (this.getElementsByClassName('repeating')![0] as HTMLElement).innerText = '↺' + } } } -- cgit v1.2.3 From 0cfa00fc43eaf98db8b2461a2d07687b6591cd6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 26 Nov 2021 17:14:30 +0100 Subject: Remove default ComponentVEvent redraw. --- static/components/vevent-block.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index a4aaba24..de9cf748 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -23,7 +23,24 @@ class ComponentBlock extends ComponentVEvent { } redraw(data: VEvent) { - super.redraw(data); + 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; + } + } + } + + this.replaceChildren(body); + + /* -------------------------------------------------- */ let p; if ((p = data.getProperty('dtstart'))) { -- cgit v1.2.3 From 5211cea181bbdf9c5296f09806c3735197bc2042 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 00:13:15 +0100 Subject: Close popup on event creation. --- static/components/vevent-block.ts | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index de9cf748..0aad19b2 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -35,6 +35,11 @@ class ComponentBlock extends ComponentVEvent { } 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; } } -- cgit v1.2.3 From de593cf0d4a6a082f0c42e00be395e0f6cf49e96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 00:16:25 +0100 Subject: Remove popup.ts, migrating all functionality elsewhere. The simple procedures - close_popup - open_popup - toggle_popup - find_popup Were mostly here for legacy. The procedures - popup_from_event - event_from_popup where holdovers from the old way of finding popups, and should be done through the VEvent objects now. close_all_popups was used only once, so the code was moved inline. Finally, moving the last hovered over popup to the top, along with tab switch keybings were restored, and moved to propper places. --- static/components/vevent-block.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index 0aad19b2..6b3e7dec 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -2,7 +2,6 @@ export { ComponentBlock } import { ComponentVEvent } from './vevent' import { VEvent } from '../vevent' -import { toggle_popup, find_popup } from '../popup' import { parseDate, to_local } from '../lib' @@ -16,9 +15,11 @@ class ComponentBlock extends ComponentVEvent { this.addEventListener('click', () => { let uid = this.uid - let popup = find_popup(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); - toggle_popup(popup); + popup.toggleAttribute('visible'); }); } -- cgit v1.2.3 From 1ef01481fa9e70ef688b24ffd7957b97f020bb2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 01:49:11 +0100 Subject: Major move from week to calendar meta-view. Also repairs month view. --- static/components/vevent-block.ts | 61 +++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 28 deletions(-) (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index 6b3e7dec..95c72592 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -48,34 +48,36 @@ class ComponentBlock extends ComponentVEvent { /* -------------------------------------------------- */ - 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 + 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); } - // 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 ((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; + } } } @@ -84,7 +86,10 @@ class ComponentBlock extends ComponentVEvent { } if (data.getProperty('rrule') !== undefined) { - (this.getElementsByClassName('repeating')![0] as HTMLElement).innerText = '↺' + let rep = this.getElementsByClassName('repeating') + if (rep && rep.length !== 0) { + (rep[0] as HTMLElement).innerText = '↺' + } } } } -- cgit v1.2.3 From 3ddbd37ade2e03e4fc3a6f5ba52234bc286fded3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 13 Dec 2021 02:26:36 +0100 Subject: Made VEventComponent template optional. --- static/components/vevent-block.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'static/components/vevent-block.ts') diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts index 95c72592..8cf61d30 100644 --- a/static/components/vevent-block.ts +++ b/static/components/vevent-block.ts @@ -13,6 +13,10 @@ 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 @@ -24,7 +28,7 @@ class ComponentBlock extends ComponentVEvent { } redraw(data: VEvent) { - let body = (this.template.content.cloneNode(true) as DocumentFragment).firstElementChild!; + let body = (this.template!.content.cloneNode(true) as DocumentFragment).firstElementChild!; for (let el of body.querySelectorAll('[data-property]')) { if (!(el instanceof HTMLElement)) continue; -- cgit v1.2.3