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