A sorter site for Idolm@ster Characters
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Option IDs, grouped checkbox logic

execfera 9098a3e0 b4e80c54

+19 -8
+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 }