From 2edd55f01fdb860f9c5aa9a8bcee136c899b5e2b Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Thu, 24 Feb 2022 22:40:17 +0100 Subject: [PATCH] Drop cancelCommand in favor of closeCommand and improve AbstractViewPopup handling --- dev/App/User.js | 4 +- dev/Knoin/AbstractViews.js | 42 ++++++++----------- dev/Knoin/Knoin.js | 16 ++----- dev/View/Popup/Account.js | 2 +- dev/View/Popup/AdvancedSearch.js | 2 +- dev/View/Popup/Ask.js | 17 ++++---- dev/View/Popup/Compose.js | 13 +++--- dev/View/Popup/Filter.js | 2 +- dev/View/Popup/FolderClear.js | 2 +- dev/View/Popup/FolderCreate.js | 2 +- dev/View/Popup/Identity.js | 6 +-- dev/View/Popup/Languages.js | 2 +- dev/View/Popup/OpenPgpGenerate.js | 2 +- dev/View/Popup/OpenPgpImport.js | 2 +- dev/View/Popup/Plugin.js | 19 ++------- dev/View/Popup/SieveScript.js | 2 +- dev/View/User/MailBox/MessageList.js | 11 +---- .../templates/PopupsTwoFactorAuthTest.html | 2 +- .../templates/TwoFactorAuthSettings.html | 2 +- .../templates/Views/Admin/PopupsDomain.html | 4 +- .../Views/Admin/PopupsDomainAlias.html | 4 +- .../templates/Views/Admin/PopupsPlugin.html | 4 +- .../Views/Common/PopupsLanguages.html | 2 +- .../templates/Views/User/PopupsAccount.html | 2 +- .../Views/User/PopupsAdvancedSearch.html | 10 ++--- .../templates/Views/User/PopupsContacts.html | 2 +- .../templates/Views/User/PopupsFilter.html | 2 +- .../Views/User/PopupsFolderClear.html | 2 +- .../Views/User/PopupsFolderCreate.html | 2 +- .../Views/User/PopupsFolderSystem.html | 2 +- .../templates/Views/User/PopupsIdentity.html | 2 +- .../User/PopupsKeyboardShortcutsHelp.html | 2 +- .../Views/User/PopupsOpenPgpGenerate.html | 2 +- .../Views/User/PopupsOpenPgpImport.html | 2 +- .../Views/User/PopupsOpenPgpKey.html | 4 +- .../Views/User/PopupsSieveScript.html | 2 +- 36 files changed, 82 insertions(+), 118 deletions(-) diff --git a/dev/App/User.js b/dev/App/User.js index 6ed9b9dd7..5f618bb0a 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -3,9 +3,7 @@ import 'External/User/ko'; import { isArray, pString } from 'Common/Utils'; import { mailToHelper, setLayoutResizer } from 'Common/UtilsUser'; -import { - Scope -} from 'Common/Enums'; +import { Scope } from 'Common/Enums'; import { FolderType, diff --git a/dev/Knoin/AbstractViews.js b/dev/Knoin/AbstractViews.js index 13ba2bf94..59d676647 100644 --- a/dev/Knoin/AbstractViews.js +++ b/dev/Knoin/AbstractViews.js @@ -57,36 +57,30 @@ export class AbstractViewPopup extends AbstractView constructor(name) { super('Popups' + name, ViewType.Popup); - if (name in Scope) { - this.keyScope.scope = Scope[name]; - } - this.bDisabeCloseOnEsc = false; + this.keyScope.scope = name; this.modalVisibility = ko.observable(false).extend({ rateLimit: 0 }); - } -/* - onShowWithDelay() {} - onHideWithDelay() {} - cancelCommand() {} - closeCommand() {} -*/ - /** - * @returns {void} - */ - registerPopupKeyDown() { - addEventListener('keydown', event => { - if (event && this.modalVisibility()) { - if (!this.bDisabeCloseOnEsc && 'Escape' == event.key) { - this.cancelCommand(); - return false; - } else if ('Backspace' == event.key && !inFocus()) { - return false; - } + this.onClose = this.onClose.debounce(200); + shortcuts.add('escape,close', '', name, () => { + if (this.modalVisibility() && this.onClose()) { + this.closeCommand(); + return false; } - return true; }); + shortcuts.add('backspace', '', name, inFocus()); } + + onClose() { + return true; + } + +/* + afterShow() {} + afterHide() {} + + closeCommand() {} +*/ } AbstractViewPopup.showModal = function(params = []) { diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js index 24b2189a5..67e43ff98 100644 --- a/dev/Knoin/Knoin.js +++ b/dev/Knoin/Knoin.js @@ -48,7 +48,7 @@ const ViewModelClass.__dom = vmDom; if (ViewType.Popup === position) { - vm.cancelCommand = vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass)); + vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass)); // Firefox / Safari HTMLDialogElement not defined if (!vmDom.showModal) { @@ -75,10 +75,10 @@ const if (e.target === vmDom) { if (vmDom.classList.contains('animate')) { autofocus(vmDom); - vm.onShowWithDelay && vm.onShowWithDelay(); + vm.afterShow && vm.afterShow(); } else { vmDom.close(); - vm.onHideWithDelay && vm.onHideWithDelay(); + vm.afterHide && vm.afterHide(); } } }; @@ -115,12 +115,7 @@ const } */ }); - if ('ontransitionend' in vmDom) { - vmDom.addEventListener('transitionend', endShowHide); - } else { - // For Edge < 79 and mobile browsers - vm.modalVisibility.subscribe(() => ()=>setTimeout(endShowHide({target:vmDom}), 500)); - } + vmDom.addEventListener('transitionend', endShowHide); } ko.applyBindingAccessorsToNode( @@ -133,9 +128,6 @@ const ); vm.onBuild && vm.onBuild(vmDom); - if (vm && ViewType.Popup === position) { - vm.registerPopupKeyDown(); - } fireEvent('rl-view-model', vm); } else { diff --git a/dev/View/Popup/Account.js b/dev/View/Popup/Account.js index 5b03c6728..56ca634f9 100644 --- a/dev/View/Popup/Account.js +++ b/dev/View/Popup/Account.js @@ -49,7 +49,7 @@ export class AccountPopupView extends AbstractViewPopup { this.submitErrorAdditional((data && data.ErrorMessageAdditional) || ''); } else { rl.app.accountsAndIdentities(); - this.cancelCommand(); + this.closeCommand(); } }, { Email: this.email(), diff --git a/dev/View/Popup/AdvancedSearch.js b/dev/View/Popup/AdvancedSearch.js index e3c50f56a..2b5d46e2f 100644 --- a/dev/View/Popup/AdvancedSearch.js +++ b/dev/View/Popup/AdvancedSearch.js @@ -57,7 +57,7 @@ export class AdvancedSearchPopupView extends AbstractViewPopup { MessagelistUserStore.mainSearch(search); } - this.cancelCommand(); + this.closeCommand(); } parseSearchStringValue(search) { diff --git a/dev/View/Popup/Ask.js b/dev/View/Popup/Ask.js index 601646397..80a79417c 100644 --- a/dev/View/Popup/Ask.js +++ b/dev/View/Popup/Ask.js @@ -19,17 +19,16 @@ export class AskPopupView extends AbstractViewPopup { this.fNoAction = null; this.focusOnShow = true; - this.bDisabeCloseOnEsc = true; } yesClick() { - this.cancelCommand(); + this.closeCommand(); isFunction(this.fYesAction) && this.fYesAction(); } noClick() { - this.cancelCommand(); + this.closeCommand(); isFunction(this.fNoAction) && this.fNoAction(); } @@ -52,10 +51,15 @@ export class AskPopupView extends AbstractViewPopup { this.focusOnShow = focusOnShow ? (askPass ? 'input[type="password"]' : '.buttonYes') : ''; } - onShowWithDelay() { + afterShow() { this.focusOnShow && this.querySelector(this.focusOnShow).focus(); } + onClose() { + this.noClick(); + return false; + } + onBuild() { // shortcuts.add('tab', 'shift', 'Ask', () => { shortcuts.add('tab,arrowright,arrowleft', '', 'Ask', () => { @@ -66,11 +70,6 @@ export class AskPopupView extends AbstractViewPopup { btn.focus(); return false; }); - - shortcuts.add('escape', '', 'Ask', () => { - this.noClick(); - return false; - }); } } diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js index 493f7f8e2..13fbc92d4 100644 --- a/dev/View/Popup/Compose.js +++ b/dev/View/Popup/Compose.js @@ -259,8 +259,6 @@ export class ComposePopupView extends AbstractViewPopup { ] }); - this.bDisabeCloseOnEsc = true; - this.tryToClosePopup = this.tryToClosePopup.debounce(200); this.iTimer = 0; @@ -643,6 +641,11 @@ export class ComposePopupView extends AbstractViewPopup { } } + onClose() { + this.skipCommand(); + return false; + } + skipCommand() { this.bSkipNextHide = true; @@ -1330,10 +1333,6 @@ export class ComposePopupView extends AbstractViewPopup { shortcuts.add('contextmenu', '', ScopeCompose, e => this.popupMenu(e)); shortcuts.add('m', 'meta', ScopeCompose, e => this.popupMenu(e)); - shortcuts.add('escape,close', '', ScopeCompose, () => { - this.skipCommand(); - return false; - }); shortcuts.add('arrowdown', 'meta', ScopeCompose, () => { this.skipCommand(); return false; @@ -1360,7 +1359,7 @@ export class ComposePopupView extends AbstractViewPopup { }); shortcuts.add('escape,close', 'shift', ScopeCompose, () => { - this.modalVisibility() && this.tryToClosePopup(); + this.tryToClosePopup(); return false; }); diff --git a/dev/View/Popup/Filter.js b/dev/View/Popup/Filter.js index edf14a864..872b11285 100644 --- a/dev/View/Popup/Filter.js +++ b/dev/View/Popup/Filter.js @@ -157,7 +157,7 @@ export class FilterPopupView extends AbstractViewPopup { } } - onShowWithDelay() { + afterShow() { this.isNew() && this.filter() && this.filter().nameFocused(true); } } diff --git a/dev/View/Popup/FolderClear.js b/dev/View/Popup/FolderClear.js index 79ae25f6c..cdd6af4cf 100644 --- a/dev/View/Popup/FolderClear.js +++ b/dev/View/Popup/FolderClear.js @@ -54,7 +54,7 @@ export class FolderClearPopupView extends AbstractViewPopup { this.clearingError(getNotification(iError)); } else { MessagelistUserStore.reload(true); - this.cancelCommand(); + this.closeCommand(); } }, { Folder: folderToClear.fullName diff --git a/dev/View/Popup/FolderCreate.js b/dev/View/Popup/FolderCreate.js index 94c7b28ac..3882b58e1 100644 --- a/dev/View/Popup/FolderCreate.js +++ b/dev/View/Popup/FolderCreate.js @@ -79,7 +79,7 @@ export class FolderCreatePopupView extends AbstractViewPopup { } ); - this.cancelCommand(); + this.closeCommand(); } simpleFolderNameValidation(sName) { diff --git a/dev/View/Popup/Identity.js b/dev/View/Popup/Identity.js index 892dc6908..86fcf896a 100644 --- a/dev/View/Popup/Identity.js +++ b/dev/View/Popup/Identity.js @@ -100,7 +100,7 @@ export class IdentityPopupView extends AbstractViewPopup { this.submitError(getNotification(iError)); } else { rl.app.accountsAndIdentities(); - this.cancelCommand(); + this.closeCommand(); } }, { Id: this.id, @@ -162,11 +162,11 @@ export class IdentityPopupView extends AbstractViewPopup { } } - onShowWithDelay() { + afterShow() { this.owner() || this.emailFocused(true); } - onHideWithDelay() { + afterHide() { this.clearPopup(); } } diff --git a/dev/View/Popup/Languages.js b/dev/View/Popup/Languages.js index 4183eeac3..0d9ff3f7c 100644 --- a/dev/View/Popup/Languages.js +++ b/dev/View/Popup/Languages.js @@ -52,6 +52,6 @@ export class LanguagesPopupView extends AbstractViewPopup { changeLanguage(lang) { this.fLang && this.fLang(lang); - this.cancelCommand(); + this.closeCommand(); } } diff --git a/dev/View/Popup/OpenPgpGenerate.js b/dev/View/Popup/OpenPgpGenerate.js index 2f807d466..3845b8b33 100644 --- a/dev/View/Popup/OpenPgpGenerate.js +++ b/dev/View/Popup/OpenPgpGenerate.js @@ -70,7 +70,7 @@ export class OpenPgpGeneratePopupView extends AbstractViewPopup { if (keyPair) { const fn = () => { this.submitRequest(false); - this.cancelCommand(); + this.closeCommand(); }; OpenPGPUserStore.storeKeyPair(keyPair); diff --git a/dev/View/Popup/OpenPgpImport.js b/dev/View/Popup/OpenPgpImport.js index 1fd54da6d..8d92f8081 100644 --- a/dev/View/Popup/OpenPgpImport.js +++ b/dev/View/Popup/OpenPgpImport.js @@ -63,7 +63,7 @@ export class OpenPgpImportPopupView extends AbstractViewPopup { return; } - this.cancelCommand(); + this.closeCommand(); } onShow() { diff --git a/dev/View/Popup/Plugin.js b/dev/View/Popup/Plugin.js index f2b0541a9..43ae30d02 100644 --- a/dev/View/Popup/Plugin.js +++ b/dev/View/Popup/Plugin.js @@ -28,11 +28,8 @@ export class PluginPopupView extends AbstractViewPopup { hasConfiguration: () => 0 < this.config().length }); - this.bDisabeCloseOnEsc = true; this.keyScope.scope = Scope.All; - this.tryToClosePopup = this.tryToClosePopup.debounce(200); - decorateKoCommands(this, { saveCommand: self => self.hasConfiguration() }); @@ -64,7 +61,7 @@ export class PluginPopupView extends AbstractViewPopup { Remote.request('AdminPluginSettingsUpdate', iError => iError ? this.saveError(getNotification(iError)) - : this.cancelCommand(), + : this.closeCommand(), oConfig); } @@ -98,21 +95,13 @@ export class PluginPopupView extends AbstractViewPopup { } } - tryToClosePopup() { + onClose() { if (AskPopupView.hidden()) { showScreenPopup(AskPopupView, [ i18n('POPUPS_ASK/DESC_WANT_CLOSE_THIS_WINDOW'), - () => this.modalVisibility() && this.cancelCommand() + () => this.closeCommand() ]); } - } - - onBuild() { - shortcuts.add('escape', '', Scope.All, () => { - if (this.modalVisibility()) { - this.tryToClosePopup(); - return false; - } - }); + return false; } } diff --git a/dev/View/Popup/SieveScript.js b/dev/View/Popup/SieveScript.js index 9ac27de5d..5c14e17fd 100644 --- a/dev/View/Popup/SieveScript.js +++ b/dev/View/Popup/SieveScript.js @@ -129,7 +129,7 @@ export class SieveScriptPopupView extends AbstractViewPopup { this.saveError(false); } - onShowWithDelay() { + afterShow() { // Sometimes not everything is translated, try again i18nToNodes(this.viewModelDom); } diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index 3af9ece31..a09afeee4 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -1,15 +1,8 @@ import ko from 'ko'; -import { - Capa, - Scope -} from 'Common/Enums'; +import { Capa, Scope } from 'Common/Enums'; -import { - ComposeType, - FolderType, - MessageSetAction -} from 'Common/EnumsUser'; +import { ComposeType, FolderType, MessageSetAction } from 'Common/EnumsUser'; import { UNUSED_OPTION_VALUE } from 'Common/Consts'; diff --git a/plugins/two-factor-auth/templates/PopupsTwoFactorAuthTest.html b/plugins/two-factor-auth/templates/PopupsTwoFactorAuthTest.html index 45f3224dc..01b3389d0 100644 --- a/plugins/two-factor-auth/templates/PopupsTwoFactorAuthTest.html +++ b/plugins/two-factor-auth/templates/PopupsTwoFactorAuthTest.html @@ -1,5 +1,5 @@
- × + ×

diff --git a/plugins/two-factor-auth/templates/TwoFactorAuthSettings.html b/plugins/two-factor-auth/templates/TwoFactorAuthSettings.html index 096f613ac..077ced658 100644 --- a/plugins/two-factor-auth/templates/TwoFactorAuthSettings.html +++ b/plugins/two-factor-auth/templates/TwoFactorAuthSettings.html @@ -82,7 +82,7 @@
- × + ×