')
+ .attr("id", "options-" + child.constructor.name)
+ );
+ }
}
async showOptionsEvent({openTab}) {
- const options = await server.get('options');
+ const optionPromise = server.get('options');
- utils.openDialog(this.$widget);
+ for (const child of this.children) {
+ child.lazyRender();
- (await Promise.all([
- import('./options/appearance.js'),
- import('./options/shortcuts.js'),
- import('./options/text_notes.js'),
- import('./options/code_notes.js'),
- import('./options/images.js'),
- import('./options/spellcheck.js'),
- import('./options/password.js'),
- import('./options/etapi.js'),
- import('./options/backup.js'),
- import('./options/sync.js'),
- import('./options/other.js'),
- import('./options/advanced.js')
- ]))
- .map(m => new m.default)
- .forEach(tab => {
- if (tab.optionsLoaded) {
- tab.optionsLoaded(options)
- }
- });
-
- if (openTab) {
- $(`.nav-link[href='#options-${openTab}']`).trigger("click");
+ 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");
}
}
diff --git a/src/public/app/widgets/dialogs/options/advanced.js b/src/public/app/widgets/dialogs/options/advanced.js
index 5e7e4758e..0599044d8 100644
--- a/src/public/app/widgets/dialogs/options/advanced.js
+++ b/src/public/app/widgets/dialogs/options/advanced.js
@@ -1,5 +1,6 @@
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
const TPL = `
Sync
@@ -46,17 +47,19 @@ const TPL = `
`;
-export default class AdvancedOptions {
- constructor() {
- $("#options-advanced").html(TPL);
+export default class AdvancedOptions extends OptionsTab {
+ get tabTitle() { return "Advanced" }
+
+ lazyRender() {
+ this.$widget = $(TPL);
- this.$forceFullSyncButton = $("#force-full-sync-button");
- this.$fillEntityChangesButton = $("#fill-entity-changes-button");
- this.$anonymizeFullButton = $("#anonymize-full-button");
- this.$anonymizeLightButton = $("#anonymize-light-button");
- this.$vacuumDatabaseButton = $("#vacuum-database-button");
- this.$findAndFixConsistencyIssuesButton = $("#find-and-fix-consistency-issues-button");
- this.$checkIntegrityButton = $("#check-integrity-button");
+ this.$forceFullSyncButton = this.$widget.find("#force-full-sync-button");
+ this.$fillEntityChangesButton = this.$widget.find("#fill-entity-changes-button");
+ this.$anonymizeFullButton = this.$widget.find("#anonymize-full-button");
+ this.$anonymizeLightButton = this.$widget.find("#anonymize-light-button");
+ this.$vacuumDatabaseButton = this.$widget.find("#vacuum-database-button");
+ this.$findAndFixConsistencyIssuesButton = this.$widget.find("#find-and-fix-consistency-issues-button");
+ this.$checkIntegrityButton = this.$widget.find("#check-integrity-button");
this.$forceFullSyncButton.on('click', async () => {
await server.post('sync/force-full-sync');
diff --git a/src/public/app/widgets/dialogs/options/appearance.js b/src/public/app/widgets/dialogs/options/appearance.js
index fe1abc6d3..2e610a687 100644
--- a/src/public/app/widgets/dialogs/options/appearance.js
+++ b/src/public/app/widgets/dialogs/options/appearance.js
@@ -1,6 +1,7 @@
import server from "../../../services/server.js";
import utils from "../../../services/utils.js";
import appContext from "../../../services/app_context.js";
+import OptionsTab from "./options_tab.js";
const FONT_FAMILIES = [
{ value: "theme", label: "Theme defined" },
@@ -174,33 +175,35 @@ const TPL = `
`;
-export default class ApperanceOptions {
- constructor() {
- $("#options-appearance").html(TPL);
+export default class AppearanceOptions extends OptionsTab {
+ get tabTitle() { return "Appearance" }
+
+ lazyRender() {
+ this.$widget = $(TPL);
- this.$zoomFactorSelect = $("#zoom-factor-select");
- this.$nativeTitleBarSelect = $("#native-title-bar-select");
+ this.$zoomFactorSelect = this.$widget.find("#zoom-factor-select");
+ this.$nativeTitleBarSelect = this.$widget.find("#native-title-bar-select");
- this.$themeSelect = $("#theme-select");
- this.$overrideThemeFonts = $("#override-theme-fonts");
+ this.$themeSelect = this.$widget.find("#theme-select");
+ this.$overrideThemeFonts = this.$widget.find("#override-theme-fonts");
- this.$overridenFontSettings = $("#overriden-font-settings");
+ this.$overridenFontSettings = this.$widget.find("#overriden-font-settings");
- this.$mainFontSize = $("#main-font-size");
- this.$mainFontFamily = $("#main-font-family");
+ this.$mainFontSize = this.$widget.find("#main-font-size");
+ this.$mainFontFamily = this.$widget.find("#main-font-family");
- this.$treeFontSize = $("#tree-font-size");
- this.$treeFontFamily = $("#tree-font-family");
+ this.$treeFontSize = this.$widget.find("#tree-font-size");
+ this.$treeFontFamily = this.$widget.find("#tree-font-family");
- this.$detailFontSize = $("#detail-font-size");
- this.$detailFontFamily = $("#detail-font-family");
+ this.$detailFontSize = this.$widget.find("#detail-font-size");
+ this.$detailFontFamily = this.$widget.find("#detail-font-family");
- this.$monospaceFontSize = $("#monospace-font-size");
- this.$monospaceFontFamily = $("#monospace-font-family");
+ this.$monospaceFontSize = this.$widget.find("#monospace-font-size");
+ this.$monospaceFontFamily = this.$widget.find("#monospace-font-family");
- $(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
+ this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
- this.$body = $("body");
+ this.$body = this.$widget.find("body");
this.$themeSelect.on('change', async () => {
const newTheme = this.$themeSelect.val();
@@ -237,7 +240,7 @@ export default class ApperanceOptions {
this['$' + optionName].on('change', () => server.put(`options/${optionName}/${this['$' + optionName].val()}`));
}
- this.$maxContentWidth = $("#max-content-width");
+ this.$maxContentWidth = this.$widget.find("#max-content-width");
this.$maxContentWidth.on('change', async () => {
const maxContentWidth = this.$maxContentWidth.val();
diff --git a/src/public/app/widgets/dialogs/options/backup.js b/src/public/app/widgets/dialogs/options/backup.js
index ac24da58b..fb9dabd7a 100644
--- a/src/public/app/widgets/dialogs/options/backup.js
+++ b/src/public/app/widgets/dialogs/options/backup.js
@@ -1,5 +1,6 @@
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
const TPL = `
Automatic backup
@@ -32,11 +33,13 @@ const TPL = `
`;
-export default class BackupOptions {
- constructor() {
- $("#options-backup").html(TPL);
+export default class BackupOptions extends OptionsTab {
+ get tabTitle() { return "Backup" }
+
+ lazyRender() {
+ this.$widget = $(TPL);
- this.$backupDatabaseButton = $("#backup-database-button");
+ this.$backupDatabaseButton = this.$widget.find("#backup-database-button");
this.$backupDatabaseButton.on('click', async () => {
const {backupFile} = await server.post('database/backup-database');
@@ -44,9 +47,9 @@ export default class BackupOptions {
toastService.showMessage("Database has been backed up to " + backupFile, 10000);
});
- this.$dailyBackupEnabled = $("#daily-backup-enabled");
- this.$weeklyBackupEnabled = $("#weekly-backup-enabled");
- this.$monthlyBackupEnabled = $("#monthly-backup-enabled");
+ this.$dailyBackupEnabled = this.$widget.find("#daily-backup-enabled");
+ this.$weeklyBackupEnabled = this.$widget.find("#weekly-backup-enabled");
+ this.$monthlyBackupEnabled = this.$widget.find("#monthly-backup-enabled");
this.$dailyBackupEnabled.on('change', () => {
const opts = { 'dailyBackupEnabled': this.$dailyBackupEnabled.is(":checked") ? "true" : "false" };
diff --git a/src/public/app/widgets/dialogs/options/code_notes.js b/src/public/app/widgets/dialogs/options/code_notes.js
index be4079ee5..e894aa0e7 100644
--- a/src/public/app/widgets/dialogs/options/code_notes.js
+++ b/src/public/app/widgets/dialogs/options/code_notes.js
@@ -2,6 +2,7 @@ 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 OptionsTab from "./options_tab.js";
const TPL = `
@@ -39,26 +40,28 @@ const TPL = `
`;
-export default class CodeNotesOptions {
- constructor() {
- $("#options-code-notes").html(TPL);
+export default class CodeNotesOptions extends OptionsTab {
+ get tabTitle() { return "Code notes" }
+
+ lazyRender() {
+ this.$widget = $(TPL);
- this.$vimKeymapEnabled = $("#vim-keymap-enabled");
+ this.$vimKeymapEnabled = this.$widget.find("#vim-keymap-enabled");
this.$vimKeymapEnabled.on('change', () => {
const opts = { 'vimKeymapEnabled': this.$vimKeymapEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
- this.$codeLineWrapEnabled = $("#line-wrap-enabled");
+ this.$codeLineWrapEnabled = this.$widget.find("#line-wrap-enabled");
this.$codeLineWrapEnabled.on('change', () => {
const opts = { 'codeLineWrapEnabled': this.$codeLineWrapEnabled.is(":checked") ? "true" : "false" };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
return false;
});
- this.$mimeTypes = $("#options-mime-types");
+ this.$mimeTypes = this.$widget.find("#options-mime-types");
- this.$autoReadonlySizeCode = $("#auto-readonly-size-code");
+ this.$autoReadonlySizeCode = this.$widget.find("#auto-readonly-size-code");
this.$autoReadonlySizeCode.on('change', () => {
const opts = { 'autoReadonlySizeCode': this.$autoReadonlySizeCode.val() };
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
@@ -96,7 +99,7 @@ export default class CodeNotesOptions {
const enabledMimeTypes = [];
this.$mimeTypes.find("input:checked").each(
- (i, el) => enabledMimeTypes.push($(el).attr("data-mime-type")));
+ (i, el) => enabledMimeTypes.push(this.$widget.find(el).attr("data-mime-type")));
await options.save('codeNotesMimeTypes', JSON.stringify(enabledMimeTypes));
diff --git a/src/public/app/widgets/dialogs/options/etapi.js b/src/public/app/widgets/dialogs/options/etapi.js
index e25c85ee2..43e58b9a2 100644
--- a/src/public/app/widgets/dialogs/options/etapi.js
+++ b/src/public/app/widgets/dialogs/options/etapi.js
@@ -1,6 +1,7 @@
import server from "../../../services/server.js";
import dialogService from "../../dialog.js";
import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
const TPL = `
ETAPI
@@ -45,11 +46,13 @@ const TPL = `
}
`;
-export default class EtapiOptions {
- constructor() {
- $("#options-etapi").html(TPL);
+export default class EtapiOptions extends OptionsTab {
+ get tabTitle() { return "ETAPI" }
+
+ lazyRender() {
+ this.$widget = $(TPL);
- $("#create-etapi-token").on("click", async () => {
+ this.$widget.find("#create-etapi-token").on("click", async () => {
const tokenName = await dialogService.prompt({
title: "New ETAPI token",
message: "Please enter new token's name",
@@ -76,8 +79,8 @@ export default class EtapiOptions {
}
async refreshTokens() {
- const $noTokensYet = $("#no-tokens-yet");
- const $tokensTable = $("#tokens-table");
+ const $noTokensYet = this.$widget.find("#no-tokens-yet");
+ const $tokensTable = this.$widget.find("#tokens-table");
const tokens = await server.get('etapi-tokens');
diff --git a/src/public/app/widgets/dialogs/options/images.js b/src/public/app/widgets/dialogs/options/images.js
index 8965bf9f1..5cf5db1dc 100644
--- a/src/public/app/widgets/dialogs/options/images.js
+++ b/src/public/app/widgets/dialogs/options/images.js
@@ -1,5 +1,6 @@
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
const TPL = `
@@ -30,12 +31,14 @@ const TPL = `
`;
-export default class ImageOptions {
- constructor() {
- $("#options-images").html(TPL);
+export default class ImageOptions extends OptionsTab {
+ get tabTitle() { return "Images" }
+
+ lazyRender() {
+ this.$widget = $(TPL);
- this.$imageMaxWidthHeight = $("#image-max-width-height");
- this.$imageJpegQuality = $("#image-jpeg-quality");
+ this.$imageMaxWidthHeight = this.$widget.find("#image-max-width-height");
+ this.$imageJpegQuality = this.$widget.find("#image-jpeg-quality");
this.$imageMaxWidthHeight.on('change', () => {
const opts = { 'imageMaxWidthHeight': this.$imageMaxWidthHeight.val() };
@@ -51,7 +54,7 @@ export default class ImageOptions {
return false;
});
- this.$downloadImagesAutomatically = $("#download-images-automatically");
+ this.$downloadImagesAutomatically = this.$widget.find("#download-images-automatically");
this.$downloadImagesAutomatically.on("change", () => {
const isChecked = this.$downloadImagesAutomatically.prop("checked");
@@ -60,8 +63,8 @@ export default class ImageOptions {
server.put('options', opts).then(() => toastService.showMessage("Options change have been saved."));
});
- this.$enableImageCompression = $("#image-compresion-enabled");
- this.$imageCompressionWrapper = $("#image-compression-enabled-wraper");
+ this.$enableImageCompression = this.$widget.find("#image-compresion-enabled");
+ this.$imageCompressionWrapper = this.$widget.find("#image-compression-enabled-wraper");
this.setImageCompression = (isChecked) => {
if (isChecked) {
diff --git a/src/public/app/widgets/dialogs/options/options_tab.js b/src/public/app/widgets/dialogs/options/options_tab.js
new file mode 100644
index 000000000..fa0104964
--- /dev/null
+++ b/src/public/app/widgets/dialogs/options/options_tab.js
@@ -0,0 +1,5 @@
+import BasicWidget from "../../basic_widget.js";
+
+export default class OptionsTab extends BasicWidget {
+
+}
\ No newline at end of file
diff --git a/src/public/app/widgets/dialogs/options/other.js b/src/public/app/widgets/dialogs/options/other.js
index 1ba16369d..2ff3bcdee 100644
--- a/src/public/app/widgets/dialogs/options/other.js
+++ b/src/public/app/widgets/dialogs/options/other.js
@@ -1,5 +1,6 @@
import server from "../../../services/server.js";
import toastService from "../../../services/toast.js";
+import OptionsTab from "./options_tab.js";
const TPL = `
@@ -52,11 +53,13 @@ const TPL = `