chore(client/ts): port options/codeNotes

This commit is contained in:
Elian Doran 2025-01-11 11:11:57 +02:00
parent 552cc2753f
commit 6665a8d97f
No known key found for this signature in database
6 changed files with 54 additions and 23 deletions

View File

@ -1,3 +1,4 @@
import type { OptionMap } from "../../../../../../services/options_interface.js";
import { t } from "../../../../services/i18n.js";
import OptionsWidget from "../options_widget.js";
@ -14,13 +15,16 @@ const TPL = `
</div>`;
export default class CodeAutoReadOnlySizeOptions extends OptionsWidget {
private $autoReadonlySizeCode!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.$autoReadonlySizeCode = this.$widget.find(".auto-readonly-size-code");
this.$autoReadonlySizeCode.on("change", () => this.updateOption("autoReadonlySizeCode", this.$autoReadonlySizeCode.val()));
}
async optionsLoaded(options) {
async optionsLoaded(options: OptionMap) {
this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
}
}

View File

@ -1,6 +1,7 @@
import { t } from "../../../../services/i18n.js";
import OptionsWidget from "../options_widget.js";
import mimeTypesService from "../../../../services/mime_types.js";
import type { OptionMap } from "../../../../../../services/options_interface.js";
const TPL = `
<div class="options-section">
@ -19,9 +20,17 @@ const TPL = `
let idCtr = 1; // global, since this can be shown in multiple dialogs
function groupMimeTypesAlphabetically(ungroupedMimeTypes) {
const result = {};
ungroupedMimeTypes = ungroupedMimeTypes.toSorted((a, b) => a.title > b.title);
interface MimeType {
title: string;
mime: string;
enabled: boolean;
}
type GroupedMimes = Record<string, MimeType[]>;
function groupMimeTypesAlphabetically(ungroupedMimeTypes: MimeType[]) {
const result: GroupedMimes = {};
ungroupedMimeTypes = ungroupedMimeTypes.toSorted((a, b) => a.title.localeCompare(b.title));
for (const mimeType of ungroupedMimeTypes) {
const initial = mimeType.title.charAt(0).toUpperCase();
@ -33,22 +42,16 @@ function groupMimeTypesAlphabetically(ungroupedMimeTypes) {
return result;
}
function buildSelectionForMimeType(mimeType) {
const id = "code-mime-type-" + idCtr++;
return $("<li>")
.append($('<input type="checkbox" class="form-check-input">').attr("id", id).attr("data-mime-type", mimeType.mime).prop("checked", mimeType.enabled))
.on("change", () => this.save())
.append(" &nbsp; ")
.append($("<label>").attr("for", id).text(mimeType.title));
}
export default class CodeMimeTypesOptions extends OptionsWidget {
private $mimeTypes!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.$mimeTypes = this.$widget.find(".options-mime-types");
}
async optionsLoaded(options) {
async optionsLoaded(options: OptionMap) {
this.$mimeTypes.empty();
const ungroupedMimeTypes = mimeTypesService.getMimeTypes();
@ -56,14 +59,16 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
const groupedMimeTypes = groupMimeTypesAlphabetically(ungroupedMimeTypes);
// Plain text is displayed at the top intentionally.
this.$mimeTypes.append(buildSelectionForMimeType.call(this, plainTextMimeType));
if (plainTextMimeType) {
this.$mimeTypes.append(this.#buildSelectionForMimeType(plainTextMimeType));
}
for (const [initial, mimeTypes] of Object.entries(groupedMimeTypes)) {
const $section = $("<section>");
$section.append($("<h5>").text(initial));
for (const mimeType of mimeTypes) {
$section.append(buildSelectionForMimeType.call(this, mimeType));
$section.append(this.#buildSelectionForMimeType(mimeType));
}
this.$mimeTypes.append($section);
@ -71,12 +76,26 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
}
async save() {
const enabledMimeTypes = [];
const enabledMimeTypes: string[] = [];
this.$mimeTypes.find("input:checked").each((i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
this.$mimeTypes.find("input:checked").each((i, el) => {
const mimeType = this.$widget.find(el).attr("data-mime-type");
if (mimeType) {
enabledMimeTypes.push(mimeType);
}
});
await this.updateOption("codeNotesMimeTypes", JSON.stringify(enabledMimeTypes));
mimeTypesService.loadMimeTypes();
}
#buildSelectionForMimeType(mimeType: MimeType) {
const id = "code-mime-type-" + idCtr++;
return $("<li>")
.append($('<input type="checkbox" class="form-check-input">').attr("id", id).attr("data-mime-type", mimeType.mime).prop("checked", mimeType.enabled))
.on("change", () => this.save())
.append(" &nbsp; ")
.append($("<label>").attr("for", id).text(mimeType.title));
}
}

View File

@ -1,5 +1,6 @@
import OptionsWidget from "../options_widget.js";
import { t } from "../../../../services/i18n.js";
import type { OptionMap } from "../../../../../../services/options_interface.js";
const TPL = `
<div class="options-section">
@ -11,13 +12,16 @@ const TPL = `
</div>`;
export default class VimKeyBindingsOptions extends OptionsWidget {
private $vimKeymapEnabled!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.$vimKeymapEnabled = this.$widget.find(".vim-keymap-enabled");
this.$vimKeymapEnabled.on("change", () => this.updateCheckboxOption("vimKeymapEnabled", this.$vimKeymapEnabled));
}
async optionsLoaded(options) {
async optionsLoaded(options: OptionMap) {
this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
}
}

View File

@ -1,5 +1,6 @@
import OptionsWidget from "../options_widget.js";
import { t } from "../../../../services/i18n.js";
import type { OptionMap } from "../../../../../../services/options_interface.js";
const TPL = `
<div class="options-section">
@ -11,13 +12,16 @@ const TPL = `
</div>`;
export default class WrapLinesOptions extends OptionsWidget {
private $codeLineWrapEnabled!: JQuery<HTMLElement>;
doRender() {
this.$widget = $(TPL);
this.$codeLineWrapEnabled = this.$widget.find(".line-wrap-enabled");
this.$codeLineWrapEnabled.on("change", () => this.updateCheckboxOption("codeLineWrapEnabled", this.$codeLineWrapEnabled));
}
async optionsLoaded(options) {
async optionsLoaded(options: OptionMap) {
this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
}
}

View File

@ -13,7 +13,7 @@ export default class OptionsWidget extends NoteContextAwareWidget implements Eve
this.contentSized();
}
async updateOption<T extends OptionNames>(name: T, value: string) {
async updateOption<T extends OptionNames>(name: T, value: string | number | string[] | undefined) {
const opts = { [name]: value };
await this.updateMultipleOptions(opts);

View File

@ -8,7 +8,7 @@
"noImplicitAny": true,
"resolveJsonModule": true,
"allowJs": true,
"lib": ["ES2022"],
"lib": ["ES2023"],
"downlevelIteration": true,
"skipLibCheck": true,
"esModuleInterop": true,