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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
/*
bind (event_component, field_to_bind)
*/
/* vcalendar element */
function bind_recur(el, e) {
/* todo bind default slots of rrule */
let p = el.properties.get_callback_list('rrule');
// let rrule = el.rrule;
/* add listeners to bind-rr tags */
for (let rr of e.querySelectorAll('.bind-rr')) {
/* TODO handle byday */
if (rr.classList.contains('input-list')) {
rr.addEventListener('input', function () {
let name = rr.attributes.name.value;
el.properties.rrule[name] = this.get_value();
});
} else if (rr.tagName === 'input' || rr.classList.contains('date-time')) {
rr.addEventListener('input', function () {
console.log(this);
el.properties.rrule[rr.name] = this.value;
});
} else if (rr.tagName === 'select') {
rr.addEventListener('change', function () {
let opt = this.options[this.selectedIndex];
let v = opt.value;
// console.log(v);
el.properties.rrule[rr.name] = v;
});
}
}
p.push([e, function (s, v) {
/* v is an rrule object */
for (let f of v.fields) {
let input_field = s.querySelector(`[name=${f}]`);
switch (input_field.tagName) {
case 'input':
input_field.value = v;
break;
case 'select':
/* TODO */
console.log("Implement me!");
break;
default:
if (input_field.classList.contains('date-time')) {
let date = input_field.querySelector('input[type=date]');
let time = input_field.querySelector('input[type=time]');
} else if (input_field.classList.contains('input-list')) {
} else {
console.log(input_field);
throw Error();
}
}
}
}]);
}
function bind_edit(el, e) {
let p = el.properties.get_callback_list(e.dataset.property);
e.addEventListener('input', function () {
el.properties[e.dataset.property] = this.value;
});
let f;
switch (e.tagName) {
case 'input':
switch (e.type) {
case 'time': f = (s, v) => s.value = v.format("~H:~M"); break;
case 'date': f = (s, v) => s.value = v.format("~Y-~m-~d"); break;
// TODO remaining types cases
default: f = (s, v) => s.value = v;
}
p.push([e, f])
break;
case 'textarea':
f = (s, v) => s.innerHTML = v;
p.push([e, f])
break;
default:
alert("How did you get here??? " + e.tagName)
break;
}
}
function bind_view(el, e) {
let f = (s, v) => s.innerHTML = v.format(s.dataset && s.dataset.fmt);
el.properties.get_callback_list(e.dataset.property).push([e, f]);
}
function bind_wholeday(el, e) {
let popup = popup_from_event(el);
let wholeday = popup.querySelector("input[name='wholeday']");
wholeday.addEventListener('click', function (event) {
for (let f of popup.querySelectorAll("input[type='time']")) {
f.disabled = wholeday.checked;
}
for (let f of ['dtstart', 'dtend']) {
let param = el.properties[f];
if (! param) continue; /* dtend optional */
let d = param.value;
if (wholeday.checked) {
param.type = 'date';
} else {
param.type = 'date-time';
}
d.isWholeDay = wholeday.checked;
el.properties[f] = d;
}
});
}
/* used for dtstart and dtend input boxes
init_date_time MUST be called beforehand
*/
function bind_date_time(el, e) {
e.addEventListener('input', function () {
let dt = el.properties[e.name].value;
if (e.value == '') return;
let y, m, d, h, s;
switch (this.type) {
case 'date':
[y,m,d] = this.value.split('-')
dt.setYear(Number(y)/* - 1900 */);
dt.setMonth(Number(m) - 1);
dt.setDate(d);
break;
case 'time':
[h,m,s] = this.value.split(':')
dt.setHours(Number(h));
dt.setMinutes(Number(m));
dt.setSeconds(0);
break;
default:
console.log("How did you get here??? ", e);
}
el.properties[e.name] = dt;
});
el.properties.get_callback_list(e.name).push(
[e, (s, v) => s.value = v.format("~Y-~m-~dT~H:~M")]);
}
|
