option tabs refactored

src/public/app/widgets/dialogs/options/appearance.js

@@ -227,11 +227,9 @@ export default class AppearanceOptions extends OptionsTab {
         });
 
         this.$overrideThemeFonts.on('change', async () => {
-            const isOverriden = this.$overrideThemeFonts.is(":checked");
+            this.updateCheckboxOption('overrideThemeFonts', this.$overrideThemeFonts);
 
-            await server.put('options/overrideThemeFonts/' + isOverriden.toString());
+            this.$overridenFontSettings.toggle(this.$overrideThemeFonts.is(":checked"));
-
-            this.$overridenFontSettings.toggle(isOverriden);
         });
 
         this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
@@ -239,7 +237,7 @@ export default class AppearanceOptions extends OptionsTab {
         this.$nativeTitleBarSelect.on('change', () => {
             const nativeTitleBarVisible = this.$nativeTitleBarSelect.val() === 'show' ? 'true' : 'false';
 
-            server.put('options/nativeTitleBarVisible/' + nativeTitleBarVisible);
+            this.updateOption('nativeTitleBarVisible', nativeTitleBarVisible);
         });
 
         const optionsToSave = [
@@ -250,16 +248,14 @@ export default class AppearanceOptions extends OptionsTab {
         ];
 
         for (const optionName of optionsToSave) {
-            this['$' + optionName].on('change', () => server.put(`options/${optionName}/${this['$' + optionName].val()}`));
+            this['$' + optionName].on('change', () =>
+                this.updateOption(optionName, this['$' + optionName].val()));
         }
 
         this.$maxContentWidth = this.$widget.find("#max-content-width");
 
-        this.$maxContentWidth.on('change', async () => {
+        this.$maxContentWidth.on('change', async () =>
-            const maxContentWidth = this.$maxContentWidth.val();
+            this.updateOption('maxContentWidth', this.$maxContentWidth.val()))
-
-            await server.put('options/maxContentWidth/' + maxContentWidth);
-        })
     }
 
     toggleBodyClass(prefix, value) {
@@ -298,7 +294,7 @@ export default class AppearanceOptions extends OptionsTab {
 
         this.$themeSelect.val(options.theme);
 
-        this.$overrideThemeFonts.prop('checked', options.overrideThemeFonts === 'true');
+        this.setCheckboxState(this.$overrideThemeFonts, options.overrideThemeFonts);
         this.$overridenFontSettings.toggle(options.overrideThemeFonts === 'true');
 
         this.$mainFontSize.val(options.mainFontSize);

src/public/app/widgets/dialogs/options/backup.js

@@ -53,31 +53,19 @@ export default class BackupOptions extends OptionsTab {
         this.$weeklyBackupEnabled = this.$widget.find("#weekly-backup-enabled");
         this.$monthlyBackupEnabled = this.$widget.find("#monthly-backup-enabled");
 
-        this.$dailyBackupEnabled.on('change', () => {
+        this.$dailyBackupEnabled.on('change', () =>
-            const opts = { 'dailyBackupEnabled': this.$dailyBackupEnabled.is(":checked") ? "true" : "false" };
+            this.updateCheckboxOption('dailyBackupEnabled', this.$dailyBackupEnabled));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 
-            return false;
+        this.$weeklyBackupEnabled.on('change', () =>
-        });
+            this.updateCheckboxOption('weeklyBackupEnabled', this.$weeklyBackupEnabled));
 
-        this.$weeklyBackupEnabled.on('change', () => {
+        this.$monthlyBackupEnabled.on('change', () =>
-            const opts = { 'weeklyBackupEnabled': this.$weeklyBackupEnabled.is(":checked") ? "true" : "false" };
+            this.updateCheckboxOption('monthlyBackupEnabled', this.$monthlyBackupEnabled));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-
-            return false;
-        });
-
-        this.$monthlyBackupEnabled.on('change', () => {
-            const opts = { 'monthlyBackupEnabled': this.$monthlyBackupEnabled.is(":checked") ? "true" : "false" };
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-
-            return false;
-        });
     }
 
     optionsLoaded(options) {
-        this.$dailyBackupEnabled.prop("checked", options['dailyBackupEnabled'] === 'true');
+        this.setCheckboxState(this.$dailyBackupEnabled, options.dailyBackupEnabled);
-        this.$weeklyBackupEnabled.prop("checked", options['weeklyBackupEnabled'] === 'true');
+        this.setCheckboxState(this.$weeklyBackupEnabled, options.weeklyBackupEnabled);
-        this.$monthlyBackupEnabled.prop("checked", options['monthlyBackupEnabled'] === 'true');
+        this.setCheckboxState(this.$monthlyBackupEnabled, options.monthlyBackupEnabled);
     }
 }

src/public/app/widgets/dialogs/options/code_notes.js

@@ -45,34 +45,25 @@ export default class CodeNotesOptions extends OptionsTab {
         this.$widget = $(TPL);
 
         this.$vimKeymapEnabled = this.$widget.find("#vim-keymap-enabled");
-        this.$vimKeymapEnabled.on('change', () => {
+        this.$vimKeymapEnabled.on('change', () =>
-            const opts = { 'vimKeymapEnabled': this.$vimKeymapEnabled.is(":checked") ? "true" : "false" };
+            this.updateCheckboxOption('vimKeymapEnabled', this.$vimKeymapEnabled));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-            return false;
-        });
 
         this.$codeLineWrapEnabled = this.$widget.find("#line-wrap-enabled");
-        this.$codeLineWrapEnabled.on('change', () => {
+        this.$codeLineWrapEnabled.on('change', () =>
-            const opts = { 'codeLineWrapEnabled': this.$codeLineWrapEnabled.is(":checked") ? "true" : "false" };
+            this.updateCheckboxOption('codeLineWrapEnabled', this.$codeLineWrapEnabled));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
+
-            return false;
-        });
         this.$mimeTypes = this.$widget.find("#options-mime-types");
 
         this.$autoReadonlySizeCode = this.$widget.find("#auto-readonly-size-code");
-        this.$autoReadonlySizeCode.on('change', () => {
+        this.$autoReadonlySizeCode.on('change', () =>
-            const opts = { 'autoReadonlySizeCode': this.$autoReadonlySizeCode.val() };
+            this.updateOption('autoReadonlySizeCode', this.$autoReadonlySizeCode.val()));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-
-            return false;
-        });
     }
 
     async optionsLoaded(options) {
         this.$mimeTypes.empty();
-        this.$vimKeymapEnabled.prop("checked", options['vimKeymapEnabled'] === 'true');
+        this.setCheckboxState(this.$vimKeymapEnabled, options.vimKeymapEnabled);
-        this.$codeLineWrapEnabled.prop("checked", options['codeLineWrapEnabled'] === 'true');
+        this.setCheckboxState(this.$codeLineWrapEnabled, options.codeLineWrapEnabled);
-        this.$autoReadonlySizeCode.val(options['autoReadonlySizeCode']);
+        this.$autoReadonlySizeCode.val(options.autoReadonlySizeCode);
 
         let idCtr = 1;
 
@@ -99,7 +90,7 @@ export default class CodeNotesOptions extends OptionsTab {
         this.$mimeTypes.find("input:checked").each(
             (i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
 
-        await options.save('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
+        await this.updateOption('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
 
         mimeTypesService.loadMimeTypes();
     }

src/public/app/widgets/dialogs/options/images.js

@@ -1,6 +1,13 @@
 import OptionsTab from "./options_tab.js";
 
 const TPL = `
+<style>
+    .options-section .disabled-field {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+</style>
+
 <div class="options-section">
     <h4>Images</h4>
     
@@ -38,49 +45,41 @@ export default class ImageOptions extends OptionsTab {
         this.$imageMaxWidthHeight = this.$widget.find("#image-max-width-height");
         this.$imageJpegQuality = this.$widget.find("#image-jpeg-quality");
 
-        this.$imageMaxWidthHeight.on('change', () => {
+        this.$imageMaxWidthHeight.on('change', () =>
-            this.updateOption('imageMaxWidthHeight', this.$imageMaxWidthHeight.val());
+            this.updateOption('imageMaxWidthHeight', this.$imageMaxWidthHeight.val()));
-        });
 
-        this.$imageJpegQuality.on('change', () => {
+        this.$imageJpegQuality.on('change', () =>
-            this.updateOption('imageJpegQuality', this.$imageJpegQuality.val());
+            this.updateOption('imageJpegQuality', this.$imageJpegQuality.val()));
-        });
 
         this.$downloadImagesAutomatically = this.$widget.find("#download-images-automatically");
 
-        this.$downloadImagesAutomatically.on("change", () => {
+        this.$downloadImagesAutomatically.on("change", () =>
-            const isChecked = this.$downloadImagesAutomatically.prop("checked");
+            this.updateCheckboxOption('downloadImagesAutomatically', this.$downloadImagesAutomatically));
-            this.updateOption('downloadImagesAutomatically', isChecked ? 'true' : 'false');
-        });
 
         this.$enableImageCompression = this.$widget.find("#image-compresion-enabled");
         this.$imageCompressionWrapper = this.$widget.find("#image-compression-enabled-wraper");
 
         this.$enableImageCompression.on("change", () => {
-            const isChecked = this.$enableImageCompression.prop("checked");
+            this.updateCheckboxOption('compressImages', this.$enableImageCompression);
-            this.updateOption('compressImages', isChecked ? 'true' : 'false');
+            this.setImageCompression();
-
-            this.setImageCompression(isChecked);
         });
     }
 
-    setImageCompression(isChecked) {
+    optionsLoaded(options) {
-        if (isChecked) {
+        this.$imageMaxWidthHeight.val(options.imageMaxWidthHeight);
+        this.$imageJpegQuality.val(options.imageJpegQuality);
+
+        this.setCheckboxState(this.$downloadImagesAutomatically, options.downloadImagesAutomatically);
+        this.setCheckboxState(this.$enableImageCompression, options.compressImages);
+
+        this.setImageCompression();
+    }
+
+    setImageCompression() {
+        if (this.$enableImageCompression.prop("checked")) {
             this.$imageCompressionWrapper.removeClass("disabled-field");
         } else {
             this.$imageCompressionWrapper.addClass("disabled-field");
         }
     }
-
-    optionsLoaded(options) {
-        this.$imageMaxWidthHeight.val(options['imageMaxWidthHeight']);
-        this.$imageJpegQuality.val(options['imageJpegQuality']);
-
-        const downloadImagesAutomatically = options['downloadImagesAutomatically'] === 'true';
-        this.$downloadImagesAutomatically.prop('checked', downloadImagesAutomatically);
-
-        const compressImages = options['compressImages'] === 'true';
-        this.$enableImageCompression.prop('checked', compressImages);
-        this.setImageCompression(compressImages);
-    }
 }

src/public/app/widgets/dialogs/options/options_tab.js

@@ -5,14 +5,33 @@ import toastService from "../../../services/toast.js";
 export default class OptionsTab extends BasicWidget {
     async updateOption(name, value) {
         const opts = { [name]: value };
-        server.put('options', opts).then(() => {
+
-            toastService.showPersistent({
+        await this.updateMultipleOptions(opts);
-                id: "options-change-saved",
+    }
-                title: "Options status",
+
-                message: "Options change have been saved.",
+    async updateMultipleOptions(opts) {
-                icon: "slider",
+        await server.put('options', opts);
-                closeAfter: 2000
+
-            })
+        this.showUpdateNotification();
+    }
+
+    showUpdateNotification() {
+        toastService.showPersistent({
+            id: "options-change-saved",
+            title: "Options status",
+            message: "Options change have been saved.",
+            icon: "slider",
+            closeAfter: 2000
         });
     }
+
+    async updateCheckboxOption(name, $checkbox) {
+        const isChecked = $checkbox.prop("checked");
+
+        return await this.updateOption(name, isChecked ? 'true' : 'false');
+    }
+
+    setCheckboxState($checkbox, optionValue) {
+        $checkbox.prop('checked', optionValue === 'true');
+    }
 }

src/public/app/widgets/dialogs/options/other.js

@@ -57,24 +57,11 @@ export default class OtherOptions extends OptionsTab {
         this.$widget = $(TPL);
 
         this.$trayEnabled = this.$widget.find("#tray-enabled");
-        this.$trayEnabled.on('change', () => {
+        this.$trayEnabled.on('change', () =>
-            const opts = { 'disableTray': !this.$trayEnabled.is(":checked") ? "true" : "false" };
+            this.updateOption('disableTray', !this.$trayEnabled.is(":checked") ? "true" : "false"));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-
-            return false;
-        });
 
         this.$eraseEntitiesAfterTimeInSeconds = this.$widget.find("#erase-entities-after-time-in-seconds");
-
+        this.$eraseEntitiesAfterTimeInSeconds.on('change', () => this.updateOption('eraseEntitiesAfterTimeInSeconds', this.$eraseEntitiesAfterTimeInSeconds.val()));
-        this.$eraseEntitiesAfterTimeInSeconds.on('change', () => {
-            const eraseEntitiesAfterTimeInSeconds = this.$eraseEntitiesAfterTimeInSeconds.val();
-
-            server.put('options', { 'eraseEntitiesAfterTimeInSeconds': eraseEntitiesAfterTimeInSeconds }).then(() => {
-                toastService.showMessage("Options change have been saved.");
-            });
-
-            return false;
-        });
 
         this.$eraseDeletedNotesButton = this.$widget.find("#erase-deleted-notes-now-button");
         this.$eraseDeletedNotesButton.on('click', () => {
@@ -85,29 +72,20 @@ export default class OtherOptions extends OptionsTab {
 
         this.$noteRevisionsTimeInterval = this.$widget.find("#note-revision-snapshot-time-interval-in-seconds");
 
-        this.$noteRevisionsTimeInterval.on('change', () => {
+        this.$noteRevisionsTimeInterval.on('change', () =>
-            const opts = { 'noteRevisionSnapshotTimeInterval': this.$noteRevisionsTimeInterval.val() };
+            this.updateOption('noteRevisionSnapshotTimeInterval', this.$noteRevisionsTimeInterval.val()));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-
-            return false;
-        });
 
         this.$checkForUpdates = this.$widget.find("#check-for-updates");
-        this.$checkForUpdates.on("change", () => {
+        this.$checkForUpdates.on("change", () =>
-            const isChecked = this.$checkForUpdates.prop("checked");
+            this.updateCheckboxOption('checkForUpdates', this.$checkForUpdates));
-            const opts = { 'checkForUpdates': isChecked ? 'true' : 'false' };
-
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-        });
     }
 
     optionsLoaded(options) {
-        this.$trayEnabled.prop("checked", options['disableTray'] !== 'true');
+        this.$trayEnabled.prop("checked", options.disableTray !== 'true');
 
-        this.$eraseEntitiesAfterTimeInSeconds.val(options['eraseEntitiesAfterTimeInSeconds']);
+        this.$eraseEntitiesAfterTimeInSeconds.val(options.eraseEntitiesAfterTimeInSeconds);
-        this.$noteRevisionsTimeInterval.val(options['noteRevisionSnapshotTimeInterval']);
+        this.$noteRevisionsTimeInterval.val(options.noteRevisionSnapshotTimeInterval);
 
-        const checkForUpdates = options['checkForUpdates'] === 'true';
+        this.setCheckboxState(this.$checkForUpdates, options.checkForUpdates);
-        this.$checkForUpdates.prop('checked', checkForUpdates);
     }
 }

src/public/app/widgets/dialogs/options/password.js

@@ -73,16 +73,8 @@ export default class PasswordOptions extends OptionsTab {
         this.$changePasswordForm.on('submit', () => this.save());
 
         this.$protectedSessionTimeout = this.$widget.find("#protected-session-timeout-in-seconds");
-
+        this.$protectedSessionTimeout.on('change', () =>
-        this.$protectedSessionTimeout.on('change', () => {
+            this.updateOption('protectedSessionTimeout', this.$protectedSessionTimeout.val()));
-            const protectedSessionTimeout = this.$protectedSessionTimeout.val();
-
-            server.put('options', { 'protectedSessionTimeout': protectedSessionTimeout }).then(() => {
-                toastService.showMessage("Options change have been saved.");
-            });
-
-            return false;
-        });
     }
 
     optionsLoaded(options) {
@@ -91,7 +83,7 @@ export default class PasswordOptions extends OptionsTab {
         this.$widget.find("#old-password-form-group").toggle(isPasswordSet);
         this.$passwordHeading.text(isPasswordSet ? 'Change password' : 'Set password');
         this.$savePasswordButton.text(isPasswordSet ? 'Change password' : 'Set password');
-        this.$protectedSessionTimeout.val(options['protectedSessionTimeout']);
+        this.$protectedSessionTimeout.val(options.protectedSessionTimeout);
     }
 
     save() {

src/public/app/widgets/dialogs/options/shortcuts.js

@@ -85,10 +85,9 @@ export default class KeyboardShortcutsOptions extends OptionsTab {
                               .map(shortcut => shortcut.replace("+Comma", "+,"))
                               .filter(shortcut => !!shortcut);
 
-            const opts = {};
+            const optionName = 'keyboardShortcuts' + actionName.substr(0, 1).toUpperCase() + actionName.substr(1);
-            opts['keyboardShortcuts' + actionName.substr(0, 1).toUpperCase() + actionName.substr(1)] = JSON.stringify(shortcuts);
 
-            server.put('options', opts);
+            this.updateOption(optionName, JSON.stringify(shortcuts));
         });
 
         this.$widget.find("#options-keyboard-shortcuts-set-all-to-default").on('click', async () => {

src/public/app/widgets/dialogs/options/spellcheck.js

@@ -1,16 +1,7 @@
 import utils from "../../../services/utils.js";
-import server from "../../../services/server.js";
-import toastService from "../../../services/toast.js";
 import OptionsTab from "./options_tab.js";
 
 const TPL = `
-<style>
-.disabled-field {
-    opacity: 0.5;
-    pointer-events: none;
-}
-</style>
-
 <div class="options-section">
     <h4>Spell check</h4>
 
@@ -42,19 +33,11 @@ export default class SpellcheckOptions extends OptionsTab {
         this.$spellCheckEnabled = this.$widget.find("#spell-check-enabled");
         this.$spellCheckLanguageCode = this.$widget.find("#spell-check-language-code");
 
-        this.$spellCheckEnabled.on('change', () => {
+        this.$spellCheckEnabled.on('change', () =>
-            const opts = { 'spellCheckEnabled': this.$spellCheckEnabled.is(":checked") ? "true" : "false" };
+            this.updateCheckboxOption('spellCheckEnabled', this.$spellCheckEnabled));
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
 
-            return false;
+        this.$spellCheckLanguageCode.on('change', () =>
-        });
+            this.updateOption('spellCheckLanguageCode', this.$spellCheckLanguageCode.val()));
-
-        this.$spellCheckLanguageCode.on('change', () => {
-            const opts = { 'spellCheckLanguageCode': this.$spellCheckLanguageCode.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-
-            return false;
-        });
 
         this.$availableLanguageCodes = this.$widget.find("#available-language-codes");
 
@@ -66,7 +49,7 @@ export default class SpellcheckOptions extends OptionsTab {
     }
 
     optionsLoaded(options) {
-        this.$spellCheckEnabled.prop("checked", options['spellCheckEnabled'] === 'true');
+        this.setCheckboxState(this.$spellCheckEnabled, options.spellCheckEnabled);
-        this.$spellCheckLanguageCode.val(options['spellCheckLanguageCode']);
+        this.$spellCheckLanguageCode.val(options.spellCheckLanguageCode);
     }
 }

src/public/app/widgets/dialogs/options/sync.js

@@ -67,19 +67,17 @@ export default class SyncOptions extends OptionsTab {
     }
 
     optionsLoaded(options) {
-        this.$syncServerHost.val(options['syncServerHost']);
+        this.$syncServerHost.val(options.syncServerHost);
-        this.$syncServerTimeout.val(options['syncServerTimeout']);
+        this.$syncServerTimeout.val(options.syncServerTimeout);
-        this.$syncProxy.val(options['syncProxy']);
+        this.$syncProxy.val(options.syncProxy);
     }
 
     save() {
-        const opts = {
+        this.updateMultipleOptions({
             'syncServerHost': this.$syncServerHost.val(),
             'syncServerTimeout': this.$syncServerTimeout.val(),
             'syncProxy': this.$syncProxy.val()
-        };
+        });
-
-        server.put('options', opts).then(()  => toastService.showMessage("Options change have been saved."));
 
         return false;
     }

src/public/app/widgets/dialogs/options/text_notes.js

@@ -42,8 +42,7 @@ export default class TextNotesOptions extends OptionsTab {
 
     lazyRender() {
         this.$widget = $(TPL);
-
+        this.$body = $("body");
-        this.$body = this.$widget.find("body");
 
         this.$headingStyle = this.$widget.find("#heading-style");
         this.$headingStyle.on('change', () => {
@@ -51,24 +50,16 @@ export default class TextNotesOptions extends OptionsTab {
 
             this.toggleBodyClass("heading-style-", newHeadingStyle);
 
-            server.put('options/headingStyle/' + newHeadingStyle);
+            this.updateOption('headingStyle', newHeadingStyle);
         });
 
         this.$minTocHeadings = this.$widget.find("#min-toc-headings");
-        this.$minTocHeadings.on('change', () => {
+        this.$minTocHeadings.on('change', () =>
-            const minTocHeadings = this.$minTocHeadings.val();
+            this.updateOption('minTocHeadings', this.$minTocHeadings.val()));
-
-            server.put('options/minTocHeadings/' + minTocHeadings);
-        });
 
         this.$autoReadonlySizeText = this.$widget.find("#auto-readonly-size-text");
-
+        this.$autoReadonlySizeText.on('change', () =>
-        this.$autoReadonlySizeText.on('change', () => {
+            this.updateOption('autoReadonlySizeText', this.$autoReadonlySizeText.val()));
-            const opts = { 'autoReadonlySizeText': this.$autoReadonlySizeText.val() };
-            server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
-
-            return false;
-        });
     }
 
     toggleBodyClass(prefix, value) {