/
index.js
62 lines (51 loc) · 1.25 KB
/
index.js
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
require('./index.less');
export default class Toggle extends HTMLElement {
constructor() {
super();
this._model = null;
this._session = null;
this._rerender();
}
set model(m) {
this._model = m;
this._rerender();
}
set session(s) {
this._session = s;
if (!this._session.answer) {
this._session.answer = false;
}
this._rerender();
}
get session() {
return this._session;
}
_rerender() {
let feedback = (function(model) {
if (model && model.feedback) {
return [
"<div class='feedback'>",
model.feedback,
"</div>"
].join('\n');
} else {
return "";
}
}(this._model));
let checked = this._session ? this._session.answer : false;
this.innerHTML = [
'<label class="switch">',
'<input type="checkbox" ', (checked ? 'checked=""' : ''), '>',
'<div class="slider round"></div>',
'</label>',
feedback
].join('\n');
this.getElementsByTagName('input')[0].addEventListener('change', (e) => {
this._session.answer = e.target.checked;
});
}
connectedCallback() {
this.dispatchEvent(new CustomEvent('pie.register', { bubbles: true }));
this._rerender();
}
}