Skip to content

Commit

Permalink
select-improver.js - code cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
adelikat committed Sep 2, 2023
1 parent 1245e58 commit 5a30bbd
Showing 1 changed file with 96 additions and 134 deletions.
230 changes: 96 additions & 134 deletions TASVideos/wwwroot/js/select-improver.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `
Expand All @@ -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');
}
});
}
Expand Down

0 comments on commit 5a30bbd

Please sign in to comment.