diff --git a/TASVideos/wwwroot/js/select-improver.js b/TASVideos/wwwroot/js/select-improver.js index 79d1a0437..c6da03278 100644 --- a/TASVideos/wwwroot/js/select-improver.js +++ b/TASVideos/wwwroot/js/select-improver.js @@ -1,46 +1,35 @@ function toggleSelectOption(multiSelect, buttons, list, value, dispatchEvent = true) { - { - let element = [...list.querySelectorAll('input')].find(el => el.dataset.value === value); - let option = [...multiSelect.options].find(option => option.value === value); - let button = [...buttons.querySelectorAll('button')].find(button => button.dataset.value === value); - let isSelected = option.selected; - if (isSelected) { - { - option.selected = false; - element.checked = false; - button.classList.add('d-none'); - if (![...multiSelect.options].some(option => option.selected)) { - { - buttons.querySelector('span').classList.remove('d-none'); - } - } - } - } else { - { - option.selected = true; - element.checked = true; - button.classList.remove('d-none'); - buttons.querySelector('span').classList.add('d-none'); - } - } - if ([...multiSelect.options].some(option => !option.selected)) { - { - buttons.querySelector('a').querySelector('i').classList.replace('fa-minus', 'fa-plus'); - buttons.querySelector('a').title = 'Select All'; - } - } else { - { - buttons.querySelector('a').querySelector('i').classList.replace('fa-plus', 'fa-minus'); - buttons.querySelector('a').title = 'Deselect All'; - } - } - if (dispatchEvent) { - { - multiSelect.dispatchEvent(new Event('change')); // somewhat hacky way to support external event listeners - } + const element = [...list.querySelectorAll('input')].find(el => el.dataset.value === value); + const option = [...multiSelect.options].find(o => o.value === value); + const button = [...buttons.querySelectorAll('button')].find(b => b.dataset.value === value); + const isSelected = option.selected; + if (isSelected) { + option.selected = false; + element.checked = false; + button.classList.add('d-none'); + if (![...multiSelect.options].some(o => o.selected)) { + buttons.querySelector('span').classList.remove('d-none'); } + } else { + option.selected = true; + element.checked = true; + button.classList.remove('d-none'); + buttons.querySelector('span').classList.add('d-none'); + } + + if ([...multiSelect.options].some(o => !o.selected)) { + buttons.querySelector('a').querySelector('i').classList.replace('fa-minus', 'fa-plus'); + buttons.querySelector('a').title = 'Select All'; + } else { + buttons.querySelector('a').querySelector('i').classList.replace('fa-plus', 'fa-minus'); + buttons.querySelector('a').title = 'Deselect All'; + } + + if (dispatchEvent) { + multiSelect.dispatchEvent(new Event('change')); // somewhat hacky way to support external event listeners } } + function engageSelectImprover(multiSelectId, maxHeight = '250px') { { let initialHtmlToAdd = ` @@ -65,120 +54,93 @@ function engageSelectImprover(multiSelectId, maxHeight = '250px') { let input = document.getElementById(multiSelectId + '_input'); let anyNotSelected = false; for (var option of multiSelect.options) { - { - let entry = document.createElement('div'); - entry.classList.add('list-group-item', 'list-group-item-action', 'px-1'); - let label = document.createElement('label'); - label.classList.add('form-check-label', 'stretched-link') - let checkbox = document.createElement('input'); - checkbox.type = 'checkbox'; - checkbox.classList.add('form-check-input', 'ms-1', 'me-2'); - if (option.selected) { - { - checkbox.checked = true; - } - } - checkbox.dataset.value = option.value; - checkbox.addEventListener('change', (e) => { { toggleSelectOption(multiSelect, buttons, list, e.currentTarget.dataset.value) } }); - label.appendChild(checkbox) - label.append(option.text); - entry.appendChild(label); - list.appendChild(entry); + let entry = document.createElement('div'); + entry.classList.add('list-group-item', 'list-group-item-action', 'px-1'); + let label = document.createElement('label'); + label.classList.add('form-check-label', 'stretched-link'); + let checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.classList.add('form-check-input', 'ms-1', 'me-2'); + if (option.selected) { + checkbox.checked = true; + } - let button = document.createElement('button'); - button.type = 'button'; - button.classList.add('btn', 'btn-primary', 'btn-sm', 'mb-1', 'me-1'); - button.dataset.value = option.value; - if (option.selected) { - { - buttons.querySelector('span').classList.add('d-none'); - } - } else { - { - button.classList.add('d-none'); - } - } - button.addEventListener('click', (e) => { { toggleSelectOption(multiSelect, buttons, list, e.currentTarget.dataset.value); } }); - let buttonSpanText = document.createElement('span'); - buttonSpanText.innerText = option.text; - button.appendChild(buttonSpanText); - let buttonSpanX = document.createElement('span'); - buttonSpanX.innerText = '✕' - buttonSpanX.classList.add('ps-1'); - button.appendChild(buttonSpanX); + checkbox.dataset.value = option.value; + checkbox.addEventListener('change', (e) => { + toggleSelectOption(multiSelect, buttons, list, e.currentTarget.dataset.value); + }); - buttons.appendChild(button); + label.appendChild(checkbox); + label.append(option.text); + entry.appendChild(label); + list.appendChild(entry); - if (!option.selected) { - { - anyNotSelected = true; - } - } + let button = document.createElement('button'); + button.type = 'button'; + button.classList.add('btn', 'btn-primary', 'btn-sm', 'mb-1', 'me-1'); + button.dataset.value = option.value; + if (option.selected) { + buttons.querySelector('span').classList.add('d-none'); + } else { + button.classList.add('d-none'); + } + + button.addEventListener('click', (e) => { + toggleSelectOption(multiSelect, buttons, list, e.currentTarget.dataset.value); + }); + + let buttonSpanText = document.createElement('span'); + buttonSpanText.innerText = option.text; + button.appendChild(buttonSpanText); + let buttonSpanX = document.createElement('span'); + buttonSpanX.innerText = '✕'; + buttonSpanX.classList.add('ps-1'); + button.appendChild(buttonSpanX); + + buttons.appendChild(button); + + if (!option.selected) { + anyNotSelected = true; } } + let toggleAllIcon = document.createElement('i'); toggleAllIcon.classList.add('fa', 'fa-sm'); toggleAllIcon.classList.add(anyNotSelected ? 'fa-plus' : 'fa-minus'); buttons.querySelector('a').appendChild(toggleAllIcon); buttons.querySelector('a').title = anyNotSelected ? 'Select All' : 'Deselect All'; - buttons.querySelector('a').addEventListener('click', (e) => { - { - let notSelected = [...multiSelect.options].filter(option => !option.selected); - if (notSelected.length === 0) { - { - for (let option of multiSelect.options) { - { - toggleSelectOption(multiSelect, buttons, list, option.value, false); - } - } - } - } else { - { - for (let option of notSelected) { - { - toggleSelectOption(multiSelect, buttons, list, option.value, false); - } - } - } + buttons.querySelector('a').addEventListener('click', () => { + const notSelected = [...multiSelect.options].filter(o => !o.selected); + if (notSelected.length) { + for (let o of notSelected) { + toggleSelectOption(multiSelect, buttons, list, o.value, false); + } + } else { + for (let o of multiSelect.options) { + toggleSelectOption(multiSelect, buttons, list, o.value, false); } - multiSelect.dispatchEvent(new Event('change')); // somewhat hacky way to support external event listeners } + multiSelect.dispatchEvent(new Event('change')); // somewhat hacky way to support external event listeners }); div.addEventListener('click', (e) => { - { - if (e.target.classList.contains('onclick-focusinput')) { - { - input.classList.remove('d-none'); - input.focus(); - } - } + if (e.target.classList.contains('onclick-focusinput')) { + input.classList.remove('d-none'); + input.focus(); } }); - input.addEventListener('input', (e) => { - { - let searchValue = input.value.toLowerCase(); - for (let entry of list.querySelectorAll('label')) { - { - if (entry.innerText.toLowerCase().includes(searchValue)) { - { - entry.parentNode.classList.remove('d-none'); - } - } else { - { - entry.parentNode.classList.add('d-none'); - } - } - } + input.addEventListener('input', () => { + const searchValue = input.value.toLowerCase(); + for (let entry of list.querySelectorAll('label')) { + if (entry.innerText.toLowerCase().includes(searchValue)) { + entry.parentNode.classList.remove('d-none'); + } else { + entry.parentNode.classList.add('d-none'); } } }); - input.addEventListener('focusout', (e) => { - { - if (!input.value) { - { - input.classList.add('d-none'); - } - } + input.addEventListener('focusout', () => { + if (!input.value) { + input.classList.add('d-none'); } }); }