diff options
Diffstat (limited to 'static/components/vevent-block.ts')
-rw-r--r-- | static/components/vevent-block.ts | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/static/components/vevent-block.ts b/static/components/vevent-block.ts new file mode 100644 index 00000000..8cf61d30 --- /dev/null +++ b/static/components/vevent-block.ts @@ -0,0 +1,99 @@ +export { ComponentBlock } + +import { ComponentVEvent } from './vevent' +import { VEvent } from '../vevent' +import { parseDate, to_local } from '../lib' + + +/* <vevent-block /> + + 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 && rep.length !== 0) { + (rep[0] as HTMLElement).innerText = '↺' + } + } + } +} |