settings views

app/scripts/views/app-view.js

@@ -264,8 +264,8 @@ class AppView extends View {
         this.hidePanelView();
         this.hideOpenFile();
         this.hideKeyChange();
-        this.views.settings = new SettingsView({ model: this.model });
-        this.views.settings.setElement(this.$el.find('.app__body')).render();
+        this.views.settings = new SettingsView(this.mode);
+        this.views.settings.render();
         if (!selectedMenuItem) {
             selectedMenuItem = this.model.menu.generalSection.get('items').first();
         }

app/scripts/views/settings/settings-about-view.js

@@ -1,12 +1,13 @@
-import Backbone from 'backbone';
+import { View } from 'view-engine/view';
 import { RuntimeInfo } from 'comp/app/runtime-info';
 import { Links } from 'const/links';
+import template from 'templates/settings/settings-about.hbs';
 
-const SettingsAboutView = Backbone.View.extend({
-    template: require('templates/settings/settings-about.hbs'),
+class SettingsAboutView extends View {
+    template = template;
 
     render() {
-        this.renderTemplate({
+        super.render({
             version: RuntimeInfo.version,
             licenseLink: Links.License,
             licenseLinkApache: Links.LicenseApache,
@@ -14,6 +15,6 @@ const SettingsAboutView = Backbone.View.extend({
             donationLink: Links.Donation
         });
     }
-});
+}
 
 export { SettingsAboutView };

app/scripts/views/settings/settings-file-view.js

@@ -1,5 +1,5 @@
-import Backbone from 'backbone';
 import kdbxweb from 'kdbxweb';
+import { View } from 'view-engine/view';
 import { Storage } from 'storage';
 import { Shortcuts } from 'comp/app/shortcuts';
 import { Launcher } from 'comp/launcher';
@@ -12,14 +12,15 @@ import { PasswordGenerator } from 'util/generators/password-generator';
 import { Locale } from 'util/locale';
 import { FileSaver } from 'util/ui/file-saver';
 import { OpenConfigView } from 'views/open-config-view';
+import template from 'templates/settings/settings-file.hbs';
 
 const DefaultBackupPath = 'Backups/{name}.{date}.bak';
 const DefaultBackupSchedule = '1w';
 
-const SettingsFileView = Backbone.View.extend({
-    template: require('templates/settings/settings-file.hbs'),
+class SettingsFileView extends View {
+    template = template;
 
-    events: {
+    events = {
         'click .settings__file-button-save-default': 'saveDefault',
         'click .settings__file-button-save-choose': 'toggleChooser',
         'click .settings__file-button-close': 'closeFile',
@@ -50,15 +51,16 @@ const SettingsFileView = Backbone.View.extend({
         'input #settings__file-key-rounds': 'changeKeyRounds',
         'input #settings__file-key-change-force': 'changeKeyChangeForce',
         'input .settings__input-kdf': 'changeKdfParameter'
-    },
+    };
 
-    appModel: null,
+    appModel = null;
 
-    initialize() {
+    constructor(model, options) {
+        super(model, options);
         this.listenTo(this.model, 'change:syncing change:syncError change:syncDate', () => {
             setTimeout(() => this.render(), 0);
         });
-    },
+    }
 
     render() {
         const storageProviders = [];
@@ -81,7 +83,7 @@ const SettingsFileView = Backbone.View.extend({
         });
         storageProviders.sort((x, y) => (x.uipos || Infinity) - (y.uipos || Infinity));
         const backup = this.model.get('backup');
-        this.renderTemplate({
+        super.render({
             cmd: Shortcuts.actionShortcutSymbol(true),
             supportFiles: !!Launcher,
             desktopLink: Links.Desktop,
@@ -122,13 +124,13 @@ const SettingsFileView = Backbone.View.extend({
                 .text(Locale.setFilePassChanged);
         }
         this.renderKeyFileSelect();
-    },
+    }
 
     kdfParametersToUi(kdfParameters) {
         return kdfParameters
             ? _.extend({}, kdfParameters, { memory: Math.round(kdfParameters.memory / 1024) })
             : null;
-    },
+    }
 
     renderKeyFileSelect() {
         const keyFileName = this.model.get('keyFileName');
@@ -170,7 +172,7 @@ const SettingsFileView = Backbone.View.extend({
         } else if (oldKeyFileName && keyFileName === oldKeyFileName && !keyFileChanged) {
             sel.val('old');
         }
-    },
+    }
 
     validatePassword(continueCallback) {
         if (!this.model.get('passwordLength')) {
@@ -187,7 +189,7 @@ const SettingsFileView = Backbone.View.extend({
             return false;
         }
         return true;
-    },
+    }
 
     save(arg) {
         if (!arg) {
@@ -205,15 +207,15 @@ const SettingsFileView = Backbone.View.extend({
         }
 
         this.appModel.syncFile(this.model, arg);
-    },
+    }
 
     saveDefault() {
         this.save();
-    },
+    }
 
     toggleChooser() {
         this.$el.find('.settings__file-save-choose').toggleClass('hide');
-    },
+    }
 
     saveToFile(skipValidation) {
         if (skipValidation !== true && !this.validatePassword(this.saveToFile.bind(this, true))) {
@@ -251,21 +253,21 @@ const SettingsFileView = Backbone.View.extend({
                 }
             });
         }
-    },
+    }
 
     saveToXml() {
         this.model.getXml(xml => {
             const blob = new Blob([xml], { type: 'text/xml' });
             FileSaver.saveAs(blob, this.model.get('name') + '.xml');
         });
-    },
+    }
 
     saveToHtml() {
         this.model.getHtml(html => {
             const blob = new Blob([html], { type: 'text/html' });
             FileSaver.saveAs(blob, this.model.get('name') + '.html');
         });
-    },
+    }
 
     saveToStorage(e) {
         if (this.model.get('syncing') || this.model.get('demo')) {
@@ -352,7 +354,7 @@ const SettingsFileView = Backbone.View.extend({
                 }
             });
         }
-    },
+    }
 
     closeFile() {
         if (this.model.get('modified')) {
@@ -372,11 +374,11 @@ const SettingsFileView = Backbone.View.extend({
         } else {
             this.closeFileNoCheck();
         }
-    },
+    }
 
     closeFileNoCheck() {
         this.appModel.closeFile(this.model);
-    },
+    }
 
     keyFileChange(e) {
         switch (e.target.value) {
@@ -390,28 +392,28 @@ const SettingsFileView = Backbone.View.extend({
                 this.clearKeyFile();
                 break;
         }
-    },
+    }
 
     selectOldKeyFile() {
         this.model.resetKeyFile();
         this.renderKeyFileSelect();
-    },
+    }
 
     generateKeyFile() {
         const keyFile = this.model.generateAndSetKeyFile();
         const blob = new Blob([keyFile], { type: 'application/octet-stream' });
         FileSaver.saveAs(blob, this.model.get('name') + '.key');
         this.renderKeyFileSelect();
-    },
+    }
 
     clearKeyFile() {
         this.model.removeKeyFile();
         this.renderKeyFileSelect();
-    },
+    }
 
     triggerSelectFile() {
         this.$el.find('#settings__file-file-select').click();
-    },
+    }
 
     fileSelected(e) {
         const file = e.target.files[0];
@@ -422,13 +424,13 @@ const SettingsFileView = Backbone.View.extend({
             this.renderKeyFileSelect();
         };
         reader.readAsArrayBuffer(file);
-    },
+    }
 
     focusMasterPass(e) {
         e.target.value = '';
         e.target.setAttribute('type', 'text');
         this.model.set('passwordChanged', false);
-    },
+    }
 
     changeMasterPass(e) {
         if (!e.target.value) {
@@ -443,7 +445,7 @@ const SettingsFileView = Backbone.View.extend({
                 this.$el.find('.settings__file-master-pass-warning').show();
             }
         }
-    },
+    }
 
     blurMasterPass(e) {
         if (!e.target.value) {
@@ -453,18 +455,18 @@ const SettingsFileView = Backbone.View.extend({
             this.$el.find('.settings__file-master-pass-warning').hide();
         }
         e.target.setAttribute('type', 'password');
-    },
+    }
 
     resetConfirmMasterPass() {
         this.$el.find('#settings__file-confirm-master-pass').val('');
         this.$el.find('#settings__file-confirm-master-pass-group').hide();
         this.$el.find('#settings__file-master-pass-warning-text').text(Locale.setFilePassChange);
-    },
+    }
 
     focusConfirmMasterPass(e) {
         e.target.value = '';
         e.target.setAttribute('type', 'text');
-    },
+    }
 
     blurConfirmMasterPass(e) {
         e.target.setAttribute('type', 'password');
@@ -483,7 +485,7 @@ const SettingsFileView = Backbone.View.extend({
             this.$el.find('.settings__file-confirm-master-pass-warning').show();
             this.model.resetPassword();
         }
-    },
+    }
 
     changeName(e) {
         const value = $.trim(e.target.value);
@@ -491,12 +493,12 @@ const SettingsFileView = Backbone.View.extend({
             return;
         }
         this.model.setName(value);
-    },
+    }
 
     changeDefUser(e) {
         const value = $.trim(e.target.value);
         this.model.setDefaultUser(value);
-    },
+    }
 
     changeBackupEnabled(e) {
         const enabled = e.target.checked;
@@ -536,30 +538,30 @@ const SettingsFileView = Backbone.View.extend({
         this.$el.find('.settings__file-backups').toggleClass('hide', !enabled);
         backup.enabled = enabled;
         this.setBackup(backup);
-    },
+    }
 
     changeBackupPath(e) {
         const backup = this.model.get('backup');
         backup.path = e.target.value.trim();
         this.setBackup(backup);
-    },
+    }
 
     changeBackupStorage(e) {
         const backup = this.model.get('backup');
         backup.storage = e.target.value;
         this.setBackup(backup);
-    },
+    }
 
     changeBackupSchedule(e) {
         const backup = this.model.get('backup');
         backup.schedule = e.target.value;
         this.setBackup(backup);
-    },
+    }
 
     setBackup(backup) {
         this.model.set('backup', backup);
         this.appModel.setFileBackup(this.model.id, backup);
-    },
+    }
 
     backupFile() {
         if (this.backupInProgress) {
@@ -597,11 +599,11 @@ const SettingsFileView = Backbone.View.extend({
                 }
             });
         });
-    },
+    }
 
     changeTrash(e) {
         this.model.setRecycleBinEnabled(e.target.checked);
-    },
+    }
 
     changeHistoryLength(e) {
         if (!e.target.validity.valid) {
@@ -613,7 +615,7 @@ const SettingsFileView = Backbone.View.extend({
             return;
         }
         this.model.setHistoryMaxItems(value);
-    },
+    }
 
     changeHistorySize(e) {
         if (!e.target.validity.valid) {
@@ -625,18 +627,18 @@ const SettingsFileView = Backbone.View.extend({
             return;
         }
         this.model.setHistoryMaxSize(value * 1024 * 1024);
-    },
+    }
 
     changeFormatVersion(e) {
         const version = +e.target.value;
         this.model.setFormatVersion(version);
         this.render();
-    },
+    }
 
     changeKdf(e) {
         this.model.setKdf(e.target.value);
         this.render();
-    },
+    }
 
     changeKeyRounds(e) {
         if (!e.target.validity.valid) {
@@ -648,7 +650,7 @@ const SettingsFileView = Backbone.View.extend({
             return;
         }
         this.model.setKeyEncryptionRounds(value);
-    },
+    }
 
     changeKeyChangeForce(e) {
         if (!e.target.validity.valid) {
@@ -659,7 +661,7 @@ const SettingsFileView = Backbone.View.extend({
             value = -1;
         }
         this.model.setKeyChange(true, value);
-    },
+    }
 
     changeKdfParameter(e) {
         if (!e.target.validity.valid) {
@@ -676,6 +678,6 @@ const SettingsFileView = Backbone.View.extend({
             this.model.setKdfParameter(field, value);
         }
     }
-});
+}
 
 export { SettingsFileView };

app/scripts/views/settings/settings-general-view.js

@@ -1,5 +1,6 @@
-import { AutoType } from 'auto-type';
 import Backbone from 'backbone';
+import { View } from 'view-engine/view';
+import { AutoType } from 'auto-type';
 import { Storage } from 'storage';
 import { RuntimeInfo } from 'comp/app/runtime-info';
 import { Updater } from 'comp/app/updater';
@@ -15,11 +16,12 @@ import { DateFormat } from 'util/formatting/date-format';
 import { Locale } from 'util/locale';
 import { SettingsLogsView } from 'views/settings/settings-logs-view';
 import { SettingsPrvView } from 'views/settings/settings-prv-view';
+import template from 'templates/settings/settings-general.hbs';
 
-const SettingsGeneralView = Backbone.View.extend({
-    template: require('templates/settings/settings-general.hbs'),
+class SettingsGeneralView extends View {
+    template = template;
 
-    events: {
+    events = {
         'change .settings__general-theme': 'changeTheme',
         'change .settings__general-locale': 'changeLocale',
         'change .settings__general-font-size': 'changeFontSize',
@@ -49,15 +51,13 @@ const SettingsGeneralView = Backbone.View.extend({
         'click .settings__general-try-beta-link': 'tryBeta',
         'click .settings__general-show-logs-link': 'showLogs',
         'click .settings__general-reload-app-link': 'reloadApp'
-    },
+    };
 
-    views: null,
-
-    initialize() {
-        this.views = {};
-        this.listenTo(UpdateModel.instance, 'change:status', this.render, this);
-        this.listenTo(UpdateModel.instance, 'change:updateStatus', this.render, this);
-    },
+    constructor(model, options) {
+        super(model, options);
+        this.listenTo(UpdateModel.instance, 'change:status', this.render);
+        this.listenTo(UpdateModel.instance, 'change:updateStatus', this.render);
+    }
 
     render() {
         const updateReady = UpdateModel.instance.get('updateStatus') === 'ready';
@@ -65,7 +65,7 @@ const SettingsGeneralView = Backbone.View.extend({
         const updateManual = UpdateModel.instance.get('updateManual');
         const storageProviders = this.getStorageProviders();
 
-        this.renderTemplate({
+        super.render({
             themes: _.mapObject(SettingsManager.allThemes, theme => Locale[theme]),
             activeTheme: AppSettingsModel.instance.get('theme'),
             locales: SettingsManager.allLocales,
@@ -110,7 +110,7 @@ const SettingsGeneralView = Backbone.View.extend({
             showReloadApp: Features.isStandalone
         });
         this.renderProviderViews(storageProviders);
-    },
+    }
 
     renderProviderViews(storageProviders) {
         storageProviders.forEach(function(prv) {
@@ -118,13 +118,14 @@ const SettingsGeneralView = Backbone.View.extend({
                 this.views[prv.name].remove();
             }
             if (prv.hasConfig) {
-                this.views[prv.name] = new SettingsPrvView({
-                    el: this.$el.find('.settings__general-' + prv.name),
-                    model: prv
-                }).render();
+                const prvView = new SettingsPrvView(prv, {
+                    parent: this.$el.find('.settings__general-' + prv.name)[0]
+                });
+                this.views[prv.name] = prvView;
+                prvView.render();
             }
         }, this);
-    },
+    }
 
     getUpdateInfo() {
         switch (UpdateModel.instance.get('status')) {
@@ -181,7 +182,7 @@ const SettingsGeneralView = Backbone.View.extend({
             default:
                 return Locale.setGenNeverChecked;
         }
-    },
+    }
 
     getStorageProviders() {
         const storageProviders = [];
@@ -195,14 +196,14 @@ const SettingsGeneralView = Backbone.View.extend({
         return storageProviders.map(sp => ({
             name: sp.name,
             enabled: sp.enabled,
-            hasConfig: sp.getSettingsConfig
+            hasConfig: !!sp.getSettingsConfig
         }));
-    },
+    }
 
     changeTheme(e) {
         const theme = e.target.value;
         AppSettingsModel.instance.set('theme', theme);
-    },
+    }
 
     changeLocale(e) {
         const locale = e.target.value;
@@ -214,27 +215,27 @@ const SettingsGeneralView = Backbone.View.extend({
             return;
         }
         AppSettingsModel.instance.set('locale', locale);
-    },
+    }
 
     changeFontSize(e) {
         const fontSize = +e.target.value;
         AppSettingsModel.instance.set('fontSize', fontSize);
-    },
+    }
 
     changeTitlebarStyle(e) {
         const titlebarStyle = e.target.value;
         AppSettingsModel.instance.set('titlebarStyle', titlebarStyle);
-    },
+    }
 
     changeClipboard(e) {
         const clipboardSeconds = +e.target.value;
         AppSettingsModel.instance.set('clipboardSeconds', clipboardSeconds);
-    },
+    }
 
     changeIdleMinutes(e) {
         const idleMinutes = +e.target.value;
         AppSettingsModel.instance.set('idleMinutes', idleMinutes);
-    },
+    }
 
     changeAutoUpdate(e) {
         const autoUpdate = e.target.value || false;
@@ -242,70 +243,70 @@ const SettingsGeneralView = Backbone.View.extend({
         if (autoUpdate) {
             Updater.scheduleNextCheck();
         }
-    },
+    }
 
     checkUpdate() {
         Updater.check(true);
-    },
+    }
 
     changeAutoSave(e) {
         const autoSave = e.target.checked || false;
         AppSettingsModel.instance.set('autoSave', autoSave);
-    },
+    }
 
     changeAutoSaveInterval(e) {
         const autoSaveInterval = Number(e.target.value) || 0;
         AppSettingsModel.instance.set('autoSaveInterval', autoSaveInterval);
-    },
+    }
 
     changeRememberKeyFiles(e) {
         const rememberKeyFiles = e.target.value || false;
         AppSettingsModel.instance.set('rememberKeyFiles', rememberKeyFiles);
         this.appModel.clearStoredKeyFiles();
-    },
+    }
 
     changeMinimize(e) {
         const minimizeOnClose = e.target.checked || false;
         AppSettingsModel.instance.set('minimizeOnClose', minimizeOnClose);
-    },
+    }
 
     changeLockOnMinimize(e) {
         const lockOnMinimize = e.target.checked || false;
         AppSettingsModel.instance.set('lockOnMinimize', lockOnMinimize);
-    },
+    }
 
     changeLockOnCopy(e) {
         const lockOnCopy = e.target.checked || false;
         AppSettingsModel.instance.set('lockOnCopy', lockOnCopy);
-    },
+    }
 
     changeLockOnAutoType(e) {
         const lockOnAutoType = e.target.checked || false;
         AppSettingsModel.instance.set('lockOnAutoType', lockOnAutoType);
-    },
+    }
 
     changeLockOnOsLock(e) {
         const lockOnOsLock = e.target.checked || false;
         AppSettingsModel.instance.set('lockOnOsLock', lockOnOsLock);
-    },
+    }
 
     changeTableView(e) {
         const tableView = e.target.checked || false;
         AppSettingsModel.instance.set('tableView', tableView);
         Backbone.trigger('refresh');
-    },
+    }
 
     changeColorfulIcons(e) {
         const colorfulIcons = e.target.checked || false;
         AppSettingsModel.instance.set('colorfulIcons', colorfulIcons);
         Backbone.trigger('refresh');
-    },
+    }
 
     changeDirectAutotype(e) {
         const directAutotype = e.target.checked || false;
         AppSettingsModel.instance.set('directAutotype', directAutotype);
         Backbone.trigger('refresh');
-    },
+    }
 
     restartApp() {
         if (Launcher) {
@@ -313,23 +314,23 @@ const SettingsGeneralView = Backbone.View.extend({
         } else {
             window.location.reload();
         }
-    },
+    }
 
     downloadUpdate() {
         Launcher.openLink(Links.Desktop);
-    },
+    }
 
     installFoundUpdate() {
         Updater.update(true, () => {
             Launcher.requestRestart();
         });
-    },
+    }
 
     changeExpandGroups(e) {
         const expand = e.target.checked;
         AppSettingsModel.instance.set('expandGroups', expand);
         Backbone.trigger('refresh');
-    },
+    }
 
     changeStorageEnabled(e) {
         const storage = Storage[$(e.target).data('storage')];
@@ -340,20 +341,20 @@ const SettingsGeneralView = Backbone.View.extend({
                 .find('.settings__general-' + storage.name)
                 .toggleClass('hide', !e.target.checked);
         }
-    },
+    }
 
     showAdvancedSettings() {
         this.$el
             .find('.settings__general-show-advanced, .settings__general-advanced')
             .toggleClass('hide');
         this.scrollToBottom();
-    },
+    }
 
     openDevTools() {
         if (Launcher) {
             Launcher.openDevTools();
         }
-    },
+    }
 
     tryBeta() {
         if (this.appModel.files.hasUnsavedFiles()) {
@@ -364,25 +365,24 @@ const SettingsGeneralView = Backbone.View.extend({
         } else {
             location.href = Links.BetaWebApp;
         }
-    },
+    }
 
     showLogs() {
         if (this.views.logView) {
             this.views.logView.remove();
         }
-        this.views.logView = new SettingsLogsView({
-            el: this.$el.find('.settings__general-advanced')
-        }).render();
+        this.views.logView = new SettingsLogsView();
+        this.views.logView.render();
         this.scrollToBottom();
-    },
+    }
 
     reloadApp() {
         location.reload();
-    },
+    }
 
     scrollToBottom() {
         this.$el.closest('.scroller').scrollTop(this.$el.height());
     }
-});
+}
 
 export { SettingsGeneralView };

app/scripts/views/settings/settings-help-view.js

@@ -1,9 +1,10 @@
-import Backbone from 'backbone';
+import { View } from 'view-engine/view';
 import { RuntimeInfo } from 'comp/app/runtime-info';
 import { Links } from 'const/links';
+import template from 'templates/settings/settings-help.hbs';
 
-const SettingsHelpView = Backbone.View.extend({
-    template: require('templates/settings/settings-help.hbs'),
+class SettingsHelpView extends View {
+    template = template;
 
     render() {
         const appInfo =
@@ -19,7 +20,8 @@ const SettingsHelpView = Backbone.View.extend({
             '\n' +
             'User-Agent: ' +
             RuntimeInfo.userAgent;
-        this.renderTemplate({
+
+        super.render({
             issueLink:
                 Links.Repo +
                 '/issues/new?body=' +
@@ -29,6 +31,6 @@ const SettingsHelpView = Backbone.View.extend({
             appInfo: _.escape(appInfo)
         });
     }
-});
+}
 
 export { SettingsHelpView };

app/scripts/views/settings/settings-logs-view.js

@@ -1,9 +1,11 @@
-import Backbone from 'backbone';
+import { View } from 'view-engine/view';
 import { StringFormat } from 'util/formatting/string-format';
 import { Logger } from 'util/logger';
+import template from 'templates/settings/settings-logs-view.hbs';
 
-const SettingsLogsView = Backbone.View.extend({
-    template: require('templates/settings/settings-logs-view.hbs'),
+class SettingsLogsView extends View {
+    parent = '.settings__general-advanced';
+    template = template;
 
     render() {
         const logs = Logger.getLast().map(item => ({
@@ -14,9 +16,8 @@ const SettingsLogsView = Backbone.View.extend({
                 '] ' +
                 item.args.map(arg => this.mapArg(arg)).join(' ')
         }));
-        this.renderTemplate({ logs });
-        return this;
-    },
+        super.render({ logs });
+    }
 
     mapArg(arg) {
         if (arg === null) {
@@ -49,6 +50,6 @@ const SettingsLogsView = Backbone.View.extend({
         }
         return str;
     }
-});
+}
 
 export { SettingsLogsView };

app/scripts/views/settings/settings-plugins-view.js

@@ -1,4 +1,5 @@
 import Backbone from 'backbone';
+import { View } from 'view-engine/view';
 import { RuntimeInfo } from 'comp/app/runtime-info';
 import { SettingsManager } from 'comp/settings/settings-manager';
 import { Links } from 'const/links';
@@ -10,11 +11,12 @@ import { SemVer } from 'util/data/semver';
 import { Features } from 'util/features';
 import { DateFormat } from 'util/formatting/date-format';
 import { Locale } from 'util/locale';
+import template from 'templates/settings/settings-plugins.hbs';
 
-const SettingsPluginsView = Backbone.View.extend({
-    template: require('templates/settings/settings-plugins.hbs'),
+class SettingsPluginsView extends View {
+    template = template;
 
-    events: {
+    events = {
         'click .settings_plugins-install-btn': 'installClick',
         'click .settings_plugins-uninstall-btn': 'uninstallClick',
         'click .settings_plugins-disable-btn': 'disableClick',
@@ -29,24 +31,25 @@ const SettingsPluginsView = Backbone.View.extend({
         'input input[type=text].settings__plugins-plugin-input': 'pluginSettingChange',
         'change .settings__plugins-plugin-updates': 'autoUpdateChange',
         'click .settings__plugins-gallery-load-btn': 'loadPluginGalleryClick'
-    },
+    };
 
-    searchStr: null,
-    installFromUrl: null,
-    installing: {},
-    installErrors: {},
+    searchStr = null;
+    installFromUrl = null;
+    installing = {};
+    installErrors = {};
 
-    initialize() {
+    constructor(model, options) {
+        super(model, options);
         this.listenTo(PluginManager.instance, 'change', this.render.bind(this));
         this.listenTo(
             Backbone,
             'plugin-gallery-load-complete',
             this.pluginGalleryLoadComplete.bind(this)
         );
-    },
+    }
 
     render() {
-        this.renderTemplate({
+        super.render({
             plugins: PluginManager.instance
                 .get('plugins')
                 .map(plugin => ({
@@ -76,13 +79,12 @@ const SettingsPluginsView = Backbone.View.extend({
         if (this.searchStr) {
             this.showFilterResults();
         }
-        return this;
-    },
+    }
 
     pluginGalleryLoadComplete() {
         this.render();
         Backbone.trigger('page-geometry', { source: 'view' });
-    },
+    }
 
     getGalleryPlugins() {
         if (!PluginGallery.gallery) {
@@ -99,7 +101,7 @@ const SettingsPluginsView = Backbone.View.extend({
             }))
             .filter(pl => !plugins.get(pl.manifest.name) && this.canInstallPlugin(pl))
             .sort((x, y) => x.manifest.name.localeCompare(y.manifest.name));
-    },
+    }
 
     canInstallPlugin(plugin) {
         if (plugin.manifest.locale && SettingsManager.allLocales[plugin.manifest.locale.name]) {
@@ -121,7 +123,7 @@ const SettingsPluginsView = Backbone.View.extend({
             return false;
         }
         return true;
-    },
+    }
 
     loadPluginGalleryClick() {
         if (PluginGallery.loading) {
@@ -129,7 +131,7 @@ const SettingsPluginsView = Backbone.View.extend({
         }
         PluginGallery.loadPlugins();
         this.render();
-    },
+    }
 
     installClick() {
         const installBtn = this.$el.find('.settings_plugins-install-btn');
@@ -157,44 +159,44 @@ const SettingsPluginsView = Backbone.View.extend({
                 this.$el.find('.settings__plugins-install-error').text(e.toString());
                 this.$el.closest('.scroller').scrollTop(this.$el.height());
             });
-    },
+    }
 
     installFinished() {
         const installBtn = this.$el.find('.settings_plugins-install-btn');
         const urlTextBox = this.$el.find('#settings__plugins-install-url');
         urlTextBox.prop('disabled', false);
         installBtn.text(Locale.setPlInstallBtn).prop('disabled', false);
-    },
+    }
 
     uninstallClick(e) {
         const pluginId = $(e.target).data('plugin');
         PluginManager.instance.uninstall(pluginId);
-    },
+    }
 
     disableClick(e) {
         const pluginId = $(e.target).data('plugin');
         PluginManager.instance.disable(pluginId);
-    },
+    }
 
     enableClick(e) {
         const pluginId = $(e.target).data('plugin');
         PluginManager.instance.activate(pluginId);
-    },
+    }
 
     updateClick(e) {
         const pluginId = $(e.target).data('plugin');
         PluginManager.instance.update(pluginId);
-    },
+    }
 
     useLocaleClick(e) {
         const locale = $(e.target).data('locale');
         AppSettingsModel.instance.set('locale', locale);
-    },
+    }
 
     useThemeClick(e) {
         const theme = $(e.target).data('theme');
         AppSettingsModel.instance.set('theme', theme);
-    },
+    }
 
     galleryInstallClick(e) {
         const installBtn = $(e.target);
@@ -214,12 +216,12 @@ const SettingsPluginsView = Backbone.View.extend({
                 installBtn.prop('disabled', true);
                 delete this.installing[plugin.url];
             });
-    },
+    }
 
     gallerySearchInput(e) {
         this.searchStr = e.target.value.toLowerCase();
         this.showFilterResults();
-    },
+    }
 
     showFilterResults() {
         const pluginsById = {};
@@ -231,7 +233,7 @@ const SettingsPluginsView = Backbone.View.extend({
             const visible = this.pluginMatchesFilter(pluginsById[pluginId]);
             $(pluginEl).toggle(visible);
         }
-    },
+    }
 
     pluginMatchesFilter(plugin) {
         const searchStr = this.searchStr;
@@ -244,7 +246,7 @@ const SettingsPluginsView = Backbone.View.extend({
                 (manifest.locale.name.toLowerCase().indexOf(searchStr) >= 0 ||
                     manifest.locale.title.toLowerCase().indexOf(searchStr) >= 0))
         );
-    },
+    }
 
     pluginSettingChange(e) {
         const el = e.target;
@@ -254,13 +256,13 @@ const SettingsPluginsView = Backbone.View.extend({
         const val = el.type === 'checkbox' ? el.checked : el.value;
         const plugin = PluginManager.instance.getPlugin(pluginId);
         plugin.setSettings({ [setting]: val });
-    },
+    }
 
     autoUpdateChange(e) {
         const pluginId = $(e.target).data('plugin');
         const enabled = e.target.checked;
         PluginManager.instance.setAutoUpdate(pluginId, enabled);
     }
-});
+}
 
 export { SettingsPluginsView };

app/scripts/views/settings/settings-prv-view.js

@@ -1,21 +1,21 @@
-import Backbone from 'backbone';
+import { View } from 'view-engine/view';
 import { Storage } from 'storage';
+import template from 'templates/settings/settings-prv.hbs';
 
-const SettingsPrvView = Backbone.View.extend({
-    template: require('templates/settings/settings-prv.hbs'),
+class SettingsPrvView extends View {
+    template = template;
 
-    events: {
+    events = {
         'change .settings__general-prv-field-sel': 'changeField',
         'input .settings__general-prv-field-txt': 'changeField'
-    },
+    };
 
     render() {
         const storage = Storage[this.model.name];
         if (storage && storage.getSettingsConfig) {
-            this.renderTemplate(storage.getSettingsConfig());
+            super.render(storage.getSettingsConfig());
         }
-        return this;
-    },
+    }
 
     changeField(e) {
         const id = e.target.dataset.id;
@@ -29,6 +29,6 @@ const SettingsPrvView = Backbone.View.extend({
             this.render();
         }
     }
-});
+}
 
 export { SettingsPrvView };

app/scripts/views/settings/settings-shortcuts-view.js

@@ -1,14 +1,15 @@
-import Backbone from 'backbone';
+import { View } from 'view-engine/view';
 import { Shortcuts } from 'comp/app/shortcuts';
 import { Launcher } from 'comp/launcher';
 import { Keys } from 'const/keys';
 import { Features } from 'util/features';
 import { Locale } from 'util/locale';
+import template from 'templates/settings/settings-shortcuts.hbs';
 
-const SettingsShortcutsView = Backbone.View.extend({
-    template: require('templates/settings/settings-shortcuts.hbs'),
+class SettingsShortcutsView extends View {
+    template = template;
 
-    systemShortcuts: [
+    systemShortcuts = [
         'Meta+A',
         'Alt+A',
         'Alt+C',
@@ -24,14 +25,14 @@ const SettingsShortcutsView = Backbone.View.extend({
         'Meta+G',
         'Meta+,',
         'Meta+L'
-    ],
+    ];
 
-    events: {
+    events = {
         'click button.shortcut': 'shortcutClick'
-    },
+    };
 
     render() {
-        this.renderTemplate({
+        super.render({
             cmd: Shortcuts.actionShortcutSymbol(true),
             alt: Shortcuts.altShortcutSymbol(true),
             globalIsLarge: !Features.isMac,
@@ -45,7 +46,7 @@ const SettingsShortcutsView = Backbone.View.extend({
                   }
                 : undefined
         });
-    },
+    }
 
     shortcutClick(e) {
         const globalShortcutType = e.target.dataset.shortcut;
@@ -95,6 +96,6 @@ const SettingsShortcutsView = Backbone.View.extend({
             }
         });
     }
-});
+}
 
 export { SettingsShortcutsView };

app/scripts/views/settings/settings-view.js

@@ -1,40 +1,35 @@
 import Backbone from 'backbone';
-import { KeyHandler } from 'comp/browser/key-handler';
+import { View } from 'view-engine/view';
 import { Keys } from 'const/keys';
 import { Scrollable } from 'view-engine/scrollable';
 import { StringFormat } from 'util/formatting/string-format';
+import template from 'templates/settings/settings.hbs';
 
-const SettingsView = Backbone.View.extend({
-    template: require('templates/settings/settings.hbs'),
+class SettingsView extends View {
+    parent = '.app__body';
 
-    views: null,
+    template = template;
 
-    events: {
+    events = {
         'click .settings__back-button': 'returnToApp'
-    },
+    };
 
-    initialize() {
+    constructor(model, options) {
+        super(model, options);
         this.initScroll();
         this.listenTo(Backbone, 'set-page', this.setPage);
-        this.views = {};
-        KeyHandler.onKey(Keys.DOM_VK_ESCAPE, this.returnToApp, this);
-    },
-
-    remove() {
-        KeyHandler.offKey(Keys.DOM_VK_ESCAPE, this.returnToApp, this);
-        Backbone.View.prototype.remove.call(this);
-    },
+        this.onKey(Keys.DOM_VK_ESCAPE, this.returnToApp);
+    }
 
     render() {
-        this.renderTemplate();
+        super.render();
         this.createScroll({
             root: this.$el.find('.settings')[0],
             scroller: this.$el.find('.scroller')[0],
             bar: this.$el.find('.scroller__bar')[0]
         });
         this.pageEl = this.$el.find('.scroller');
-        return this;
-    },
+    }
 
     setPage(e) {
         const module = require('./settings-' + e.page + '-view');
@@ -43,19 +38,19 @@ const SettingsView = Backbone.View.extend({
         if (this.views.page) {
             this.views.page.remove();
         }
-        this.views.page = new SettingsPageView({ el: this.pageEl, model: e.file });
+        this.views.page = new SettingsPageView(e.file, { parent: this.pageEl[0] });
         this.views.page.appModel = this.model;
         this.views.page.render();
         this.file = e.file;
         this.page = e.page;
         this.pageResized();
-    },
+    }
 
     returnToApp() {
         Backbone.trigger('toggle-settings', false);
     }
-});
+}
 
-_.extend(SettingsView.prototype, Scrollable);
+Object.assign(SettingsView.prototype, Scrollable);
 
 export { SettingsView };