Drop cancelCommand in favor of closeCommand and improve AbstractViewPopup handling

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,

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 = []) {

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 {

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(),

dev/View/Popup/AdvancedSearch.js

@@ -57,7 +57,7 @@ export class AdvancedSearchPopupView extends AbstractViewPopup {
 			MessagelistUserStore.mainSearch(search);
 		}
 
-		this.cancelCommand();
+		this.closeCommand();
 	}
 
 	parseSearchStringValue(search) {

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;
-		});
 	}
 }
 

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;
 		});
 

dev/View/Popup/Filter.js

@@ -157,7 +157,7 @@ export class FilterPopupView extends AbstractViewPopup {
 		}
 	}
 
-	onShowWithDelay() {
+	afterShow() {
 		this.isNew() && this.filter() && this.filter().nameFocused(true);
 	}
 }

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

dev/View/Popup/FolderCreate.js

@@ -79,7 +79,7 @@ export class FolderCreatePopupView extends AbstractViewPopup {
 				}
 			);
 
-		this.cancelCommand();
+		this.closeCommand();
 	}
 
 	simpleFolderNameValidation(sName) {

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();
 	}
 }

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();
 	}
 }

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);

dev/View/Popup/OpenPgpImport.js

@@ -63,7 +63,7 @@ export class OpenPgpImportPopupView extends AbstractViewPopup {
 			return;
 		}
 
-		this.cancelCommand();
+		this.closeCommand();
 	}
 
 	onShow() {

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;
 	}
 }

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);
 	}

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';