mirror of
https://github.com/zadam/trilium.git
synced 2025-06-05 01:18:44 +02:00
added an option to define a "min TOC headings", #2985
This commit is contained in:
zadam
parent
377922eccf
commit
57c5b6d61f
@ -34,6 +34,9 @@ const TPL = `
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#options-shortcuts">Shortcuts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#options-text-notes">Text notes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#options-code-notes">Code notes</a>
|
||||
</li>
|
||||
@ -60,6 +63,7 @@ const TPL = `
|
||||
<div class="tab-content">
|
||||
<div id="options-appearance" class="tab-pane active"></div>
|
||||
<div id="options-shortcuts" class="tab-pane"></div>
|
||||
<div id="options-text-notes" class="tab-pane"></div>
|
||||
<div id="options-code-notes" class="tab-pane"></div>
|
||||
<div id="options-password" class="tab-pane"></div>
|
||||
<div id="options-etapi" class="tab-pane"></div>
|
||||
@ -88,6 +92,7 @@ export default class OptionsDialog extends BasicWidget {
|
||||
(await Promise.all([
|
||||
import('./options/appearance.js'),
|
||||
import('./options/shortcuts.js'),
|
||||
import('./options/text_notes.js'),
|
||||
import('./options/code_notes.js'),
|
||||
import('./options/password.js'),
|
||||
import('./options/etapi.js'),
|
||||
|
||||
@ -32,22 +32,13 @@ const TPL = `
|
||||
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="heading-style">Heading style</label>
|
||||
<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="col-4">
|
||||
<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-4">
|
||||
<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">
|
||||
@ -62,12 +53,12 @@ const TPL = `
|
||||
<h4>Theme</h4>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<div class="col-6">
|
||||
<label for="theme-select">Theme</label>
|
||||
<select class="form-control" id="theme-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="col-6">
|
||||
<label for="override-theme-fonts">Override theme fonts</label>
|
||||
<input type="checkbox" class="form-control" id="override-theme-fonts">
|
||||
</div>
|
||||
@ -79,12 +70,12 @@ const TPL = `
|
||||
<h5>Main font</h5>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<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-4">
|
||||
<div class="col-6">
|
||||
<label for="main-font-size">Size</label>
|
||||
|
||||
<div class="input-group">
|
||||
@ -189,7 +180,6 @@ export default class ApperanceOptions {
|
||||
|
||||
this.$zoomFactorSelect = $("#zoom-factor-select");
|
||||
this.$nativeTitleBarSelect = $("#native-title-bar-select");
|
||||
this.$headingStyle = $("#heading-style");
|
||||
|
||||
this.$themeSelect = $("#theme-select");
|
||||
this.$overrideThemeFonts = $("#override-theme-fonts");
|
||||
@ -236,14 +226,6 @@ export default class ApperanceOptions {
|
||||
server.put('options/nativeTitleBarVisible/' + nativeTitleBarVisible);
|
||||
});
|
||||
|
||||
this.$headingStyle.on('change', () => {
|
||||
const newHeadingStyle = this.$headingStyle.val();
|
||||
|
||||
this.toggleBodyClass("heading-style-", newHeadingStyle);
|
||||
|
||||
server.put('options/headingStyle/' + newHeadingStyle);
|
||||
});
|
||||
|
||||
const optionsToSave = [
|
||||
'mainFontFamily', 'mainFontSize',
|
||||
'treeFontFamily', 'treeFontSize',
|
||||
@ -284,8 +266,6 @@ export default class ApperanceOptions {
|
||||
|
||||
this.$nativeTitleBarSelect.val(options.nativeTitleBarVisible === 'true' ? 'show' : 'hide');
|
||||
|
||||
this.$headingStyle.val(options.headingStyle);
|
||||
|
||||
const themes = [
|
||||
{ val: 'light', title: 'Light' },
|
||||
{ val: 'dark', title: 'Dark' }
|
||||
|
||||
64
src/public/app/widgets/dialogs/options/text_notes.js
Normal file
64
src/public/app/widgets/dialogs/options/text_notes.js
Normal file
@ -0,0 +1,64 @@
|
||||
import server from "../../../services/server.js";
|
||||
|
||||
const TPL = `
|
||||
<p><strong>Settings on this options tab are saved automatically after each change.</strong></p>
|
||||
|
||||
<form>
|
||||
<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>
|
||||
|
||||
<br/>
|
||||
|
||||
<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>
|
||||
</form>`;
|
||||
|
||||
export default class TextNotesOptions {
|
||||
constructor() {
|
||||
$("#options-text-notes").html(TPL);
|
||||
|
||||
this.$body = $("body");
|
||||
|
||||
this.$headingStyle = $("#heading-style");
|
||||
this.$headingStyle.on('change', () => {
|
||||
const newHeadingStyle = this.$headingStyle.val();
|
||||
|
||||
this.toggleBodyClass("heading-style-", newHeadingStyle);
|
||||
|
||||
server.put('options/headingStyle/' + newHeadingStyle);
|
||||
});
|
||||
|
||||
this.$minTocHeadings = $("#min-toc-headings");
|
||||
this.$minTocHeadings.on('change', () => {
|
||||
const minTocHeadings = this.$minTocHeadings.val();
|
||||
|
||||
server.put('options/minTocHeadings/' + minTocHeadings);
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
this.$headingStyle.val(options.headingStyle);
|
||||
this.$minTocHeadings.val(options.minTocHeadings);
|
||||
}
|
||||
}
|
||||
@ -16,6 +16,7 @@
|
||||
|
||||
import attributeService from "../services/attributes.js";
|
||||
import CollapsibleWidget from "./collapsible_widget.js";
|
||||
import options from "../services/options.js";
|
||||
|
||||
const TPL = `<div class="toc-widget">
|
||||
<style>
|
||||
@ -67,8 +68,6 @@ function findHeadingNodeByIndex(parent, headingIndex) {
|
||||
return headingNode;
|
||||
}
|
||||
|
||||
const MIN_HEADING_COUNT = 3;
|
||||
|
||||
export default class TocWidget extends CollapsibleWidget {
|
||||
get widgetTitle() {
|
||||
return "Table of Contents";
|
||||
@ -94,7 +93,7 @@ export default class TocWidget extends CollapsibleWidget {
|
||||
}
|
||||
|
||||
this.$toc.html($toc);
|
||||
this.toggleInt(headingCount >= MIN_HEADING_COUNT);
|
||||
this.toggleInt(headingCount >= options.getInt('minTocHeadings'));
|
||||
this.triggerCommand("reevaluateIsEnabled");
|
||||
}
|
||||
|
||||
|
||||
@ -56,7 +56,8 @@ const ALLOWED_OPTIONS = new Set([
|
||||
'monthlyBackupEnabled',
|
||||
'maxContentWidth',
|
||||
'compressImages',
|
||||
'downloadImagesAutomatically'
|
||||
'downloadImagesAutomatically',
|
||||
'minTocHeadings'
|
||||
]);
|
||||
|
||||
function getOptions() {
|
||||
|
||||
@ -84,7 +84,8 @@ const defaultOptions = [
|
||||
{ name: 'monthlyBackupEnabled', value: 'true', isSynced: false },
|
||||
{ name: 'maxContentWidth', value: '1200', isSynced: false },
|
||||
{ name: 'compressImages', value: 'true', isSynced: true },
|
||||
{ name: 'downloadImagesAutomatically', value: 'true', isSynced: true }
|
||||
{ name: 'downloadImagesAutomatically', value: 'true', isSynced: true },
|
||||
{ name: 'minTocHeadings', value: '5', isSynced: true }
|
||||
];
|
||||
|
||||
function initStartupOptions() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user