blob: 8cf61d30469c3dfd32bed4b845306bc4984846f0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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 = '↺'
}
}
}
}
|
