- commit
- 204638fdb8e61aad71cda8430030d7ebcb3a2369
- parent
- a60f29fefe065ed50220a788d09250aa55d35f98
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2021-05-28 10:47
shortcut: create elements from HTML
Diffstat
| M | select.js | 43 | +++++++++++++++++-------------------------- |
1 files changed, 17 insertions, 26 deletions
diff --git a/select.js b/select.js
@@ -19,6 +19,12 @@ var randomString = function(length) {
19 19 return result.join('');
20 20 };
21 21
-1 22 var create = function(html) {
-1 23 var div = document.createElement('div');
-1 24 div.innerHTML = html;
-1 25 return div.children[0];
-1 26 };
-1 27
22 28 export class Select {
23 29 constructor(id, original) {
24 30 this.id = id;
@@ -32,17 +38,13 @@ export class Select {
32 38 }
33 39
34 40 createElements() {
35 -1 this.wrapper = document.createElement('div');
36 -1 this.input = document.createElement('input');
37 -1 this.dropdown = document.createElement('ul');
38 -1
39 -1 this.wrapper.className = 'select';
40 -1 this.dropdown.className = 'select__dropdown';
-1 41 this.wrapper = create('<div class="select" role="combobox" aria-expanded="false" aria-has-popup="listbox">');
-1 42 this.input = create('<input aria-autocomplete="list" autocomplete="off">');
-1 43 this.dropdown = create('<ul class="select__dropdown" role="listbox" tabindex="-1">');
41 44
42 45 if (this.original.multiple) {
43 -1 var inputWrapper = document.createElement('div');
44 -1 this.values = document.createElement('ul');
45 -1 inputWrapper.className = 'select__input';
-1 46 var inputWrapper = create('<div class="select__input">');
-1 47 this.values = create('<ul>')
46 48 inputWrapper.append(this.values);
47 49 inputWrapper.append(this.input);
48 50 this.wrapper.append(inputWrapper);
@@ -52,16 +54,8 @@ export class Select {
52 54
53 55 this.wrapper.append(this.dropdown);
54 56
55 -1 this.wrapper.setAttribute('role', 'combobox');
56 -1 this.wrapper.setAttribute('aria-expanded', 'false');
57 -1 this.wrapper.setAttribute('aria-has-popup', 'listbox');
58 -1 this.input.setAttribute('aria-autocomplete', 'list');
59 -1 this.dropdown.setAttribute('role', 'listbox');
60 -1 // this.dropdown.setAttribute('aria-labelledby', 'TODO');
61 -1
62 -1 this.input.autocomplete = 'off';
63 57 this.input.disabled = this.original.disabled;
64 -1 this.dropdown.tabIndex = -1;
-1 58 // this.dropdown.setAttribute('aria-labelledby', 'TODO');
65 59
66 60 this.input.onkeydown = this.onkeydown.bind(this);
67 61 this.input.oninput = this.oninput.bind(this);
@@ -106,7 +100,7 @@ export class Select {
106 100 this.values.innerHTML = '';
107 101 Array.from(this.original.options).forEach((op, i) => {
108 102 if (op.selected && op.label) {
109 -1 var li = document.createElement('li');
-1 103 var li = create('<li>');
110 104 li.textContent = op.label;
111 105 li.onclick = () => {
112 106 this.original.options[i].selected = false;
@@ -124,10 +118,9 @@ export class Select {
124 118 }
125 119
126 120 createOption(op, i) {
127 -1 var li = document.createElement('li');
-1 121 var li = create('<li role="option">');
128 122 li.id = this.id + '_option_' + i;
129 123 li.textContent = op.label;
130 -1 li.setAttribute('role', 'option');
131 124 if (op.disabled) {
132 125 li.setAttribute('aria-disabled', 'true');
133 126 } else {
@@ -152,12 +145,10 @@ export class Select {
152 145 }
153 146 i += 1;
154 147 } else {
155 -1 var group = document.createElement('li');
156 -1 var label = document.createElement('strong');
157 -1 var ul = document.createElement('ul');
158 -1 group.setAttribute('role', 'group');
-1 148 var group = create('<li role="group">');
-1 149 var label = create('<strong>');
-1 150 var ul = create('<ul role="none">');
159 151 label.textContent = child.label;
160 -1 ul.setAttribute('role', 'none');
161 152 group.append(label);
162 153 group.append(ul);
163 154 Array.from(child.children).forEach(c => {