From 286c3bf4ed22f539d6e6469fbf52782b5e18c339 Mon Sep 17 00:00:00 2001 From: hardl Date: Thu, 10 Oct 2024 16:24:38 +0200 Subject: [PATCH] some restructuring, logo click in example --- core-modular/src/luigi.ts | 19 +++++++----- core-modular/src/routing.ts | 12 ++++--- .../src/services/navigation.service.ts | 3 +- core-modular/src/types/connector.ts | 2 +- core-modular/src/ui.ts | 31 ++++++++++++++++--- 5 files changed, 48 insertions(+), 19 deletions(-) diff --git a/core-modular/src/luigi.ts b/core-modular/src/luigi.ts index 4b30ca23dd..bc14028969 100644 --- a/core-modular/src/luigi.ts +++ b/core-modular/src/luigi.ts @@ -2,7 +2,7 @@ import App from "./App.svelte"; import { Navigation } from "./navigation"; import { Routing } from "./routing"; import type { LuigiConnector } from "./types/connector"; -import { UI } from "./ui"; +import { UI } from './ui'; const _init = () => { const luigi = (window as any).Luigi; @@ -14,6 +14,16 @@ export class Luigi { config: any; _connector: LuigiConnector | undefined; + _app: App | undefined; + _ui = UI; + + + bootstrap(connector: LuigiConnector): void { + this._app = new App({ + target: document.body + }); + this._connector = connector; + } setConfig(cfg: any) { this.config = cfg; @@ -27,12 +37,5 @@ export class Luigi { navigation(): any { return new Navigation(this); } - - bootstrap(connector: LuigiConnector): void { - let app = new App({ - target: document.body - }); - this._connector = connector; - } // ... } \ No newline at end of file diff --git a/core-modular/src/routing.ts b/core-modular/src/routing.ts index 65fe3816b2..dcbac45401 100644 --- a/core-modular/src/routing.ts +++ b/core-modular/src/routing.ts @@ -1,8 +1,9 @@ import { Helpers } from "./helpers"; +import type { Luigi } from "./luigi"; import { NavigationService } from "./services/navigation.service"; export const Routing = { - init: (luigi: any) => { + init: (luigi: Luigi) => { const navService = new NavigationService(luigi); const luigiConfig = luigi.getConfig(); console.log('Init Routing...', luigiConfig.routing); @@ -10,12 +11,13 @@ export const Routing = { window.addEventListener('hashchange', (ev) => { console.log('HashChange', location.hash); const path = Helpers.normalizePath(location.hash); - luigi._connector.renderTopNav(navService.getTopNavData()); - luigi._connector.renderLeftNav(navService.getLeftNavData(path)); - luigi._connector.renderContent(navService.getCurrentNode(path)); + const currentNode = navService.getCurrentNode(path); + luigi._connector?.renderTopNav(navService.getTopNavData()); + luigi._connector?.renderLeftNav(navService.getLeftNavData(path)); + luigi._ui.updateMainContent(currentNode, luigi); }); } else { - + // TBD } } } diff --git a/core-modular/src/services/navigation.service.ts b/core-modular/src/services/navigation.service.ts index 495339a186..920aaca48d 100644 --- a/core-modular/src/services/navigation.service.ts +++ b/core-modular/src/services/navigation.service.ts @@ -1,4 +1,5 @@ import { filter, first } from 'rxjs/operators'; +import type { Luigi } from '../luigi'; export interface TopNavData { appTitle: string; logo: string; @@ -31,7 +32,7 @@ export interface NavItem { } export class NavigationService { - constructor(private luigi: any) {} + constructor(private luigi: Luigi) {} getPathData(path: string): PathData { const cfg = this.luigi.getConfig(); diff --git a/core-modular/src/types/connector.ts b/core-modular/src/types/connector.ts index f2a0c9f6aa..12fa598079 100644 --- a/core-modular/src/types/connector.ts +++ b/core-modular/src/types/connector.ts @@ -5,5 +5,5 @@ export interface LuigiConnector { renderLeftNav(data: LeftNavData): void; - renderContent(node: Node): void; + getContainerWrapper(): HTMLElement; } \ No newline at end of file diff --git a/core-modular/src/ui.ts b/core-modular/src/ui.ts index 96ddafa040..c700cb5f7a 100644 --- a/core-modular/src/ui.ts +++ b/core-modular/src/ui.ts @@ -1,8 +1,14 @@ import { Helpers } from "./helpers"; +import type { Luigi } from "./luigi"; import { NavigationService } from "./services/navigation.service"; +const renderContainer = () => { + +} + export const UI = { - init: (luigi: any) => { + navService : undefined, + init: (luigi: Luigi) => { console.log('Init UI...'); const navService = new NavigationService(luigi); const path = Helpers.normalizePath(location.hash); @@ -11,8 +17,25 @@ export const UI = { luigi.navigation().navigate(pathData.rootNodes[0].pathSegment); } - luigi._connector.renderTopNav(navService.getTopNavData()); - luigi._connector.renderLeftNav(navService.getLeftNavData(path)); - luigi._connector.renderContent(navService.getCurrentNode(path)); + luigi._connector?.renderTopNav(navService.getTopNavData()); + luigi._connector?.renderLeftNav(navService.getLeftNavData(path)); + + renderContainer(); + const currentNode = navService.getCurrentNode(path); + if(currentNode) { + UI.updateMainContent(currentNode, luigi); + } + }, + updateMainContent: (currentNode: any, luigi: Luigi) => { + const containerWrapper = luigi._connector?.getContainerWrapper(); + // if viewgroup and preload do some caching/restoring... for now only re-render + if(currentNode && containerWrapper) { + containerWrapper.innerHTML = ''; + const lc: any = document.createElement('luigi-container'); + lc.setAttribute('viewUrl', currentNode.viewUrl); + lc.webcomponent = currentNode.webcomponent; + lc.context = currentNode.context; + containerWrapper?.appendChild(lc); + } } }