marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-08-06 21:28:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add "Controller-friendly UI" option

Browse Source
This commit is contained in:
redphx
2024-07-15 20:54:35 +07:00
parent 66120d6970
commit 394dc68ece
9 changed files with 155 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/web-components/bx-select.ts
View File

@@ -23,20 +23,32 @@ export class BxSelectElement {
let $checkBox: HTMLInputElement;
let $label: HTMLElement;
const $content = CE('div', {},
$checkBox = CE('input', {type: 'checkbox', id: $select.id + '_checkbox'}),
$label = CE('label', {for: $select.id + '_checkbox'}, ''),
);
let $content;
isMultiple && $checkBox.addEventListener('input', e => {
const $option = getOptionAtIndex(visibleIndex);
$option && ($option.selected = (e.target as HTMLInputElement).checked);
if (isMultiple) {
$content = CE('button', {
class: 'bx-select-value bx-focusable',
tabindex: 0,
},
$checkBox = CE('input', {type: 'checkbox'}),
$label = CE('span', {}, ''),
);
$select.dispatchEvent(new Event('input'));
});
$content.addEventListener('click', e => {
$checkBox.click();
});
// Only show checkbox in "multiple" <select>
$checkBox.classList.toggle('bx-gone', !isMultiple);
$checkBox.addEventListener('input', e => {
const $option = getOptionAtIndex(visibleIndex);
$option && ($option.selected = (e.target as HTMLInputElement).checked);
$select.dispatchEvent(new Event('input'));
});
} else {
$content = CE('div', {},
$label = CE('label', {for: $select.id + '_checkbox'}, ''),
);
}
const getOptionAtIndex = (index: number): HTMLOptionElement | undefined => {
return $select.querySelector(`option:nth-of-type(${visibleIndex + 1})`) as HTMLOptionElement;
@@ -51,22 +63,28 @@ export class BxSelectElement {
let content = '';
if ($option) {
content = $option.textContent || '';
if (content && $option.parentElement!.tagName === 'OPTGROUP') {
content = ($option.parentElement as HTMLOptionElement).label + ' ❯ ' + content;
}
}
$label.textContent = content;
// Hide checkbox when the selection is empty
isMultiple && ($checkBox.checked = $option?.selected || false);
$checkBox.classList.toggle('bx-gone', !isMultiple || !content);
if (isMultiple) {
$checkBox.checked = $option?.selected || false;
$checkBox.classList.toggle('bx-gone', !content);
}
const disablePrev = visibleIndex <= 0;
const disableNext = visibleIndex === $select.querySelectorAll('option').length - 1;
$btnPrev.classList.toggle('bx-inactive', disablePrev);
disablePrev && $btnNext.focus();
disablePrev && document.activeElement === $btnPrev && $btnNext.focus();
$btnNext.classList.toggle('bx-inactive', disableNext);
disableNext && $btnPrev.focus();
disableNext && document.activeElement === $btnNext &&$btnPrev.focus();
}
const normalizeIndex = (index: number): number => {