From 41a5d473fe268482861403db24113a0612d69ff4 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 17 Sep 2024 13:40:44 +0200
Subject: [PATCH] add event listener for route change

---
 .../core/workspace/workspace.element.ts       | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts
index ac3d5ef3a6..893581b898 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace.element.ts
@@ -1,7 +1,9 @@
+import { UMB_DISCARD_CHANGES_MODAL } from '../modal/common/discard-changes/discard-changes-modal.tokent.js';
 import { html, nothing, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { ManifestWorkspace } from '@umbraco-cms/backoffice/workspace';
 import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 
 const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
 	return [{ manifest }];
@@ -12,6 +14,31 @@ export class UmbWorkspaceElement extends UmbLitElement {
 	@property({ type: String, attribute: 'entity-type' })
 	entityType = '';
 
+	constructor() {
+		super();
+
+		window.addEventListener(
+			'willchangestate',
+			async (e) => {
+				// prevent the navigation
+				e.preventDefault();
+
+				const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+				const modal = modalManager.open(this, UMB_DISCARD_CHANGES_MODAL);
+
+				try {
+					// navigate to the new url when discarding changes
+					await modal.onSubmit();
+					history.pushState({}, '', e.detail.url);
+					return true;
+				} catch {
+					return false;
+				}
+			},
+			{ once: true },
+		);
+	}
+
 	override render() {
 		if (!this.entityType) return nothing;
 		return html`<umb-extension-with-api-slot