diff --git a/src/Umbraco.Web.UI.Client/src/core/router/index.ts b/src/Umbraco.Web.UI.Client/src/core/router/index.ts deleted file mode 100644 index 328c0fab4f..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/router/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './router'; -export * from './router-before-enter.event'; diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-before-enter.event.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-before-enter.event.ts deleted file mode 100644 index dd5b98fd77..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/router/router-before-enter.event.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { UmbRouteLocation } from './router'; - -export const umbRouterBeforeEnterEventType = 'umb:router-before-enter'; - -/** - * @export - * @interface UmbRouterBeforeEnter - */ -export interface UmbRouterBeforeEnter { - readonly to: UmbRouteLocation; -} - -/** - * @export - * @class UmbRouterBeforeEnterEvent - * @extends {Event} - * @implements {UmbRouterBeforeEnter} - */ -export class UmbRouterBeforeEnterEvent extends Event implements UmbRouterBeforeEnter { - public constructor(public readonly to: UmbRouteLocation) { - super(umbRouterBeforeEnterEventType, { bubbles: true, composed: true, cancelable: true }); - } -} - -export const isUmbRouterBeforeEnterEvent = (event: Event): event is UmbRouterBeforeEnterEvent => { - return event.type === umbRouterBeforeEnterEventType; -}; diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router-before-leave.event.ts b/src/Umbraco.Web.UI.Client/src/core/router/router-before-leave.event.ts deleted file mode 100644 index 843832a489..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/router/router-before-leave.event.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { UmbRouteLocation } from './router'; - -export const umbRouterBeforeLeaveEventType = 'umb:router-before-leave'; - -/** - * @export - * @interface UmbRouterBeforeLeave - */ -export interface UmbRouterBeforeLeave { - readonly to: UmbRouteLocation; -} - -/** - * @export - * @class UmbRouterBeforeLeaveEvent - * @extends {Event} - * @implements {UmbRouterBeforeLeave} - */ -export class UmbRouterBeforeLeaveEvent extends Event implements UmbRouterBeforeLeave { - public constructor(public readonly to: UmbRouteLocation) { - super(umbRouterBeforeLeaveEventType, { bubbles: true, composed: true, cancelable: true }); - } -} - -export const isUmbRouterBeforeLeaveEvent = (event: Event): event is UmbRouterBeforeLeaveEvent => { - return event.type === umbRouterBeforeLeaveEventType; -}; diff --git a/src/Umbraco.Web.UI.Client/src/core/router/router.ts b/src/Umbraco.Web.UI.Client/src/core/router/router.ts deleted file mode 100644 index f9b096205d..0000000000 --- a/src/Umbraco.Web.UI.Client/src/core/router/router.ts +++ /dev/null @@ -1,147 +0,0 @@ -import { Observable, ReplaySubject } from 'rxjs'; - -import { UmbRouterBeforeEnterEvent } from './router-before-enter.event'; -import { UmbRouterBeforeLeaveEvent } from './router-before-leave.event'; - -export interface UmbRoute { - path: string; - alias: string; - meta?: any; -} - -export interface UmbRouteLocation { - pathname: string; - params: Record; - route: UmbRoute; -} - -export interface UmbRouteElement extends HTMLElement { - location?: UmbRouteLocation; - beforeEnter?: (to: UmbRouteLocation) => Promise; - beforeLeave?: (to: UmbRouteLocation) => Promise; -} - -export class UmbRouter { - private _routes: Array = []; - private _host: HTMLElement; - private _element?: UmbRouteElement; - - private _location: ReplaySubject = new ReplaySubject(1); - public readonly location: Observable = this._location.asObservable(); - - constructor(host: HTMLElement) { - this._host = host; - - // Anchor Hijacker - this._host.addEventListener('click', async (event: MouseEvent) => { - const anchor = (('composedPath' in event) as any) - ? event.composedPath().find((element) => element instanceof HTMLAnchorElement) - : event.target; - if (anchor == null || !(anchor instanceof HTMLAnchorElement)) { - return; - } - - const href = anchor.href; - if (!href) return; - - event.preventDefault(); - - const url = new URL(href); - const pathname = url.pathname; - - this._navigate(pathname); - }); - } - - public setRoutes(routes: Array) { - this._routes = routes; - const pathname = window.location.pathname; - this.push(pathname); - } - - public getRoutes() { - return this._routes; - } - - public go(delta: number) { - history.go(delta); - } - - public back() { - history.back(); - } - - public forward() { - history.forward(); - } - - public push(pathname: string) { - this._navigate(pathname); - } - - private async _requestLeave(to: UmbRouteLocation) { - if (typeof this._element?.beforeLeave === 'function') { - const res = await this._element.beforeLeave(to); - if (!res) return; - } - - const beforeLeaveEvent = new UmbRouterBeforeLeaveEvent(to); - this._host.dispatchEvent(beforeLeaveEvent); - - if (beforeLeaveEvent.defaultPrevented) return; - - return true; - } - - private async _requestEnter(to: UmbRouteLocation) { - if (typeof this._element?.beforeEnter === 'function') { - const res = await this._element.beforeEnter(to); - if (!res) return; - } - - const beforeEnterEvent = new UmbRouterBeforeEnterEvent(to); - this._host.dispatchEvent(beforeEnterEvent); - - if (beforeEnterEvent.defaultPrevented) return; - - return true; - } - - private async _navigate(pathname: string) { - const location = this._resolve(pathname); - if (!location) return; - - const canLeave = await this._requestLeave(location); - if (!canLeave) return; - - const canEnter = await this._requestEnter(location); - if (!canEnter) return; - - window.history.pushState(null, '', pathname); - - this._location.next(location); - } - - private _resolve(pathname: string): UmbRouteLocation | null { - let location: UmbRouteLocation | null = null; - - this._routes.forEach((route) => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - const pattern = new URLPattern({ pathname: route.path }); - const href = `${window.location.origin}${pathname}`; - const match = pattern.test(href); - - if (match) { - const result = pattern.exec(href); - location = { - pathname: result.pathname.input, - params: result.pathname.groups, - route, - }; - } - }); - - return location; - } -}