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

Reduce the amount of event listeners in NumberStepper

Browse Source
This commit is contained in:
redphx 2024-10-29 20:11:54 +07:00
parent 38211168e9
commit 4217b89194
1 changed files with 61 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/utils/setting-element.ts
View File

@ -25,9 +25,9 @@ export interface BxSelectSettingElement extends HTMLSelectElement, BxBaseSetting
export class SettingElement {
static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any): BxSelectSettingElement {
const $control = CE<BxSelectSettingElement>('select', {
// title: setting.label,
tabindex: 0,
});
// title: setting.label,
tabindex: 0,
});
let $parent: HTMLElement;
if (setting.optionsGroup) {
@ -64,10 +64,10 @@ export class SettingElement {
static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}): BxSelectSettingElement {
const $control = CE<BxSelectSettingElement>('select', {
// title: setting.label,
multiple: true,
tabindex: 0,
});
// title: setting.label,
multiple: true,
tabindex: 0,
});
if (params && params.size) {
$control.setAttribute('size', params.size.toString());
@ -164,6 +164,15 @@ export class SettingElement {
const MAX = options.reverse ? -setting.min! : setting.max!;
const STEPS = Math.max(setting.steps || 1, 1);
let intervalId: number | null;
let isHolding = false;
const clearIntervalId = () => {
console.log('clearIntervalId');
intervalId && clearInterval(intervalId);
intervalId = null;
}
const renderTextValue = (value: any) => {
value = parseInt(value as string);
@ -182,6 +191,10 @@ export class SettingElement {
const updateButtonsVisibility = () => {
$btnDec.classList.toggle('bx-inactive', controlValue === MIN);
$btnInc.classList.toggle('bx-inactive', controlValue === MAX);
if (controlValue === MIN || controlValue === MAX) {
clearIntervalId();
}
}
const $wrapper = CE<BxHtmlSettingElement>('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
@ -212,7 +225,7 @@ export class SettingElement {
}
$range = CE<HTMLInputElement>('input', {
id: `bx_setting_${key}`,
id: `bx_inp_setting_${key}`,
type: 'range',
min: MIN,
max: MAX,
@ -273,18 +286,8 @@ export class SettingElement {
updateButtonsVisibility();
let interval: number;
let isHolding = false;
const onClick = (e: Event) => {
if (isHolding) {
e.preventDefault();
isHolding = false;
return;
}
const $btn = e.target as HTMLElement;
const buttonPressed = (e: Event, $btn: HTMLElement) => {
console.log('changeValue');
let value = parseInt(controlValue);
const btnType = $btn.dataset.type;
@ -300,27 +303,45 @@ export class SettingElement {
$text.textContent = renderTextValue(value);
$range && ($range.value = value.toString());
isHolding = false;
!(e as any).ignoreOnChange && onChange && onChange(e, value);
}
const onMouseDown = (e: PointerEvent) => {
e.preventDefault();
isHolding = true;
const args = arguments;
interval && clearInterval(interval);
interval = window.setInterval(() => {
e.target && BxEvent.dispatch(e.target as HTMLElement, 'click', {
arguments: args,
});
}, 200);
onChange && onChange(e, value);
};
const onMouseUp = (e: PointerEvent) => {
const onClick = (e: Event) => {
e.preventDefault();
if (isHolding) {
return;
}
console.log('click');
const $btn = (e.target as HTMLElement).closest('button') as HTMLElement;
$btn && buttonPressed(e, $btn);
clearIntervalId();
isHolding = false;
};
const onPointerDown = (e: PointerEvent) => {
console.log('down');
clearIntervalId();
const $btn = (e.target as HTMLElement).closest('button') as HTMLElement;
if (!$btn) {
return;
}
isHolding = true;
e.preventDefault();
interval && clearInterval(interval);
intervalId = window.setInterval((e: Event) => {
buttonPressed(e, $btn);
}, 200);
window.addEventListener('pointerup', onPointerUp, {once: true});
window.addEventListener('pointercancel', onPointerUp, {once: true});
};
const onPointerUp = (e: PointerEvent) => {
clearIntervalId();
isHolding = false;
};
@ -332,16 +353,9 @@ export class SettingElement {
$range.value = options.reverse ? -value : value;
};
$btnDec.addEventListener('click', onClick);
$btnDec.addEventListener('pointerdown', onMouseDown);
$btnDec.addEventListener('pointerup', onMouseUp);
$btnDec.addEventListener('contextmenu', onContextMenu);
$btnInc.addEventListener('click', onClick);
$btnInc.addEventListener('pointerdown', onMouseDown);
$btnInc.addEventListener('pointerup', onMouseUp);
$btnInc.addEventListener('contextmenu', onContextMenu);
$wrapper.addEventListener('click', onClick);
$wrapper.addEventListener('pointerdown', onPointerDown);
$wrapper.addEventListener('contextmenu', onContextMenu);
setNearby($wrapper, {
focus: $range || $btnInc,
})