use custom elements for application layout

src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts

@@ -1,15 +1,15 @@
 import { target } from "@github/catalyst";
 
 class BaseLayoutElement extends HTMLElement {
-    @target slotted: HTMLElement;
+    @target appSlot: HTMLElement;
     public isLayout: boolean = true;
-    public _slotted: string;
+    public _appSlot: string;
     constructor() {
         super();
     }
 
     get slotTag() {
-        return this.slotted?.firstElementChild?.tagName;
+        return this.appSlot?.firstElementChild?.tagName;
     }
 
     compareTags = (tag: string | HTMLElement): boolean => {
@@ -20,9 +20,9 @@ class BaseLayoutElement extends HTMLElement {
     };
 
     setElement = (newTag: string) => {
-        const _slotted = `<${newTag}></${newTag}>`;
+        const _appSlot = `<${newTag}></${newTag}>`;
-        this._slotted = _slotted;
+        this._appSlot = _appSlot;
-        this.slotted.innerHTML = _slotted;
+        this.appSlot.innerHTML = _appSlot;
     };
 }
 

src/components/app-main/AppMainElement.ts

@@ -1,7 +1,5 @@
-import { attr, targets, controller, target } from "@github/catalyst";
+import { controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
+import { closest } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
 import { AppService, HttpClient, RouterService } from "core/services";
 import { AuthStore } from "core/store";
 
@@ -12,15 +10,18 @@ class AppMainElement extends HTMLElement {
     private httpClient: HttpClient;
     public appService: AppService;
     @closest appMain;
+    @target appModal;
+    @target mainRoot;
 
     constructor() {
         super();
     }
     connectedCallback() {
         if (this.appMain !== this) return;
+        const mainRoot = this.createMainRoot();
         this.httpClient = new HttpClient();
         this.appService = new AppService(this, this.httpClient);
-        this.routerService = new RouterService(this);
+        this.routerService = new RouterService(mainRoot);
         this.authStore = new AuthStore(this.appService);
         this.routerService.setRoutes([
             {
@@ -69,6 +70,29 @@ class AppMainElement extends HTMLElement {
         }
     };
 
+    createModal = (element: string) => {
+        console.log(this.appModal);
+        this.closeModal();
+        const _appModal = document.createElement("app-modal");
+        _appModal.setAttribute("data-target", "app-main.appModal");
+        const _modalElement = document.createElement(element);
+        _modalElement.setAttribute("data-target", "app-modal.modalElement");
+        _appModal.appendChild(_modalElement);
+        this.appendChild(_appModal);
+    };
+
+    createMainRoot = () => {
+        if (this.mainRoot) this.removeChild(this.mainRoot);
+        const _mainRoot = document.createElement("app-root");
+        _mainRoot.setAttribute("data-target", "app-main.mainRoot");
+        this.appendChild(_mainRoot);
+        return _mainRoot;
+    };
+
+    closeModal = () => {
+        if (this.appModal) this.removeChild(this.appModal);
+    };
+
     get isAuth(): boolean {
         return this.authStore && this.authStore.token;
     }

src/components/app-modal/AppModalElement.ts

@@ -0,0 +1,14 @@
+import { controller, target } from "@github/catalyst";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { closest } from "core/utils";
+
+@controller
+class AppModalElement extends HTMLElement {
+    @target modalElement: HTMLElement;
+    @closest appMain: AppMainElement;
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {}
+}

src/components/app-root/AppRootElement.ts

@@ -0,0 +1,14 @@
+import { controller, target } from "@github/catalyst";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { closest } from "core/utils";
+
+@controller
+class AppRootElement extends HTMLElement {
+    @target rootElement: HTMLElement;
+    @closest appMain: AppMainElement;
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {}
+}

src/components/app-slot/AppSlotElement.ts

@@ -0,0 +1,14 @@
+import { controller, target } from "@github/catalyst";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { closest } from "core/utils";
+
+@controller
+class AppSlotElement extends HTMLElement {
+    @target slotElement: HTMLElement;
+    @closest appMain: AppMainElement;
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {}
+}

src/components/index.ts

@@ -1,4 +1,7 @@
 export * from "./app-shadow/AppShadowElement";
 export * from "./app-main/AppMainElement";
 export * from "./app-link/AppLinkElement";
+export * from "./app-modal/AppModalElement";
+export * from "./app-root/AppRootElement";
+export * from "./app-slot/AppSlotElement";
 export * from "./input-field/InputFieldElement";

src/core/services/router-service/RouterService.ts

@@ -68,6 +68,10 @@ class RouterService {
                         const _newElement = document.createElement(
                             route.layout
                         );
+                        _newElement.setAttribute(
+                            "data-target",
+                            "app-root.rootElement"
+                        );
                         _mainRoot.replaceChild(_newElement, child);
                         (_newElement as BaseLayoutElement).setElement(
                             route.component
@@ -79,6 +83,10 @@ class RouterService {
                         const _newElement = document.createElement(
                             route.component
                         );
+                        _newElement.setAttribute(
+                            "data-target",
+                            "app-root.rootElement"
+                        );
                         changed = true;
                         _mainRoot.replaceChild(_newElement, child);
                     }
@@ -87,12 +95,20 @@ class RouterService {
                 if (route.layout) {
                     changed = true;
                     const _newElement = document.createElement(route.layout);
+                    _newElement.setAttribute(
+                        "data-target",
+                        "app-root.rootElement"
+                    );
                     _mainRoot.appendChild(_newElement);
                     (_newElement as BaseLayoutElement).setElement(
                         route.component
                     );
                 } else {
                     const _newElement = document.createElement(route.component);
+                    _newElement.setAttribute(
+                        "data-target",
+                        "app-root.rootElement"
+                    );
                     changed = true;
                     _mainRoot.appendChild(_newElement);
                 }

src/layouts/menu-layout/MenuLayoutElement.ts

@@ -37,15 +37,15 @@ class MenuLayoutElement extends BaseLayoutElement {
             html`<div>
                 <app-link data-go-back="true" data-title="Go back"></app-link>
             </div>`}
-            <div data-target="menu-layout.slotted"></div>
+            <app-slot data-target="menu-layout.appSlot"></app-slot>
         `;
     }
 
     update = () => {
         render(this.render(), this);
-        const _slotted = this._slotted;
+        const _appSlot = this._appSlot;
-        if (_slotted && this.slotted) {
+        if (_appSlot && this.appSlot) {
-            this.slotted.innerHTML = _slotted;
+            this.appSlot.innerHTML = _appSlot;
         }
     };
 }

src/pages/home-page/HomePageElement.ts

@@ -35,6 +35,15 @@ class HomePageElement extends HTMLElement {
         return html`<div>${until(this.getPong())}</div>`;
     };
 
+    openModal = () => {
+        const _modal = this.appMain.appModal;
+        if (_modal) {
+            this.appMain.closeModal();
+        } else {
+            this.appMain.createModal("login-page");
+        }
+    };
+
     render() {
         return html`
             <app-link data-to="/" data-title="Main"></app-link> |
@@ -48,6 +57,7 @@ class HomePageElement extends HTMLElement {
                       data-to="/login"
                       data-title="Login"
                   ></app-link>`}
+            <button data-action="click:home-page#openModal">Test</button>
         `;
     }