client: Replace the editor type combo box with radio buttons

This commit is contained in:
Adorian Doran 2024-11-13 23:34:43 +02:00
parent 693bcfb587
commit 9485067749

View File

@ -6,25 +6,37 @@ const TPL = `
<div class="options-section">
<h4>${t("editing.editor_type.label")}</h4>
<select class="editor-type-select form-select">
<option value="ckeditor-balloon">${t("editing.editor_type.floating")}</option>
<option value="ckeditor-classic">${t("editing.editor_type.fixed")}</option>
</select>
<div>
<label>
<input type="radio" name="editor-type" value="ckeditor-balloon" />
<strong>${t("editing.editor_type.floating.title")}</strong>
- ${t("editing.editor_type.floating.description")}
</label>
</div>
<div>
<label>
<input type="radio" name="editor-type" value="ckeditor-classic" />
<strong>${t("editing.editor_type.fixed.title")}</strong>
- ${t("editing.editor_type.fixed.description")}
</label>
</div>
</div>`;
export default class EditorOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
this.$body = $("body");
this.$editorType = this.$widget.find(".editor-type-select");
this.$editorType.on('change', async () => {
const newEditorType = this.$editorType.val();
this.$widget.find(`input[name="editor-type"]`).on('change', async () => {
const newEditorType = this.$widget.find(`input[name="editor-type"]:checked`).val();
await this.updateOption('textNoteEditorType', newEditorType);
utils.reloadFrontendApp("editor type change");
});
}
async optionsLoaded(options) {
this.$editorType.val(options.textNoteEditorType);
this.$widget.find(`input[name="editor-type"][value="${options.textNoteEditorType}"]`)
.prop("checked", "true");
}
}