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

Update NumberStepper

Browse Source
This commit is contained in:
redphx 2024-06-22 10:35:45 +07:00
parent 22e7400e06
commit d6a4d1741b
1 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/utils/settings.ts
View File

@ -132,10 +132,12 @@ export class SettingElement {
options.hideSlider = !!options.hideSlider; options.hideSlider = !!options.hideSlider;
let $text: HTMLSpanElement; let $text: HTMLSpanElement;
let $decBtn: HTMLButtonElement; let $btnDec: HTMLButtonElement;
let $incBtn: HTMLButtonElement; let $btnInc: HTMLButtonElement;
let $range: HTMLInputElement; let $range: HTMLInputElement;
let controlValue = value;
const MIN = setting.min!; const MIN = setting.min!;
const MAX = setting.max!; const MAX = setting.max!;
const STEPS = Math.max(setting.steps || 1, 1); const STEPS = Math.max(setting.steps || 1, 1);
@ -155,14 +157,19 @@ export class SettingElement {
return textContent; return textContent;
}; };
const updateButtonsVisibility = () => {
$btnDec.classList.toggle('bx-hidden', controlValue === MIN);
$btnInc.classList.toggle('bx-hidden', controlValue === MAX);
}
const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`}, const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
$decBtn = CE('button', { $btnDec = CE('button', {
'data-type': 'dec', 'data-type': 'dec',
type: 'button', type: 'button',
tabindex: -1, tabindex: -1,
}, '-') as HTMLButtonElement, }, '-') as HTMLButtonElement,
$text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement, $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
$incBtn = CE('button', { $btnInc = CE('button', {
'data-type': 'inc', 'data-type': 'inc',
type: 'button', type: 'button',
tabindex: -1, tabindex: -1,
@ -182,6 +189,9 @@ export class SettingElement {
$range.addEventListener('input', e => { $range.addEventListener('input', e => {
value = parseInt((e.target as HTMLInputElement).value); value = parseInt((e.target as HTMLInputElement).value);
controlValue = value;
updateButtonsVisibility();
$text.textContent = renderTextValue(value); $text.textContent = renderTextValue(value);
!(e as any).ignoreOnChange && onChange && onChange(e, value); !(e as any).ignoreOnChange && onChange && onChange(e, value);
}); });
@ -212,14 +222,16 @@ export class SettingElement {
} }
if (options.disabled) { if (options.disabled) {
$incBtn.disabled = true; $btnInc.disabled = true;
$incBtn.classList.add('bx-hidden'); $btnInc.classList.add('bx-hidden');
$decBtn.disabled = true; $btnDec.disabled = true;
$decBtn.classList.add('bx-hidden'); $btnDec.classList.add('bx-hidden');
return $wrapper; return $wrapper;
} }
updateButtonsVisibility();
let interval: number; let interval: number;
let isHolding = false; let isHolding = false;
@ -231,19 +243,19 @@ export class SettingElement {
return; return;
} }
let value: number; const $btn = e.target as HTMLElement;
if ($range) { let value = parseInt(controlValue);
value = parseInt($range.value);
} else { const btnType = $btn.dataset.type;
value = parseInt($text.textContent!);
}
const btnType = (e.target as HTMLElement).getAttribute('data-type');
if (btnType === 'dec') { if (btnType === 'dec') {
value = Math.max(MIN, value - STEPS); value = Math.max(MIN, value - STEPS);
} else { } else {
value = Math.min(MAX, value + STEPS); value = Math.min(MAX, value + STEPS);
} }
controlValue = value;
updateButtonsVisibility();
$text.textContent = renderTextValue(value); $text.textContent = renderTextValue(value);
$range && ($range.value = value.toString()); $range && ($range.value = value.toString());
@ -277,19 +289,21 @@ export class SettingElement {
// Custom method // Custom method
($wrapper as any).setValue = (value: any) => { ($wrapper as any).setValue = (value: any) => {
controlValue = parseInt(value);
$text.textContent = renderTextValue(value); $text.textContent = renderTextValue(value);
$range && ($range.value = value); $range && ($range.value = value);
}; };
$decBtn.addEventListener('click', onClick); $btnDec.addEventListener('click', onClick);
$decBtn.addEventListener('pointerdown', onMouseDown); $btnDec.addEventListener('pointerdown', onMouseDown);
$decBtn.addEventListener('pointerup', onMouseUp); $btnDec.addEventListener('pointerup', onMouseUp);
$decBtn.addEventListener('contextmenu', onContextMenu); $btnDec.addEventListener('contextmenu', onContextMenu);
$incBtn.addEventListener('click', onClick); $btnInc.addEventListener('click', onClick);
$incBtn.addEventListener('pointerdown', onMouseDown); $btnInc.addEventListener('pointerdown', onMouseDown);
$incBtn.addEventListener('pointerup', onMouseUp); $btnInc.addEventListener('pointerup', onMouseUp);
$incBtn.addEventListener('contextmenu', onContextMenu); $btnInc.addEventListener('contextmenu', onContextMenu);
return $wrapper; return $wrapper;
} }