mirror of https://github.com/TriliumNext/Notes
options widget work
zadam
parent
2ad19ddd36
commit
5f6a10ef22
@ -1,90 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
import server from '../../services/server.js';
|
||||
import utils from "../../services/utils.js";
|
||||
import BasicWidget from "../basic_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-dialog modal fade mx-auto" tabindex="-1" role="dialog">
|
||||
<style>
|
||||
.options-dialog .nav {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.options-dialog .tab-content {
|
||||
overflow-y: auto;
|
||||
max-height: 85vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="modal-dialog modal-lg" style="min-width: 1000px;" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Options</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div style="display: flex">
|
||||
<ul class="nav nav-tabs flex-column"></ul>
|
||||
<br/>
|
||||
<div class="tab-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
|
||||
export default class OptionsDialog extends BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$navTabs = this.$widget.find(".nav-tabs");
|
||||
this.$tabContent = this.$widget.find(".tab-content");
|
||||
|
||||
for (const child of this.children) {
|
||||
this.$navTabs.append(
|
||||
$('<li class="nav-item">')
|
||||
.append(
|
||||
$('<a class="nav-link" data-toggle="tab">')
|
||||
.attr("href", '#options-' + child.constructor.name)
|
||||
.text(child.tabTitle)
|
||||
)
|
||||
);
|
||||
|
||||
this.$tabContent.append(
|
||||
$('<div class="tab-pane">')
|
||||
.attr("id", "options-" + child.constructor.name)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async showOptionsEvent({openTab}) {
|
||||
const optionPromise = server.get('options');
|
||||
|
||||
for (const child of this.children) {
|
||||
child.lazyRender();
|
||||
|
||||
this.$widget.find("#options-" + child.constructor.name)
|
||||
.empty()
|
||||
.append(child.$widget);
|
||||
}
|
||||
|
||||
const options = await optionPromise;
|
||||
|
||||
for (const child of this.children) {
|
||||
if (child.optionsLoaded) {
|
||||
child.optionsLoaded(options)
|
||||
}
|
||||
}
|
||||
|
||||
await utils.openDialog(this.$widget);
|
||||
|
||||
if (!openTab) {
|
||||
openTab = "AppearanceOptions";
|
||||
}
|
||||
|
||||
this.$widget.find(`.nav-link[href='#options-${openTab}']`).trigger("click");
|
||||
}
|
||||
}
|
||||
@ -1,325 +0,0 @@
|
||||
import server from "../../../services/server.js";
|
||||
import utils from "../../../services/utils.js";
|
||||
import appContext from "../../../components/app_context.js";
|
||||
import OptionsWidget from "../../type_widgets/options/appearance/options_widget.js";
|
||||
|
||||
const FONT_FAMILIES = [
|
||||
{ value: "theme", label: "Theme defined" },
|
||||
{ value: "serif", label: "Serif" },
|
||||
{ value: "sans-serif", label: "Sans Serif" },
|
||||
{ value: "monospace", label: "Monospace" },
|
||||
{ value: "Arial", label: "Arial" },
|
||||
{ value: "Verdana", label: "Verdana" },
|
||||
{ value: "Helvetica", label: "Helvetica" },
|
||||
{ value: "Tahoma", label: "Tahoma" },
|
||||
{ value: "Trebuchet MS", label: "Trebuchet MS" },
|
||||
{ value: "Times New Roman", label: "Times New Roman" },
|
||||
{ value: "Georgia", label: "Georgia" },
|
||||
{ value: "Garamond", label: "Garamond" },
|
||||
{ value: "Courier New", label: "Courier New" },
|
||||
{ value: "Brush Script MT", label: "Brush Script MT" },
|
||||
{ value: "Impact", label: "Impact" },
|
||||
{ value: "American Typewriter", label: "American Typewriter" },
|
||||
{ value: "Andalé Mono", label: "Andalé Mono" },
|
||||
{ value: "Lucida Console", label: "Lucida Console" },
|
||||
{ value: "Monaco", label: "Monaco" },
|
||||
{ value: "Bradley Hand", label: "Bradley Hand" },
|
||||
{ value: "Luminari", label: "Luminari" },
|
||||
{ value: "Comic Sans MS", label: "Comic Sans MS" },
|
||||
];
|
||||
|
||||
const TPL = `
|
||||
<p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
|
||||
|
||||
<style>
|
||||
.options-section .row {
|
||||
/* rows otherwise overflow horizontally and force a scrollbar */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="options-section">
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<label for="zoom-factor-select">Zoom factor (desktop build only)</label>
|
||||
|
||||
<input type="number" class="form-control" id="zoom-factor-select" min="0.3" max="2.0" step="0.1"/>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="native-title-bar-select">Native title bar (requires app restart)</label>
|
||||
|
||||
<select class="form-control" id="native-title-bar-select">
|
||||
<option value="show">enabled</option>
|
||||
<option value="hide">disabled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.</p>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Theme</h4>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<label for="theme-select">Theme</label>
|
||||
<select class="form-control" id="theme-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="override-theme-fonts">Override theme fonts</label>
|
||||
<input type="checkbox" class="form-control" id="override-theme-fonts">
|
||||
</div>
|
||||
</div>
|
||||
<div class="options-section">
|
||||
|
||||
<div id="overriden-font-settings" class="options-section">
|
||||
<h4>Fonts</h4>
|
||||
|
||||
<h5>Main font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-6">
|
||||
<label for="main-font-family">Font family</label>
|
||||
<select class="form-control" id="main-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="main-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Note tree font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="tree-font-family">Font family</label>
|
||||
<select class="form-control" id="tree-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="tree-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Note detail font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="detail-font-family">Font family</label>
|
||||
<select class="form-control" id="detail-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="detail-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Monospace (code) font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="monospace-font-family">Font family</label>
|
||||
<select class="form-control" id="monospace-font-family"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<label for="monospace-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="monospace-font-size" min="50" max="200" step="10"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Note that tree and detail font sizing is relative to the main font size setting.</p>
|
||||
|
||||
<p>Not all listed fonts may be available on your system.</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To apply font changes, click on
|
||||
<button class="btn btn-micro reload-frontend-button">reload frontend</button>
|
||||
</p>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Content width</h4>
|
||||
|
||||
<p>Trilium by default limits max content width to improve readability for maximized screens on wide screens.</p>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="max-content-width">Max content width in pixels</label>
|
||||
<input type="number" min="200" step="10" class="form-control" id="max-content-width">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To content width changes, click on
|
||||
<button class="btn btn-micro reload-frontend-button">reload frontend</button>
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class AppearanceOptions extends OptionsWidget {
|
||||
get tabTitle() { return "Appearance" }
|
||||
|
||||
lazyRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
this.$zoomFactorSelect = this.$widget.find("#zoom-factor-select");
|
||||
this.$nativeTitleBarSelect = this.$widget.find("#native-title-bar-select");
|
||||
|
||||
this.$themeSelect = this.$widget.find("#theme-select");
|
||||
this.$overrideThemeFonts = this.$widget.find("#override-theme-fonts");
|
||||
|
||||
this.$overridenFontSettings = this.$widget.find("#overriden-font-settings");
|
||||
|
||||
this.$mainFontSize = this.$widget.find("#main-font-size");
|
||||
this.$mainFontFamily = this.$widget.find("#main-font-family");
|
||||
|
||||
this.$treeFontSize = this.$widget.find("#tree-font-size");
|
||||
this.$treeFontFamily = this.$widget.find("#tree-font-family");
|
||||
|
||||
this.$detailFontSize = this.$widget.find("#detail-font-size");
|
||||
this.$detailFontFamily = this.$widget.find("#detail-font-family");
|
||||
|
||||
this.$monospaceFontSize = this.$widget.find("#monospace-font-size");
|
||||
this.$monospaceFontFamily = this.$widget.find("#monospace-font-family");
|
||||
|
||||
this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
|
||||
|
||||
this.$body = this.$widget.find("body");
|
||||
|
||||
this.$themeSelect.on('change', async () => {
|
||||
const newTheme = this.$themeSelect.val();
|
||||
|
||||
await server.put('options/theme/' + newTheme);
|
||||
|
||||
utils.reloadFrontendApp("theme change");
|
||||
});
|
||||
|
||||
this.$overrideThemeFonts.on('change', async () => {
|
||||
this.updateCheckboxOption('overrideThemeFonts', this.$overrideThemeFonts);
|
||||
|
||||
this.$overridenFontSettings.toggle(this.$overrideThemeFonts.is(":checked"));
|
||||
});
|
||||
|
||||
this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
|
||||
|
||||
this.$nativeTitleBarSelect.on('change', () => {
|
||||
const nativeTitleBarVisible = this.$nativeTitleBarSelect.val() === 'show' ? 'true' : 'false';
|
||||
|
||||
this.updateOption('nativeTitleBarVisible', nativeTitleBarVisible);
|
||||
});
|
||||
|
||||
const optionsToSave = [
|
||||
'mainFontFamily', 'mainFontSize',
|
||||
'treeFontFamily', 'treeFontSize',
|
||||
'detailFontFamily', 'detailFontSize',
|
||||
'monospaceFontFamily', 'monospaceFontSize'
|
||||
];
|
||||
|
||||
for (const optionName of optionsToSave) {
|
||||
this['$' + optionName].on('change', () =>
|
||||
this.updateOption(optionName, this['$' + optionName].val()));
|
||||
}
|
||||
|
||||
this.$maxContentWidth = this.$widget.find("#max-content-width");
|
||||
|
||||
this.$maxContentWidth.on('change', async () =>
|
||||
this.updateOption('maxContentWidth', this.$maxContentWidth.val()))
|
||||
}
|
||||
|
||||
toggleBodyClass(prefix, value) {
|
||||
for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes
|
||||
if (clazz.startsWith(prefix)) {
|
||||
this.$body.removeClass(clazz);
|
||||
}
|
||||
}
|
||||
|
||||
this.$body.addClass(prefix + value);
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
if (utils.isElectron()) {
|
||||
this.$zoomFactorSelect.val(options.zoomFactor);
|
||||
}
|
||||
else {
|
||||
this.$zoomFactorSelect.prop('disabled', true);
|
||||
}
|
||||
|
||||
this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide');
|
||||
|
||||
const themes = [
|
||||
{ val: 'light', title: 'Light' },
|
||||
{ val: 'dark', title: 'Dark' }
|
||||
].concat(await server.get('options/user-themes'));
|
||||
|
||||
this.$themeSelect.empty();
|
||||
|
||||
for (const theme of themes) {
|
||||
this.$themeSelect.append($("<option>")
|
||||
.attr("value", theme.val)
|
||||
.attr("data-note-id", theme.noteId)
|
||||
.text(theme.title));
|
||||
}
|
||||
|
||||
this.$themeSelect.val(options.theme);
|
||||
|
||||
this.setCheckboxState(this.$overrideThemeFonts, options.overrideThemeFonts);
|
||||
this.$overridenFontSettings.toggle(options.overrideThemeFonts === 'true');
|
||||
|
||||
this.$mainFontSize.val(options.mainFontSize);
|
||||
this.fillFontFamilyOptions(this.$mainFontFamily, options.mainFontFamily);
|
||||
|
||||
this.$treeFontSize.val(options.treeFontSize);
|
||||
this.fillFontFamilyOptions(this.$treeFontFamily, options.treeFontFamily);
|
||||
|
||||
this.$detailFontSize.val(options.detailFontSize);
|
||||
this.fillFontFamilyOptions(this.$detailFontFamily, options.detailFontFamily);
|
||||
|
||||
this.$monospaceFontSize.val(options.monospaceFontSize);
|
||||
this.fillFontFamilyOptions(this.$monospaceFontFamily, options.monospaceFontFamily);
|
||||
|
||||
this.$maxContentWidth.val(options.maxContentWidth);
|
||||
}
|
||||
|
||||
fillFontFamilyOptions($select, currentValue) {
|
||||
$select.empty();
|
||||
|
||||
for (const {value, label} of FONT_FAMILIES) {
|
||||
$select.append($("<option>")
|
||||
.attr("value", value)
|
||||
.prop("selected", value === currentValue)
|
||||
.text(label));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
import mimeTypesService from "../../../services/mime_types.js";
|
||||
import options from "../../../services/options.js";
|
||||
import server from "../../../services/server.js";
|
||||
import toastService from "../../../services/toast.js";
|
||||
import OptionsWidget from "../../type_widgets/options/appearance/options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Use vim keybindings in code notes (no ex mode)</h4>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="vim-keymap-enabled">
|
||||
<label class="custom-control-label" for="vim-keymap-enabled">Enable Vim Keybindings</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Wrap lines in code notes</h4>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="line-wrap-enabled">
|
||||
<label class="custom-control-label" for="line-wrap-enabled">Enable Line Wrap (change might need a frontend reload to take effect)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Automatic readonly size</h4>
|
||||
|
||||
<p>Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="auto-readonly-size-code">Automatic readonly size (code notes)</label>
|
||||
<input class="form-control" id="auto-readonly-size-code" type="number" min="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Available MIME types in the dropdown</h4>
|
||||
|
||||
<ul id="options-mime-types" style="max-height: 500px; overflow: auto; list-style-type: none;"></ul>
|
||||
</div>`;
|
||||
|
||||
export default class CodeNotesOptions extends OptionsWidget {
|
||||
get tabTitle() { return "Code notes" }
|
||||
|
||||
lazyRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
this.$vimKeymapEnabled = this.$widget.find("#vim-keymap-enabled");
|
||||
this.$vimKeymapEnabled.on('change', () =>
|
||||
this.updateCheckboxOption('vimKeymapEnabled', this.$vimKeymapEnabled));
|
||||
|
||||
this.$codeLineWrapEnabled = this.$widget.find("#line-wrap-enabled");
|
||||
this.$codeLineWrapEnabled.on('change', () =>
|
||||
this.updateCheckboxOption('codeLineWrapEnabled', this.$codeLineWrapEnabled));
|
||||
|
||||
this.$mimeTypes = this.$widget.find("#options-mime-types");
|
||||
|
||||
this.$autoReadonlySizeCode = this.$widget.find("#auto-readonly-size-code");
|
||||
this.$autoReadonlySizeCode.on('change', () =>
|
||||
this.updateOption('autoReadonlySizeCode', this.$autoReadonlySizeCode.val()));
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
this.$mimeTypes.empty();
|
||||
this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
|
||||
this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
|
||||
this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
|
||||
|
||||
let idCtr = 1;
|
||||
|
||||
for (const mimeType of await mimeTypesService.getMimeTypes()) {
|
||||
const id = "code-mime-type-" + (idCtr++);
|
||||
|
||||
this.$mimeTypes.append($("<li>")
|
||||
.append($('<input type="checkbox">')
|
||||
.attr("id", id)
|
||||
.attr("data-mime-type", mimeType.mime)
|
||||
.prop("checked", mimeType.enabled))
|
||||
.on('change', () => this.save())
|
||||
.append(" ")
|
||||
.append($('<label>')
|
||||
.attr("for", id)
|
||||
.text(mimeType.title))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async save() {
|
||||
const enabledMimeTypes = [];
|
||||
|
||||
this.$mimeTypes.find("input:checked").each(
|
||||
(i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
|
||||
|
||||
await this.updateOption('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
|
||||
|
||||
mimeTypesService.loadMimeTypes();
|
||||
}
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
import server from "../../../services/server.js";
|
||||
import toastService from "../../../services/toast.js";
|
||||
import OptionsWidget from "../../type_widgets/options/appearance/options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Heading style</h4>
|
||||
<select class="form-control" id="heading-style">
|
||||
<option value="plain">Plain</option>
|
||||
<option value="underline">Underline</option>
|
||||
<option value="markdown">Markdown-style</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Table of contents</h4>
|
||||
|
||||
Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number:
|
||||
|
||||
<div class="form-group">
|
||||
<input type="number" class="form-control" id="min-toc-headings" min="0" max="9999999999999999" step="1" style="text-align: right;"/>
|
||||
</div>
|
||||
|
||||
<p>You can also use this option to effectively disable TOC by setting a very high number.</p>
|
||||
</div>
|
||||
|
||||
<div class="options-section">
|
||||
<h4>Automatic readonly size</h4>
|
||||
|
||||
<p>Automatic readonly note size is the size after which notes will be displayed in a readonly mode (for performance reasons).</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="auto-readonly-size-text">Automatic readonly size (text notes)</label>
|
||||
<input class="form-control" id="auto-readonly-size-text" type="number" min="0" style="text-align: right;">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class TextNotesOptions extends OptionsWidget {
|
||||
get tabTitle() { return "Text notes" }
|
||||
|
||||
lazyRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$body = $("body");
|
||||
|
||||
this.$headingStyle = this.$widget.find("#heading-style");
|
||||
this.$headingStyle.on('change', () => {
|
||||
const newHeadingStyle = this.$headingStyle.val();
|
||||
|
||||
this.toggleBodyClass("heading-style-", newHeadingStyle);
|
||||
|
||||
this.updateOption('headingStyle', newHeadingStyle);
|
||||
});
|
||||
|
||||
this.$minTocHeadings = this.$widget.find("#min-toc-headings");
|
||||
this.$minTocHeadings.on('change', () =>
|
||||
this.updateOption('minTocHeadings', this.$minTocHeadings.val()));
|
||||
|
||||
this.$autoReadonlySizeText = this.$widget.find("#auto-readonly-size-text");
|
||||
this.$autoReadonlySizeText.on('change', () =>
|
||||
this.updateOption('autoReadonlySizeText', this.$autoReadonlySizeText.val()));
|
||||
}
|
||||
|
||||
toggleBodyClass(prefix, value) {
|
||||
for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes
|
||||
if (clazz.startsWith(prefix)) {
|
||||
this.$body.removeClass(clazz);
|
||||
}
|
||||
}
|
||||
|
||||
this.$body.addClass(prefix + value);
|
||||
}
|
||||
|
||||
optionsLoaded(options) {
|
||||
this.$headingStyle.val(options.headingStyle);
|
||||
this.$minTocHeadings.val(options.minTocHeadings);
|
||||
this.$autoReadonlySizeText.val(options.autoReadonlySizeText);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Automatic read-only size</h4>
|
||||
|
||||
<p>Automatic read-only note size is the size after which notes will be displayed in a read-only mode (for performance reasons).</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Automatic read-only size (code notes)</label>
|
||||
<input class="auto-readonly-size-code form-control" type="number" min="0">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class CodeAutoReadOnlySizeOptions extends OptionsWidget {
|
||||
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) {
|
||||
this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
import mimeTypesService from "../../../../services/mime_types.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Available MIME types in the dropdown</h4>
|
||||
|
||||
<ul class="options-mime-types" style="list-style-type: none;"></ul>
|
||||
</div>`;
|
||||
|
||||
let idCtr = 1; // global, since this can be shown in multiple dialogs
|
||||
|
||||
export default class CodeMimeTypesOptions extends OptionsWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$mimeTypes = this.$widget.find(".options-mime-types");
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
this.$mimeTypes.empty();
|
||||
|
||||
for (const mimeType of await mimeTypesService.getMimeTypes()) {
|
||||
const id = "code-mime-type-" + (idCtr++);
|
||||
|
||||
this.$mimeTypes.append($("<li>")
|
||||
.append($('<input type="checkbox">')
|
||||
.attr("id", id)
|
||||
.attr("data-mime-type", mimeType.mime)
|
||||
.prop("checked", mimeType.enabled))
|
||||
.on('change', () => this.save())
|
||||
.append(" ")
|
||||
.append($('<label>')
|
||||
.attr("for", id)
|
||||
.text(mimeType.title))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async save() {
|
||||
const enabledMimeTypes = [];
|
||||
|
||||
this.$mimeTypes.find("input:checked").each(
|
||||
(i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
|
||||
|
||||
await this.updateOption('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
|
||||
|
||||
mimeTypesService.loadMimeTypes();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Use vim keybindings in code notes (no ex mode)</h4>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="vim-keymap-enabled custom-control-input">
|
||||
<label class="custom-control-label">Enable Vim Keybindings</label>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class VimKeyBindingsOptions extends OptionsWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$vimKeymapEnabled = this.$widget.find(".vim-keymap-enabled");
|
||||
this.$vimKeymapEnabled.on('change', () =>
|
||||
this.updateCheckboxOption('vimKeymapEnabled', this.$vimKeymapEnabled));
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Wrap lines in code notes</h4>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="line-wrap-enabled custom-control-input">
|
||||
<label class="custom-control-label">Enable Line Wrap (change might need a frontend reload to take effect)</label>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class WrapLinesOptions extends OptionsWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$codeLineWrapEnabled = this.$widget.find(".line-wrap-enabled");
|
||||
this.$codeLineWrapEnabled.on('change', () =>
|
||||
this.updateCheckboxOption('codeLineWrapEnabled', this.$codeLineWrapEnabled));
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Heading style</h4>
|
||||
<select class="heading-style form-control">
|
||||
<option value="plain">Plain</option>
|
||||
<option value="underline">Underline</option>
|
||||
<option value="markdown">Markdown-style</option>
|
||||
</select>
|
||||
</div>`;
|
||||
|
||||
export default class HeadingStyleOptions extends OptionsWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$body = $("body");
|
||||
this.$headingStyle = this.$widget.find(".heading-style");
|
||||
this.$headingStyle.on('change', () => {
|
||||
const newHeadingStyle = this.$headingStyle.val();
|
||||
|
||||
this.toggleBodyClass("heading-style-", newHeadingStyle);
|
||||
|
||||
this.updateOption('headingStyle', newHeadingStyle);
|
||||
});
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
this.$headingStyle.val(options.headingStyle);
|
||||
}
|
||||
|
||||
toggleBodyClass(prefix, value) {
|
||||
for (const clazz of Array.from(this.$body[0].classList)) { // create copy to safely iterate over while removing classes
|
||||
if (clazz.startsWith(prefix)) {
|
||||
this.$body.removeClass(clazz);
|
||||
}
|
||||
}
|
||||
|
||||
this.$body.addClass(prefix + value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Table of contents</h4>
|
||||
|
||||
Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number:
|
||||
|
||||
<div class="form-group">
|
||||
<input type="number" class="min-toc-headings form-control" min="0" max="9999999999999999" step="1" style="text-align: right;"/>
|
||||
</div>
|
||||
|
||||
<p>You can also use this option to effectively disable TOC by setting a very high number.</p>
|
||||
</div>`;
|
||||
|
||||
export default class TableOfContentsOptions extends OptionsWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$minTocHeadings = this.$widget.find(".min-toc-headings");
|
||||
this.$minTocHeadings.on('change', () =>
|
||||
this.updateOption('minTocHeadings', this.$minTocHeadings.val()));
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
this.$minTocHeadings.val(options.minTocHeadings);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="options-section">
|
||||
<h4>Automatic read-only size</h4>
|
||||
|
||||
<p>Automatic read-only note size is the size after which notes will be displayed in a read-only mode (for performance reasons).</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Automatic read-only size (text notes)</label>
|
||||
<input class="auto-readonly-size-text form-control" type="number" min="0" style="text-align: right;">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
export default class TextAutoReadOnlySizeOptions extends OptionsWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
this.$autoReadonlySizeText = this.$widget.find(".auto-readonly-size-text");
|
||||
this.$autoReadonlySizeText.on('change', () =>
|
||||
this.updateOption('autoReadonlySizeText', this.$autoReadonlySizeText.val()));
|
||||
}
|
||||
|
||||
async optionsLoaded(options) {
|
||||
this.$autoReadonlySizeText.val(options.autoReadonlySizeText);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue