diff --git a/src/public/app/widgets/dialogs/options.js b/src/public/app/widgets/dialogs/options.js index cac0caf64..288bae91d 100644 --- a/src/public/app/widgets/dialogs/options.js +++ b/src/public/app/widgets/dialogs/options.js @@ -34,6 +34,9 @@ const TPL = `
  • Shortcuts
    • +
  • + Text notes +
  • Code notes
    • @@ -60,6 +63,7 @@ const TPL = `
    +
    @@ -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'), diff --git a/src/public/app/widgets/dialogs/options/appearance.js b/src/public/app/widgets/dialogs/options/appearance.js index 18f548df6..fe1abc6d3 100644 --- a/src/public/app/widgets/dialogs/options/appearance.js +++ b/src/public/app/widgets/dialogs/options/appearance.js @@ -32,22 +32,13 @@ const TPL = `
    -
    - - -
    - -
    +
    -
    +
    -
    +
    @@ -79,12 +70,12 @@ const TPL = `
    Main font
    -
    +
    -
    +
    @@ -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' } diff --git a/src/public/app/widgets/dialogs/options/text_notes.js b/src/public/app/widgets/dialogs/options/text_notes.js new file mode 100644 index 000000000..86510a47a --- /dev/null +++ b/src/public/app/widgets/dialogs/options/text_notes.js @@ -0,0 +1,64 @@ +import server from "../../../services/server.js"; + +const TPL = ` +

    Settings on this options tab are saved automatically after each change.

    + + +

    Heading style

    + + +
    + +

    Table of contents

    + + Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number: + +
    + +
    + +

    You can also use this option to effectively disable TOC by setting a very high number.

    +`; + +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); + } +} diff --git a/src/public/app/widgets/toc.js b/src/public/app/widgets/toc.js index f8f7a2352..c127083f1 100644 --- a/src/public/app/widgets/toc.js +++ b/src/public/app/widgets/toc.js @@ -16,6 +16,7 @@ import attributeService from "../services/attributes.js"; import CollapsibleWidget from "./collapsible_widget.js"; +import options from "../services/options.js"; const TPL = `