Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-04 15:11:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): fix orphans/widows in code MIME types

Browse Source
This commit is contained in:
Elian Doran 2024-11-30 02:56:43 +02:00
parent 978bb5eb0b
commit 0ef5cb843e
No known key found for this signature in database
1 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
View File

@ -7,10 +7,31 @@ const TPL = `
<h4>${t('code_mime_types.title')}</h4> <h4>${t('code_mime_types.title')}</h4>
<ul class="options-mime-types" style="list-style-type: none;"></ul> <ul class="options-mime-types" style="list-style-type: none;"></ul>
</div>`; </div>
<style>
.options-mime-types section {
margin-bottom: 1em;
}
</style>
`;
let idCtr = 1; // global, since this can be shown in multiple dialogs 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);
for (const mimeType of ungroupedMimeTypes) {
const initial = mimeType.title.charAt(0).toUpperCase();
if (!result[initial]) {
result[initial] = [];
}
result[initial].push(mimeType);
}
return result;
}
export default class CodeMimeTypesOptions extends OptionsWidget { export default class CodeMimeTypesOptions extends OptionsWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
@ -19,26 +40,16 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
async optionsLoaded(options) { async optionsLoaded(options) {
this.$mimeTypes.empty(); this.$mimeTypes.empty();
let index = -1;
let prevInitial = "";
for (const mimeType of mimeTypesService.getMimeTypes()) { const groupedMimeTypes = groupMimeTypesAlphabetically(mimeTypesService.getMimeTypes());
for (const [ initial, mimeTypes ] of Object.entries(groupedMimeTypes)) {
const $section = $("<section>");
$section.append($("<h5>").text(initial));
for (const mimeType of mimeTypes) {
const id = "code-mime-type-" + (idCtr++); const id = "code-mime-type-" + (idCtr++);
index++; $section.append($("<li>")
// Append a heading to group items by the first letter, excepting for the
// first item ("Plain Text"). Note: this code assumes the items are already
// in alphabetical ordered.
if (index > 0) {
const initial = mimeType.title.charAt(0).toUpperCase();
if (initial !== prevInitial) {
this.$mimeTypes.append($("<h5>").text(initial));
prevInitial = initial;
}
}
this.$mimeTypes.append($("<li>")
.append($('<input type="checkbox" class="form-check-input">') .append($('<input type="checkbox" class="form-check-input">')
.attr("id", id) .attr("id", id)
.attr("data-mime-type", mimeType.mime) .attr("data-mime-type", mimeType.mime)
@ -50,6 +61,9 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
.text(mimeType.title)) .text(mimeType.title))
); );
} }
this.$mimeTypes.append($section);
}
} }
async save() { async save() {