some restructuring, logo click in example

SAP · Oct 10, 2024 · 286c3bf · 286c3bf
1 parent 2a7f8f3
commit 286c3bf
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 19 deletions.
diff --git 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;
-    }
     // ...
 }
diff --git a/core-modular/src/routing.ts b/core-modular/src/routing.ts
@@ -1,21 +1,23 @@
 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);
         if(luigiConfig.routing?.useHashRouting) {
             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
@@ -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
@@ -5,5 +5,5 @@ export interface LuigiConnector {
 
     renderLeftNav(data: LeftNavData): void;
 
-    renderContent(node: Node): void;
+    getContainerWrapper(): HTMLElement;
 }
diff --git 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);
+        }
     }
 }