aboutsummaryrefslogtreecommitdiff
path: root/static/binders.js
blob: a3742aec83c3eb76e198c01f677753f6ea36d989 (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
/*
  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.textContent = 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.innerText = v.format(s.dataset && s.dataset.fmt);
    el.properties.get_callback_list(e.dataset.property).push([e, f]);
}