Controller customization feature

This commit is contained in:
redphx
2024-12-22 17:17:03 +07:00
parent 8ef5a95c88
commit 7b60ba3a3e
89 changed files with 3286 additions and 1188 deletions

View File

@@ -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