mirror of
https://github.com/redphx/better-xcloud.git
synced 2025-08-06 21:28:27 +02:00
Controller customization feature
This commit is contained in:
@@ -5,6 +5,7 @@ import { t } from "@/utils/translation";
|
||||
import type { AllPresets, PresetRecord } from "@/types/presets";
|
||||
import type { BasePresetsTable } from "@/utils/local-db/base-presets-table";
|
||||
import { BxSelectElement } from "@/web-components/bx-select";
|
||||
import { BxEvent } from "@/utils/bx-event";
|
||||
|
||||
export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends NavigationDialog {
|
||||
$container!: HTMLElement;
|
||||
@@ -12,7 +13,8 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
private title: string;
|
||||
protected presetsDb: BasePresetsTable<T>;
|
||||
protected allPresets!: AllPresets<T>;
|
||||
protected currentPresetId: number = 0;
|
||||
protected currentPresetId: number | null = null;
|
||||
protected activatedPresetId: number | null = null;
|
||||
|
||||
private $presets!: HTMLSelectElement;
|
||||
private $header!: HTMLElement;
|
||||
@@ -34,7 +36,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
protected abstract switchPreset(id: number): void;
|
||||
|
||||
protected updateButtonStates() {
|
||||
const isDefaultPreset = this.currentPresetId <= 0;
|
||||
const isDefaultPreset = this.currentPresetId === null || this.currentPresetId <= 0;
|
||||
this.$btnRename.disabled = isDefaultPreset;
|
||||
this.$btnDelete.disabled = isDefaultPreset;
|
||||
this.$defaultNote.classList.toggle('bx-gone', !isDefaultPreset);
|
||||
@@ -42,7 +44,11 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
|
||||
private async renderPresetsList() {
|
||||
this.allPresets = await this.presetsDb.getPresets();
|
||||
renderPresetsList<T>(this.$presets, this.allPresets, this.currentPresetId, { selectedIndicator: true });
|
||||
if (this.currentPresetId === null) {
|
||||
this.currentPresetId = this.allPresets.default[0];
|
||||
}
|
||||
|
||||
renderPresetsList<T>(this.$presets, this.allPresets, this.activatedPresetId, { selectedIndicator: true });
|
||||
}
|
||||
|
||||
private promptNewName(action: string,value='') {
|
||||
@@ -59,10 +65,12 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
};
|
||||
|
||||
private async renderDialog() {
|
||||
this.$presets = CE<HTMLSelectElement>('select', { tabindex: -1 });
|
||||
this.$presets = CE('select', {
|
||||
class: 'bx-full-width',
|
||||
tabindex: -1,
|
||||
});
|
||||
|
||||
const $select = BxSelectElement.create(this.$presets);
|
||||
$select.classList.add('bx-full-width');
|
||||
$select.addEventListener('input', e => {
|
||||
this.switchPreset(parseInt(($select as HTMLSelectElement).value));
|
||||
});
|
||||
@@ -82,7 +90,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
icon: BxIcon.CURSOR_TEXT,
|
||||
style: ButtonStyle.FOCUSABLE,
|
||||
onClick: async () => {
|
||||
const preset = this.allPresets.data[this.currentPresetId];
|
||||
const preset = this.allPresets.data[this.currentPresetId!];
|
||||
|
||||
const newName = this.promptNewName(t('rename'), preset.name);
|
||||
if (!newName) {
|
||||
@@ -107,8 +115,8 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
return;
|
||||
}
|
||||
|
||||
await this.presetsDb.deletePreset(this.currentPresetId);
|
||||
delete this.allPresets.data[this.currentPresetId];
|
||||
await this.presetsDb.deletePreset(this.currentPresetId!);
|
||||
delete this.allPresets.data[this.currentPresetId!];
|
||||
this.currentPresetId = parseInt(Object.keys(this.allPresets.data)[0]);
|
||||
|
||||
await this.refresh();
|
||||
@@ -140,7 +148,7 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
title: t('copy'),
|
||||
style: ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
|
||||
onClick: async (e) => {
|
||||
const preset = this.allPresets.data[this.currentPresetId];
|
||||
const preset = this.allPresets.data[this.currentPresetId!];
|
||||
|
||||
const newName = this.promptNewName(t('copy'), `${preset.name} (2)`);
|
||||
if (!newName) {
|
||||
@@ -176,12 +184,26 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
|
||||
|
||||
async refresh() {
|
||||
await this.renderPresetsList();
|
||||
this.switchPreset(this.currentPresetId);
|
||||
this.$presets.value = this.currentPresetId!.toString();
|
||||
BxEvent.dispatch(this.$presets, 'input', { manualTrigger: true });
|
||||
}
|
||||
|
||||
async onBeforeMount(configs:{ id?: number }={}) {
|
||||
if (configs?.id) {
|
||||
this.currentPresetId = configs.id;
|
||||
await this.renderPresetsList();
|
||||
|
||||
let valid = false;
|
||||
if (typeof configs?.id === 'number') {
|
||||
if (configs.id in this.allPresets.data) {
|
||||
this.currentPresetId = configs.id;
|
||||
this.activatedPresetId = configs.id;
|
||||
valid = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Invalid selected ID => get default ID;
|
||||
if (!valid) {
|
||||
this.currentPresetId = this.allPresets.default[0];
|
||||
this.activatedPresetId = null;
|
||||
}
|
||||
|
||||
// Select first preset
|
||||
|
Reference in New Issue
Block a user