tether 0.2.0

Extremely simple bindings to an OS web view.
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

<title>Task List</title>

<header>
    <h1>//TODO</h1>
    <input type='text' id='newItem' placeholder='New Item...'>
    <button type='submit' onclick='add()'>Add</button>
</header>

<ul id='list'></ul>

<footer>
    <button onclick='clearCompleted()'>Clear Completed</button>
</footer>

<script>
let e = function (el) { return document.createElement(el); };
let list = document.getElementById('list');

window.recv = {
    add: function (text) {
        let entry = e('li');
        let name = e('span');
        let rem = e('button');

        name.textContent = text;
        name.className = 'name';
        name.onclick = function () {
            let i = Array.from(list.children).indexOf(entry);
            window.tether('toggle-complete:' + i);
        };

        rem.textContent = '❌';
        rem.onclick = function () {
            let i = Array.from(list.children).indexOf(entry);
            window.tether('remove:' + i);
        };

        entry.appendChild(name);
        entry.appendChild(rem);
        list.appendChild(entry);
    },
    remove: function (i) {
        list.removeChild(list.children[i]);
    },
    complete: function (i) {
        list.children[i].classList.add('done');
    },
    uncomplete: function (i) {
        list.children[i].classList.remove('done');
    },
};

function add() {
    let input = document.getElementById('newItem');
    window.tether('add:' + input.value);
    input.value = '';
}

function clearCompleted() {
    window.tether('remove-completed:');
}
</script>

<style>
/* Body */

body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Task List */

#list {
    flex-grow: 1;
    padding: 0;
    list-style-type: none;
    margin: 0;
}

li {
    padding: 8px;
    display: flex;
    align-items: center;
}

.name {
    flex-grow: 1;
}

li:nth-child(odd) {
    background-color: #EEE;
}

.done {
    color: darkgray;
    text-decoration: line-through;
}

/* Header + Footer */

header, footer {
    color: white;
    background-color: tomato;
    padding: 8px;
    display: flex;
    align-items: center;
}

h1 {
    margin-right: auto;
}
</style>