Skip to content

Commit b4d7c8f

Browse files
kleimajkleimaj
committed
adds window refresh function, prettier config
1 parent f5b67ac commit b4d7c8f

File tree

2 files changed

+127
-104
lines changed

2 files changed

+127
-104
lines changed

‎.prettierrc.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// .prettierrc.js
2+
3+
module.exports = {
4+
bracketSpacing: true,
5+
singleQuote: true,
6+
trailingComma: 'all',
7+
};

‎js/multiselect.js

+120-104
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,129 @@
1-
const updateContainer = (container,inner, selected, opt) => {
2-
if (selected.length > 0) {
3-
container.value = selected.join(',');
4-
inner.innerText = selected.join(', ');
5-
} else {
6-
container.value = "";
7-
inner.innerText = opt[0].innerText;
8-
}
9-
// container.dispatchEvent(new Event('change', { 'bubbles': true }));
10-
// container.dispatchEvent(document.createEvent('HTMLEvents').initEvent('change', {bubbles: true, cancelable: false}))
11-
// console.log(container)
12-
container.dispatchEvent(new window.Event('change', {bubbles: true}));
13-
}
1+
const updateContainer = (container, inner, selected, opt) => {
2+
if (selected.length > 0) {
3+
container.value = selected.join(',');
4+
inner.innerText = selected.join(', ');
5+
} else {
6+
container.value = '';
7+
inner.innerText = opt[0].innerText;
8+
}
9+
// container.dispatchEvent(new Event('change', { 'bubbles': true }));
10+
// container.dispatchEvent(document.createEvent('HTMLEvents').initEvent('change', {bubbles: true, cancelable: false}))
11+
// console.log(container)
12+
container.dispatchEvent(new window.Event('change', { bubbles: true }));
13+
};
1414
const map = {};
1515
const multiSelect = () => {
16-
document.querySelectorAll('.multi').forEach((el, idx) => {
17-
// stores values of dropdown
18-
map[idx] = [];
19-
// array of options
20-
const { options: opt } = el;
21-
// create container
22-
const container = document.createElement('div');
23-
// carry over classes
24-
el.classList.forEach(className => {
25-
container.classList.add(className);
26-
})
27-
// carry over ids if exist
28-
// container.id = el.id;
29-
el.id ? container.id = el.id : '';
30-
// carry over names
31-
el.getAttribute('name') ? container.setAttribute('name', el.getAttribute('name')) : '';
32-
el.getAttribute('onchange') ? container.setAttribute('onchange', el.getAttribute('onchange')) : '';
33-
// container.setAttribute('name', el.getAttribute('name') || '');
34-
// container.classList.add('multi')
16+
document.querySelectorAll('.multi').forEach((el, idx) => {
17+
// if (!el.getAttribute('data-multiselect-initialized')) {
18+
// stores values of dropdown
19+
map[idx] = [];
20+
// array of options
21+
const { options: opt } = el;
22+
// create container
23+
const container = document.createElement('div');
24+
// carry over classes
25+
el.classList.forEach((className) => {
26+
container.classList.add(className);
27+
});
28+
29+
// Add data-multiselect-initialized attribute
30+
el.setAttribute('data-multiselect-initialized', true);
31+
// carry over ids if exist
32+
// container.id = el.id;
33+
el.id ? (container.id = el.id) : '';
34+
// carry over names
35+
el.getAttribute('name')
36+
? container.setAttribute('name', el.getAttribute('name'))
37+
: '';
38+
el.getAttribute('onchange')
39+
? container.setAttribute('onchange', el.getAttribute('onchange'))
40+
: '';
41+
// container.setAttribute('name', el.getAttribute('name') || '');
42+
// container.classList.add('multi')
3543

36-
// create display
37-
const display = document.createElement('button');
38-
display.classList.add('multi__display');
44+
// create display
45+
const display = document.createElement('button');
46+
display.classList.add('multi__display');
3947

40-
// create inner (displays the values)
41-
const inner = document.createElement('div');
42-
inner.classList.add('multi__inner');
48+
// create inner (displays the values)
49+
const inner = document.createElement('div');
50+
inner.classList.add('multi__inner');
4351

44-
// set innerText to default value
45-
// display.innerText = opt[0].innerText
46-
inner.innerText = opt[0].innerText
47-
display.value = ""
48-
// append display to container
49-
container.appendChild(display);
50-
display.appendChild(inner);
52+
// set innerText to default value
53+
// display.innerText = opt[0].innerText
54+
inner.innerText = opt[0].innerText;
55+
display.value = '';
56+
// append display to container
57+
container.appendChild(display);
58+
display.appendChild(inner);
5159

52-
// replace new select element with new container
53-
el.parentNode.replaceChild(container, el);
60+
// replace new select element with new container
61+
el.parentNode.replaceChild(container, el);
5462

55-
// create dropdown
56-
const dropdown = document.createElement('div');
57-
dropdown.classList.add('multi__dropdown')
58-
// create ul
59-
const list = document.createElement('ul');
60-
dropdown.classList.add('multi--hidden');
61-
// iterate over options, skip first (placeholder)
62-
for (let i = 1; i < opt.length; i++) {
63-
const li = document.createElement('li');
64-
li.classList.add('multi__li-item');
65-
// ACCESSIBILITY
66-
// const a = document.createElement('a');
67-
// a.classList.add('item-anchor');
68-
// a.setAttribute('role','option');
69-
// a.setAttribute('tabindex','0');
70-
// a.innerText=opt[i].innerText
71-
li.innerText=opt[i].innerText;
72-
li.addEventListener('click', e => {
73-
e.stopPropagation();
74-
if (map[idx].includes(e.target.innerText)) {
75-
map[idx].splice(map[idx].indexOf(e.target.innerText), 1);
76-
e.target.classList.remove('multi__li-item--selected');
77-
}else {
78-
map[idx].push(e.target.innerText);
79-
e.target.classList.add('multi__li-item--selected');
80-
}
81-
// e.target.parentElement.removeChild(e.target);
82-
updateContainer(container, inner, map[idx], opt);
83-
})
84-
// li.appendChild(a);
85-
list.appendChild(li);
63+
// create dropdown
64+
const dropdown = document.createElement('div');
65+
dropdown.classList.add('multi__dropdown');
66+
// create ul
67+
const list = document.createElement('ul');
68+
dropdown.classList.add('multi--hidden');
69+
// iterate over options, skip first (placeholder)
70+
for (let i = 1; i < opt.length; i++) {
71+
const li = document.createElement('li');
72+
li.classList.add('multi__li-item');
73+
// ACCESSIBILITY
74+
// const a = document.createElement('a');
75+
// a.classList.add('item-anchor');
76+
// a.setAttribute('role','option');
77+
// a.setAttribute('tabindex','0');
78+
// a.innerText=opt[i].innerText
79+
li.innerText = opt[i].innerText;
80+
li.addEventListener('click', (e) => {
81+
e.stopPropagation();
82+
if (map[idx].includes(e.target.innerText)) {
83+
map[idx].splice(map[idx].indexOf(e.target.innerText), 1);
84+
e.target.classList.remove('multi__li-item--selected');
85+
} else {
86+
map[idx].push(e.target.innerText);
87+
e.target.classList.add('multi__li-item--selected');
8688
}
87-
// add event listener to container to show / hide dropdown
88-
container.addEventListener('click', e => {
89-
e.stopPropagation();
90-
display.classList.toggle('multi__dropdown--toggle');
91-
dropdown.classList.toggle('multi--hidden');
92-
})
93-
// append dropdown to container
94-
container.appendChild(dropdown)
95-
// append ul to dropdown
96-
dropdown.appendChild(list);
97-
})
98-
// add event listener to window
99-
document.addEventListener('click', e => {
100-
document.querySelectorAll('.multi__display').forEach((display) => {
101-
display.classList.remove('multi__dropdown--toggle');
102-
})
89+
// e.target.parentElement.removeChild(e.target);
90+
updateContainer(container, inner, map[idx], opt);
91+
});
92+
// li.appendChild(a);
93+
list.appendChild(li);
94+
}
95+
// add event listener to container to show / hide dropdown
96+
container.addEventListener('click', (e) => {
97+
e.stopPropagation();
98+
display.classList.toggle('multi__dropdown--toggle');
99+
dropdown.classList.toggle('multi--hidden');
100+
});
101+
// append dropdown to container
102+
container.appendChild(dropdown);
103+
// append ul to dropdown
104+
dropdown.appendChild(list);
105+
});
106+
// add event listener to window
107+
document.addEventListener('click', (e) => {
108+
document.querySelectorAll('.multi__display').forEach((display) => {
109+
display.classList.remove('multi__dropdown--toggle');
110+
});
111+
112+
document.querySelectorAll('.multi__dropdown').forEach((dropdown) => {
113+
dropdown.classList.add('multi--hidden');
114+
});
115+
});
116+
// }
117+
};
118+
// // https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery
119+
// document.addEventListener('DOMContentLoaded', function (event) {
120+
// //do work
121+
// multiSelect();
122+
// });
103123

104-
document.querySelectorAll('.multi__dropdown').forEach((dropdown) => {
105-
dropdown.classList.add('multi--hidden');
106-
})
107-
})
108-
}
109-
// https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery
110-
document.addEventListener("DOMContentLoaded", function(event) {
111-
//do work
112-
multiSelect()
113-
});
124+
// Refresh Method
125+
window.multiSelect = {
126+
refresh() {
127+
multiSelect();
128+
},
129+
};

0 commit comments

Comments
 (0)