From 80eed213d96a9dc009d53b15561f643736be0db2 Mon Sep 17 00:00:00 2001
From: the-djmaze <>
Date: Fri, 29 Apr 2022 13:07:49 +0200
Subject: [PATCH] Allow `cancelable` on some custom javascript events.

---
 dev/Common/Globals.js   |  4 +-
 dev/Knoin/Knoin.js      | 89 +++++++++++++++++++++--------------------
 dev/View/Admin/Login.js |  2 +-
 dev/View/User/Login.js  |  2 +-
 plugins/README.md       |  6 +++
 5 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js
index 0ef8b8083..48f860880 100644
--- a/dev/Common/Globals.js
+++ b/dev/Common/Globals.js
@@ -27,7 +27,9 @@ export const
 		return el;
 	},
 
-	fireEvent = (name, detail) => dispatchEvent(new CustomEvent(name, {detail:detail})),
+	fireEvent = (name, detail, cancelable) => dispatchEvent(
+		new CustomEvent(name, {detail:detail, cancelable: !!cancelable})
+	),
 
 	formFieldFocused = () => doc.activeElement && doc.activeElement.matches('input,textarea'),
 
diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js
index 6e2d417b3..5196782f1 100644
--- a/dev/Knoin/Knoin.js
+++ b/dev/Knoin/Knoin.js
@@ -173,59 +173,62 @@ const
 			screenName = defaultScreenName;
 		}
 
-		// Close all popups
-		for (let vm of visiblePopups) {
-			false === vm.onClose() || vm.close();
-		}
+		if (fireEvent('sm-show-screen', screenName, 1)) {
 
-		if (screenName) {
-			vmScreen = screen(screenName);
-			if (!vmScreen) {
-				vmScreen = screen(defaultScreenName);
-				if (vmScreen) {
-					subPart = screenName + '/' + subPart;
-					screenName = defaultScreenName;
-				}
+			// Close all popups
+			for (let vm of visiblePopups) {
+				false === vm.onClose() || vm.close();
 			}
 
-			if (vmScreen && vmScreen.__started) {
-				isSameScreen = currentScreen && vmScreen === currentScreen;
-
-				if (!vmScreen.__builded) {
-					vmScreen.__builded = true;
-
-					vmScreen.viewModels.forEach(ViewModelClass =>
-						buildViewModel(ViewModelClass, vmScreen)
-					);
-
-					vmScreen.onBuild && vmScreen.onBuild();
+			if (screenName) {
+				vmScreen = screen(screenName);
+				if (!vmScreen) {
+					vmScreen = screen(defaultScreenName);
+					if (vmScreen) {
+						subPart = screenName + '/' + subPart;
+						screenName = defaultScreenName;
+					}
 				}
 
-				setTimeout(() => {
-					// hide screen
-					if (currentScreen && !isSameScreen) {
-						hideScreen(currentScreen);
+				if (vmScreen && vmScreen.__started) {
+					isSameScreen = currentScreen && vmScreen === currentScreen;
+
+					if (!vmScreen.__builded) {
+						vmScreen.__builded = true;
+
+						vmScreen.viewModels.forEach(ViewModelClass =>
+							buildViewModel(ViewModelClass, vmScreen)
+						);
+
+						vmScreen.onBuild && vmScreen.onBuild();
 					}
-					// --
 
-					currentScreen = vmScreen;
+					setTimeout(() => {
+						// hide screen
+						if (currentScreen && !isSameScreen) {
+							hideScreen(currentScreen);
+						}
+						// --
 
-					// show screen
-					if (!isSameScreen) {
-						vmScreen.onShow && vmScreen.onShow();
+						currentScreen = vmScreen;
 
-						forEachViewModel(vmScreen, (vm, dom) => {
-							vm.beforeShow && vm.beforeShow();
-							i18nToNodes(dom);
-							dom.hidden = false;
-							vm.onShow && vm.onShow();
-							autofocus(dom);
-						});
-					}
-					// --
+						// show screen
+						if (!isSameScreen) {
+							vmScreen.onShow && vmScreen.onShow();
 
-					vmScreen.__cross && vmScreen.__cross.parse(subPart);
-				}, 1);
+							forEachViewModel(vmScreen, (vm, dom) => {
+								vm.beforeShow && vm.beforeShow();
+								i18nToNodes(dom);
+								dom.hidden = false;
+								vm.onShow && vm.onShow();
+								autofocus(dom);
+							});
+						}
+						// --
+
+						vmScreen.__cross && vmScreen.__cross.parse(subPart);
+					}, 1);
+				}
 			}
 		}
 	};
diff --git a/dev/View/Admin/Login.js b/dev/View/Admin/Login.js
index ba8571aa6..6217e026f 100644
--- a/dev/View/Admin/Login.js
+++ b/dev/View/Admin/Login.js
@@ -35,7 +35,7 @@ export class AdminLoginView extends AbstractViewLogin {
 	submitCommand(self, event) {
 		let form = event.target.form,
 			data = new FormData(form),
-			valid = form.reportValidity() && fireEvent('sm-admin-login', data);
+			valid = form.reportValidity() && fireEvent('sm-admin-login', data, 1);
 
 		this.loginError(!this.login());
 		this.passwordError(!this.password());
diff --git a/dev/View/User/Login.js b/dev/View/User/Login.js
index 5c1a38611..df3e04936 100644
--- a/dev/View/User/Login.js
+++ b/dev/View/User/Login.js
@@ -90,7 +90,7 @@ export class LoginUserView extends AbstractViewLogin {
 	submitCommand(self, event) {
 		let form = event.target.form,
 			data = new FormData(form),
-			valid = form.reportValidity() && fireEvent('sm-user-login', data);
+			valid = form.reportValidity() && fireEvent('sm-user-login', data, 1);
 
 		this.emailError(!this.email());
 		this.passwordError(!this.password());
diff --git a/plugins/README.md b/plugins/README.md
index e7cdbd0ea..7dc2f89c1 100644
--- a/plugins/README.md
+++ b/plugins/README.md
@@ -383,9 +383,15 @@ $Plugin->addHook('hook.name', 'functionName');
 
 ### sm-admin-login
 	event.detail = FormData
+	cancelable using preventDefault()
 ### sm-admin-login-response
 	event.detail = { error: int, data: {JSON response} }
 ### sm-user-login
 	event.detail = FormData
+	cancelable using preventDefault()
 ### sm-user-login-response
 	event.detail = { error: int, data: {JSON response} }
+
+### sm-show-screen
+	event.detail = 'screenname'
+	cancelable using preventDefault()