fix(settings): bring back pinning of plain text in MIME types

This commit is contained in:
Elian Doran 2024-11-30 03:00:24 +02:00
parent 0ef5cb843e
commit 5b90a1c3f6
No known key found for this signature in database

View File

@ -10,7 +10,8 @@ const TPL = `
</div> </div>
<style> <style>
.options-mime-types section { .options-mime-types section,
.options-mime-types > li:first-of-type {
margin-bottom: 1em; margin-bottom: 1em;
} }
</style> </style>
@ -32,6 +33,21 @@ function groupMimeTypesAlphabetically(ungroupedMimeTypes) {
return result; 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 { export default class CodeMimeTypesOptions extends OptionsWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
@ -41,25 +57,19 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
async optionsLoaded(options) { async optionsLoaded(options) {
this.$mimeTypes.empty(); this.$mimeTypes.empty();
const groupedMimeTypes = groupMimeTypesAlphabetically(mimeTypesService.getMimeTypes()); const ungroupedMimeTypes = mimeTypesService.getMimeTypes();
const plainTextMimeType = ungroupedMimeTypes.shift();
const groupedMimeTypes = groupMimeTypesAlphabetically(ungroupedMimeTypes);
// Plain text is displayed at the top intentionally.
this.$mimeTypes.append(buildSelectionForMimeType(plainTextMimeType));
for (const [ initial, mimeTypes ] of Object.entries(groupedMimeTypes)) { for (const [ initial, mimeTypes ] of Object.entries(groupedMimeTypes)) {
const $section = $("<section>"); const $section = $("<section>");
$section.append($("<h5>").text(initial)); $section.append($("<h5>").text(initial));
for (const mimeType of mimeTypes) { for (const mimeType of mimeTypes) {
const id = "code-mime-type-" + (idCtr++); $section.append(buildSelectionForMimeType(mimeType));
$section.append($("<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))
);
} }
this.$mimeTypes.append($section); this.$mimeTypes.append($section);