A sorter site for Idolm@ster Characters
Option IDs, grouped checkbox logic
+19
-8
+19
-8
src/main.js
+19
-8
src/main.js
···
1
1
function init() {
2
2
const optList = document.querySelector('.options');
3
-
const optInsert = (name, tooltip = '', checked = true, disabled = false) => {
4
-
return `<div><label title="${tooltip}"><input type="checkbox" ${checked?'checked':''} ${disabled?'disabled':''}> ${name}</label></div>`;
3
+
const optInsert = (name, id, tooltip = '', checked = true, disabled = false) => {
4
+
return `<div><label title="${tooltip}"><input id="cb-${id}" type="checkbox" ${checked?'checked':''} ${disabled?'disabled':''}> ${name}</label></div>`;
5
5
};
6
-
const optInsertLarge = (name, tooltip = '', checked = true) => {
7
-
return `<div class="large option"><label title="${tooltip}"><input type="checkbox" ${checked?'checked':''}> ${name}</label></div>`;
6
+
const optInsertLarge = (name, id, tooltip = '', checked = true) => {
7
+
return `<div class="large option"><label title="${tooltip}"><input id="cbgroup-${id}" type="checkbox" ${checked?'checked':''}> ${name}</label></div>`;
8
8
};
9
9
10
10
options.forEach(opt => {
11
11
if ('sub' in opt) {
12
-
optList.insertAdjacentHTML('beforeend', optInsertLarge(opt.name, opt.tooltip, opt.checked));
13
-
opt.sub.forEach(subopt => {
14
-
optList.insertAdjacentHTML('beforeend', optInsert(subopt.name, subopt.tooltip, subopt.checked, opt.checked === false));
12
+
optList.insertAdjacentHTML('beforeend', optInsertLarge(opt.name, opt.key, opt.tooltip, opt.checked));
13
+
opt.sub.forEach((subopt, subindex) => {
14
+
optList.insertAdjacentHTML('beforeend', optInsert(subopt.name, `${opt.key}-${subindex}`, subopt.tooltip, subopt.checked, opt.checked === false));
15
15
});
16
16
optList.insertAdjacentHTML('beforeend', '<hr>');
17
+
18
+
const groupbox = document.querySelector(`#cbgroup-${opt.key}`);
19
+
20
+
groupbox.parentElement.addEventListener('click', () => {
21
+
let i = 0;
22
+
while (i < opt.sub.length) {
23
+
document.getElementById(`cb-${opt.key}-${i}`).disabled = !groupbox.checked;
24
+
if (groupbox.checked) { document.getElementById(`cb-${opt.key}-${i}`).checked = true; }
25
+
i++;
26
+
}
27
+
});
17
28
} else {
18
-
optList.insertAdjacentHTML('beforeend', optInsert(opt.name, opt.tooltip, opt.checked));
29
+
optList.insertAdjacentHTML('beforeend', optInsert(opt.name, opt.key, opt.tooltip, opt.checked));
19
30
}
20
31
});
21
32
}