closed shadowRoot and changed pages, components, layout to extend base class

2026-02-06 06:08:10 +00:00 · 2021-06-02 13:19:32 +02:00
parent f01c328716
commit 91032927fd
25 changed files with 206 additions and 109 deletions
--- a/src/common/components/BaseComponentElement/BaseComponentElement.ts
+++ b/src/common/components/BaseComponentElement/BaseComponentElement.ts
@@ -0,0 +1,43 @@
+import { html, render } from "@github/jtml";
+import { AppMainElement } from "components/";
+import { closest } from "core/utils";
+
+class BaseComponentElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    bindEvents = () => {
+        const _elems = this.querySelectorAll("[data-action]");
+        _elems?.forEach((el) => {
+            for (const action of (el.getAttribute("data-action") || "")
+                .trim()
+                .split(/\s+/)) {
+                const eventSep = action.lastIndexOf(":");
+                const methodSep = action.lastIndexOf("#");
+                const tag = action.slice(eventSep + 1, methodSep);
+
+                const type = action.slice(0, eventSep);
+                const method = action.slice(methodSep + 1);
+
+                if (tag.toUpperCase() === this.tagName) {
+                    el.addEventListener(type, this?.[method]);
+                } else {
+                    this.childNodes.forEach((child: HTMLElement) => {
+                        if (child.tagName == tag.toUpperCase()) {
+                            el.addEventListener(type, child?.[method]);
+                        }
+                    });
+                }
+            }
+        });
+    };
+
+    render = () => {
+        return html``;
+    };
+
+    update = () => {
+        render(this.render(), this);
+        this.bindEvents();
+    };
+}
+
+export default BaseComponentElement;
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@@ -0,0 +1 @@
+export { default as BaseComponentElement } from "./BaseComponentElement/BaseComponentElement";
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -0,0 +1,3 @@
+export * from "./layouts";
+export * from "./components";
+export * from "./pages";
--- a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
+++ b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
@@ -1,7 +1,11 @@
 import { target } from "@github/catalyst";
+import { html, render } from "@github/jtml";
+import { AppMainElement } from "components/";
+import { closest } from "core/utils";

 class BaseLayoutElement extends HTMLElement {
    @target appSlot: HTMLElement;
+    @closest appMain: AppMainElement;
    public isLayout: boolean = true;
    public _appSlot: string;
    constructor() {
@@ -24,6 +28,35 @@ class BaseLayoutElement extends HTMLElement {
        this._appSlot = _appSlot;
        this.appSlot.innerHTML = _appSlot;
    };
+
+    bindEvents = () => {
+        const _elems = this.querySelectorAll("[data-action]");
+        _elems?.forEach((el) => {
+            for (const action of (el.getAttribute("data-action") || "")
+                .trim()
+                .split(/\s+/)) {
+                const eventSep = action.lastIndexOf(":");
+                const methodSep = action.lastIndexOf("#");
+                const tag = action.slice(eventSep + 1, methodSep);
+
+                const type = action.slice(0, eventSep);
+                const method = action.slice(methodSep + 1);
+
+                if (tag.toUpperCase() === this.tagName) {
+                    this.addEventListener(type, this[method]);
+                }
+            }
+        });
+    };
+
+    render = () => {
+        return html``;
+    };
+
+    update = () => {
+        render(this.render(), this);
+        this.bindEvents();
+    };
 }

 export default BaseLayoutElement;
--- a/src/common/pages/BasePageElement/BasePageElement.ts
+++ b/src/common/pages/BasePageElement/BasePageElement.ts
@@ -0,0 +1,37 @@
+import { html, render } from "@github/jtml";
+import { AppMainElement } from "components/";
+import { closest } from "core/utils";
+
+class BasePageElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    bindEvents = () => {
+        const _elems = this.querySelectorAll("[data-action]");
+        _elems?.forEach((el) => {
+            for (const action of (el.getAttribute("data-action") || "")
+                .trim()
+                .split(/\s+/)) {
+                const eventSep = action.lastIndexOf(":");
+                const methodSep = action.lastIndexOf("#");
+                const tag = action.slice(eventSep + 1, methodSep);
+
+                const type = action.slice(0, eventSep);
+                const method = action.slice(methodSep + 1);
+
+                if (tag.toUpperCase() === this.tagName) {
+                    this.addEventListener(type, this[method]);
+                }
+            }
+        });
+    };
+
+    render = () => {
+        return html``;
+    };
+
+    update = () => {
+        render(this.render(), this);
+        this.bindEvents();
+    };
+}
+
+export default BasePageElement;
--- a/src/common/pages/index.ts
+++ b/src/common/pages/index.ts
@@ -0,0 +1 @@
+export { default as BasePageElement } from "./BasePageElement/BasePageElement";
--- a/src/components/app-link/AppLinkElement.ts
+++ b/src/components/app-link/AppLinkElement.ts
@@ -1,13 +1,19 @@
-import { attr, targets, controller, target } from "@github/catalyst";
+import {
+    attr,
+    targets,
+    controller,
+    target,
+    listenForBind,
+} from "@github/catalyst";
 import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { PingService } from "services/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { RouterService } from "core/services";
+import { BaseComponentElement } from "common/";

@controller
-class AppLinkElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class AppLinkElement extends BaseComponentElement {
    @attr to: string;
    @attr goBack: string;
    @attr title: string;
@@ -67,8 +73,4 @@ class AppLinkElement extends HTMLElement {
                  >${this.title}</a
              >`}`;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }
--- a/src/components/app-main/AppMainElement.ts
+++ b/src/components/app-main/AppMainElement.ts
@@ -2,14 +2,14 @@ import { controller, target } from "@github/catalyst";
 import { closest } from "core/utils";
 import { AppService, HttpClient, RouterService } from "core/services";
 import { AuthStore } from "core/store";
+import { BaseComponentElement } from "common/";

@controller
-class AppMainElement extends HTMLElement {
+class AppMainElement extends BaseComponentElement {
    public routerService: RouterService;
    public authStore: AuthStore;
    private httpClient: HttpClient;
    public appService: AppService;
-    @closest appMain;
    @target appModal;
    @target mainRoot;

@@ -28,28 +28,31 @@ class AppMainElement extends HTMLElement {
                path: "/",
                component: "home-page",
                layout: "menu-layout",
+                middleware: this.isAuth,
            },
            {
                path: "/home",
                component: "home-page",
                layout: "menu-layout",
-                middleware: this.middleAuth,
+                middleware: this.isAuth,
            },
            {
                path: "/history",
                component: "history-page",
                layout: "menu-layout",
-                middleware: this.middleAuth,
+                middleware: this.isAuth,
            },
            {
                path: "/register",
                component: "register-page",
                layout: "menu-layout",
+                middleware: this.isAuth,
            },
            {
                path: "/login",
                component: "login-page",
                layout: "menu-layout",
+                middleware: this.isAuth,
            },
            {
                path: "/unauthorized",
@@ -130,9 +133,9 @@ class AppMainElement extends HTMLElement {
        if (this.appModal) this.removeChild(this.appModal);
    };

-    get isAuth(): boolean {
+    isAuth = (): boolean => {
        return this.authStore && this.authStore.token;
-    }
+    };
 }

 export type { AppMainElement };
--- a/src/components/app-menu/AppMenuElement.ts
+++ b/src/components/app-menu/AppMenuElement.ts
@@ -1,15 +1,15 @@
 import { controller, target } from "@github/catalyst";
 import { html, render, TemplateResult } from "@github/jtml";
+import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { closest, update } from "core/utils";
 import { WalletService } from "services/";

@controller
-class AppMenuElement extends HTMLElement {
+class AppMenuElement extends BaseComponentElement {
    private walletService: WalletService;
    private walletData: Array<any>;
    private totalWallets: number;
-    @closest appMain: AppMainElement;
    constructor() {
        super();
    }
@@ -51,13 +51,8 @@ class AppMenuElement extends HTMLElement {
        }
    };

-    update = () => {
-        render(this.render(), this);
-    };
-
    get isAuth(): boolean {
        if (this.appMain?.isAuth) {
-            console.log(true);
            return true;
        }
        return false;
--- a/src/components/app-modal/AppModalElement.ts
+++ b/src/components/app-modal/AppModalElement.ts
@@ -1,11 +1,11 @@
 import { controller, target } from "@github/catalyst";
+import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { closest } from "core/utils";

@controller
-class AppModalElement extends HTMLElement {
+class AppModalElement extends BaseComponentElement {
    @target modalElement: HTMLElement;
-    @closest appMain: AppMainElement;
    constructor() {
        super();
    }
--- a/src/components/app-pagination/AppPaginationElement.ts
+++ b/src/components/app-pagination/AppPaginationElement.ts
@@ -1,11 +1,11 @@
 import { attr, controller, target } from "@github/catalyst";
 import { html, render } from "@github/jtml";
+import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { closest, isTrue } from "core/utils";

@controller
-class AppPaginationElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class AppPaginationElement extends BaseComponentElement {
    public items: Array<any>;
    @attr page: number;
    @attr rpp: number;
@@ -39,6 +39,7 @@ class AppPaginationElement extends HTMLElement {
    };

    executeFetch = async (options?) => {
+        console.log(this.page);
        if (!options) {
            options = {
                rpp: this.rpp || 5,
@@ -52,6 +53,7 @@ class AppPaginationElement extends HTMLElement {
            this.totalItems = response?.totalRecords;
            this.page = response?.page;
            this.rpp = response?.rpp;
+            console.log(this.page);
        } catch (err) {
            console.error(err);
        }
@@ -67,6 +69,7 @@ class AppPaginationElement extends HTMLElement {

    pageNext = () => {
        const { rpp, totalItems, page } = this;
+        console.log(this.page);
        const pageRange = Math.ceil(totalItems / rpp);
        if (page < pageRange) {
            this.page++;
@@ -84,7 +87,9 @@ class AppPaginationElement extends HTMLElement {

        const renderItems = () => {
            if (items?.length > 0) {
-                return html`${items?.map((item) => renderItem(item))}`;
+                return html`<span>
+                    ${items?.map((item) => renderItem(item))}
+                </span>`;
            }
            return html``;
        };
@@ -92,6 +97,7 @@ class AppPaginationElement extends HTMLElement {
        const renderPagination = () => {
            if (totalItems > items?.length) {
                const pageRange = Math.ceil(totalItems / rpp);
+                console.log(pageRange);
                return html`
                    <div>
                        <button
@@ -115,16 +121,7 @@ class AppPaginationElement extends HTMLElement {
            }
        };

-        return html`<div>
-            <table>
-                ${renderItems()}
-            </table>
-            ${renderPagination()}
-        </div>`;
-    };
-
-    update = () => {
-        render(this.render(), this);
+        return html`<div>${renderItems()} ${renderPagination()}</div>`;
    };
 }

--- a/src/components/app-root/AppRootElement.ts
+++ b/src/components/app-root/AppRootElement.ts
@@ -1,11 +1,11 @@
 import { controller, target } from "@github/catalyst";
+import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { closest } from "core/utils";

@controller
-class AppRootElement extends HTMLElement {
+class AppRootElement extends BaseComponentElement {
    @target rootElement: HTMLElement;
-    @closest appMain: AppMainElement;
    constructor() {
        super();
    }
--- a/src/components/app-shadow/AppShadowElement.ts
+++ b/src/components/app-shadow/AppShadowElement.ts
@@ -1,19 +1,24 @@
 import { controller } from "@github/catalyst";
 import style from "styles/main.scss";

-@controller
-class AppShadowElement extends HTMLElement {
+(function () {
+    const _shadow = new WeakMap();
+
+    @controller
+    class AppShadowElement extends HTMLElement {
        constructor() {
            super();
+            _shadow.set(this, this.attachShadow({ mode: "closed" }));
        }

        connectedCallback() {
-        this.attachShadow({ mode: "open" });
+            const _root = _shadow.get(this);
            const _appMain = document.createElement("app-main");
            const _style = document.createElement("style");
            _style.innerHTML = style;

-        this.shadowRoot.appendChild(_style);
-        this.shadowRoot.appendChild(_appMain);
+            _root.appendChild(_style);
+            _root.appendChild(_appMain);
        }
-}
+    }
+})();
--- a/src/components/app-slot/AppSlotElement.ts
+++ b/src/components/app-slot/AppSlotElement.ts
@@ -1,11 +1,11 @@
 import { controller, target } from "@github/catalyst";
+import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { closest } from "core/utils";

@controller
-class AppSlotElement extends HTMLElement {
+class AppSlotElement extends BaseComponentElement {
    @target slotElement: HTMLElement;
-    @closest appMain: AppMainElement;
    constructor() {
        super();
    }
--- a/src/components/input-field/InputFieldElement.ts
+++ b/src/components/input-field/InputFieldElement.ts
@@ -7,10 +7,10 @@ import { RouterService } from "core/services";
 import randomId from "core/utils/random-id";
 import validator from "validator";
 import { validatorErrors } from "core/constants";
+import { BaseComponentElement } from "common/";

@controller
-class InputFieldElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class InputFieldElement extends BaseComponentElement {
    @attr name: string;
    @attr type: string;
    @attr label: string;
@@ -79,10 +79,6 @@ class InputFieldElement extends HTMLElement {
            ${this.error && html`<span>${this.error}</span>`}
        </div>`;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }

 export type { InputFieldElement };
--- a/src/components/menu-item/MenuItemElement.ts
+++ b/src/components/menu-item/MenuItemElement.ts
@@ -4,10 +4,10 @@ import { html, render, until } from "@github/jtml";
 import { PingService } from "services/";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { RouterService } from "core/services";
+import { BaseComponentElement } from "common/";

@controller
-class MenuItemElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class MenuItemElement extends BaseComponentElement {
    @attr path: string;
    @attr title: string;
    @target itemEl: HTMLElement;
@@ -45,8 +45,4 @@ class MenuItemElement extends HTMLElement {
            </div>
        `;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }
--- a/src/core/services/router-service/RouterService.ts
+++ b/src/core/services/router-service/RouterService.ts
@@ -47,9 +47,6 @@ class RouterService {
        const _mainRoot = this.mainRoot;
        const route = this.routerState;
        if (path == route?.path || route?.path == "/not-found") {
-            if (route.middleware && typeof route.middleware == "function") {
-                if (route.middleware()) return;
-            }
            let changed: boolean = false;
            if (_mainRoot?.childNodes.length > 0) {
                _mainRoot?.childNodes?.forEach?.((child: BaseLayoutElement) => {
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,3 @@
 import "layouts";
-import "pages";
 import "components";
+import "pages";
--- a/src/layouts/menu-layout/MenuLayoutElement.ts
+++ b/src/layouts/menu-layout/MenuLayoutElement.ts
@@ -15,16 +15,20 @@ class MenuLayoutElement extends BaseLayoutElement {
    connectedCallback() {
        this.update();
        window.addEventListener("tokenchange", this.updateAuth);
+        window.addEventListener("routechanged", this.updateAuth);
    }

    disconnectedCallback(): void {
        window.removeEventListener("tokenchange", this.updateAuth);
+        window.removeEventListener("routechanged", this.updateAuth);
    }

    get isAuth() {
-        const _hasToken = this.appMain?.isAuth;
-        const _hasData = this.appMain?.authStore?.user;
-        return _hasToken;
+        const _is = this.appMain?.routerService?.routerState?.middleware;
+        if (typeof _is == "function") {
+            return _is();
+        }
+        return !!_is;
    }

    updateAuth = () => {
@@ -32,13 +36,10 @@ class MenuLayoutElement extends BaseLayoutElement {
    };

    render = () => {
+        const _isAuth = this.isAuth;
        return html`
-            <app-menu></app-menu>
+            ${_isAuth ? html`<app-menu></app-menu>` : html``}
            <app-slot data-target="menu-layout.appSlot"></app-slot>
        `;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }
--- a/src/pages/history-page/HistoryPageElement.ts
+++ b/src/pages/history-page/HistoryPageElement.ts
@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { TransactionsService } from "services/";
 import { AppMainElement, AppPaginationElement } from "components/";
+import { BasePageElement } from "common/";

@controller
-class HistoryPageElement extends HTMLElement {
+class HistoryPageElement extends BasePageElement {
    private transactionsService: TransactionsService;
-    @closest appMain: AppMainElement;
    @target pagination: AppPaginationElement;
    constructor() {
        super();
@@ -42,8 +42,4 @@ class HistoryPageElement extends HTMLElement {
            ></app-pagination>
        `;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }
--- a/src/pages/home-page/HomePageElement.ts
+++ b/src/pages/home-page/HomePageElement.ts
@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { PingService } from "services/";
 import { AppMainElement } from "components/";
+import { BasePageElement } from "common/";

@controller
-class HomePageElement extends HTMLElement {
+class HomePageElement extends BasePageElement {
    private pingService: PingService;
-    @closest appMain: AppMainElement;
    constructor() {
        super();
    }
@@ -48,8 +48,4 @@ class HomePageElement extends HTMLElement {
            <button data-action="click:home-page#openModal">Test</button>
        `;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }
--- a/src/pages/login-page/LoginPageElement.ts
+++ b/src/pages/login-page/LoginPageElement.ts
@@ -1,14 +1,20 @@
-import { attr, targets, controller, target } from "@github/catalyst";
+import {
+    attr,
+    targets,
+    controller,
+    target,
+    listenForBind,
+} from "@github/catalyst";
 import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { AuthService, PingService } from "services/";
 import { AppMainElement, InputFieldElement } from "components/";
 import { RouterService } from "core/services";
+import { BasePageElement } from "common/";

@controller
-class LoginPageElement extends HTMLElement {
+class LoginPageElement extends BasePageElement {
    @targets inputs: Array<InputFieldElement>;
-    @closest appMain: AppMainElement;
    authService: AuthService;
    routerService: RouterService;
    errorMessage: string;
@@ -48,6 +54,7 @@ class LoginPageElement extends HTMLElement {

    onSubmit = async () => {
        try {
+            console.log("test");
            if (!this.validate()) {
                return;
            }
@@ -113,8 +120,4 @@ class LoginPageElement extends HTMLElement {
            </div>
        `;
    };
-
-    update() {
-        render(this.render(), this);
-    }
 }
--- a/src/pages/logout-page/LogoutPageElement.ts
+++ b/src/pages/logout-page/LogoutPageElement.ts
@@ -2,10 +2,10 @@ import { controller } from "@github/catalyst";
 import { closest, update } from "core/utils";
 import { AuthService } from "services/";
 import { AppMainElement } from "components/";
+import { BasePageElement } from "common/";

@controller
-class LogoutPageElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class LogoutPageElement extends BasePageElement {
    authService: AuthService;
    constructor() {
        super();
--- a/src/pages/not-found/NotFoundElement.ts
+++ b/src/pages/not-found/NotFoundElement.ts
@@ -2,10 +2,10 @@ import { controller } from "@github/catalyst";
 import { closest, update } from "core/utils";
 import { html, render } from "@github/jtml";
 import { AppMainElement } from "components/";
+import { BasePageElement } from "common/";

@controller
-class NotFoundElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class NotFoundElement extends BasePageElement {
    constructor() {
        super();
    }
@@ -19,8 +19,4 @@ class NotFoundElement extends HTMLElement {
            <div><app-link data-to="/" data-title="Homepage"></app-link></div>
        `;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }
--- a/src/pages/register-page/RegisterPageElement.ts
+++ b/src/pages/register-page/RegisterPageElement.ts
@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { AuthService, PingService } from "services/";
 import { AppMainElement, InputFieldElement } from "components/";
+import { BasePageElement } from "common/";

@controller
-class RegisterPageElement extends HTMLElement {
+class RegisterPageElement extends BasePageElement {
    @targets inputs: Array<InputFieldElement>;
-    @closest appMain: AppMainElement;
    authService: AuthService;
    constructor() {
        super();
@@ -84,8 +84,4 @@ class RegisterPageElement extends HTMLElement {
            </form>
        `;
    };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }
				`@@ -0,0 +1 @@`
				`export { default as BaseComponentElement } from "./BaseComponentElement/BaseComponentElement";`
				`@@ -0,0 +1 @@`
				`export { default as BasePageElement } from "./BasePageElement/BasePageElement";`