From ca51c304f3ccb9941cf35ede2a71dd33a5ba7c44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Wed, 2 Jun 2021 14:05:38 +0200 Subject: [PATCH] custom callbacks from base element --- .../BaseComponentElement.ts | 42 +---------- src/common/core/BaseElement/BaseElement.ts | 75 +++++++++++++++++++ src/common/index.ts | 1 + .../BaseLayoutElement/BaseLayoutElement.ts | 36 +-------- .../pages/BasePageElement/BasePageElement.ts | 36 +-------- src/components/app-link/AppLinkElement.ts | 8 +- src/components/app-main/AppMainElement.ts | 4 +- src/components/app-menu/AppMenuElement.ts | 8 +- src/components/app-modal/AppModalElement.ts | 2 +- .../app-pagination/AppPaginationElement.ts | 2 +- src/components/app-root/AppRootElement.ts | 2 +- src/components/app-slot/AppSlotElement.ts | 2 +- .../input-field/InputFieldElement.ts | 4 +- src/components/menu-item/MenuItemElement.ts | 8 +- src/layouts/menu-layout/MenuLayoutElement.ts | 8 +- src/pages/history-page/HistoryPageElement.ts | 8 +- src/pages/home-page/HomePageElement.ts | 8 +- src/pages/login-page/LoginPageElement.ts | 4 +- src/pages/logout-page/LogoutPageElement.ts | 4 +- src/pages/not-found/NotFoundElement.ts | 4 +- .../register-page/RegisterPageElement.ts | 4 +- 21 files changed, 122 insertions(+), 148 deletions(-) create mode 100644 src/common/core/BaseElement/BaseElement.ts diff --git a/src/common/components/BaseComponentElement/BaseComponentElement.ts b/src/common/components/BaseComponentElement/BaseComponentElement.ts index cab74b9..0a016cf 100644 --- a/src/common/components/BaseComponentElement/BaseComponentElement.ts +++ b/src/common/components/BaseComponentElement/BaseComponentElement.ts @@ -1,43 +1,5 @@ -import { html, render } from "@github/jtml"; -import { AppMainElement } from "components/"; -import { closest } from "core/utils"; +import { BaseElement } from "common/"; -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(); - }; -} +class BaseComponentElement extends BaseElement {} export default BaseComponentElement; diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts new file mode 100644 index 0000000..4c658b1 --- /dev/null +++ b/src/common/core/BaseElement/BaseElement.ts @@ -0,0 +1,75 @@ +import { html, render } from "@github/jtml"; +import { AppMainElement } from "components/"; +import { closest } from "core/utils"; + +class BaseElement extends HTMLElement { + @closest appMain: AppMainElement; + private elementDisconnectCallbacks: Array = []; + constructor() { + super(); + } + + 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]); + const _callback = () => + el.removeEventListener(type, this?.[method]); + this.elementDisconnectCallbacks.push(_callback); + } else { + this.childNodes.forEach((child: HTMLElement) => { + if (child.tagName == tag.toUpperCase()) { + el.addEventListener(type, child?.[method]); + const _callback = () => + el.removeEventListener(type, child?.[method]); + this.elementDisconnectCallbacks.push(_callback); + } + }); + } + } + }); + }; + + render = () => { + return html``; + }; + + update = () => { + render(this.render(), this); + this.bindEvents(); + }; + + connectedCallback() { + this.elementConnected(); + } + + disconnectedCallback() { + this.elementDisconnected(); + if (Array.isArray(this.elementDisconnectCallbacks)) { + this.elementDisconnectCallbacks.forEach((callback: Function) => { + if (typeof callback == "function") { + callback(); + } + }); + } + } + + elementConnected = () => { + this.update(); + }; + + elementDisconnected = () => {}; +} + +export default BaseElement; diff --git a/src/common/index.ts b/src/common/index.ts index 82365c1..623111d 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -1,3 +1,4 @@ +export { default as BaseElement } from "./core/BaseElement/BaseElement"; export * from "./layouts"; export * from "./components"; export * from "./pages"; diff --git a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts index fb07e03..632a170 100644 --- a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts +++ b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts @@ -1,11 +1,8 @@ import { target } from "@github/catalyst"; -import { html, render } from "@github/jtml"; -import { AppMainElement } from "components/"; -import { closest } from "core/utils"; +import { BaseElement } from "common/"; -class BaseLayoutElement extends HTMLElement { +class BaseLayoutElement extends BaseElement { @target appSlot: HTMLElement; - @closest appMain: AppMainElement; public isLayout: boolean = true; public _appSlot: string; constructor() { @@ -28,35 +25,6 @@ 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; diff --git a/src/common/pages/BasePageElement/BasePageElement.ts b/src/common/pages/BasePageElement/BasePageElement.ts index 3df5252..4318497 100644 --- a/src/common/pages/BasePageElement/BasePageElement.ts +++ b/src/common/pages/BasePageElement/BasePageElement.ts @@ -1,37 +1,5 @@ -import { html, render } from "@github/jtml"; -import { AppMainElement } from "components/"; -import { closest } from "core/utils"; +import { BaseElement } from "common/"; -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(); - }; -} +class BasePageElement extends BaseElement {} export default BasePageElement; diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index 52d3f7e..1fad14c 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/src/components/app-link/AppLinkElement.ts @@ -23,7 +23,7 @@ class AppLinkElement extends BaseComponentElement { super(); } - public connectedCallback(): void { + elementConnected = (): void => { this.routerService = this.appMain?.routerService; if (!this.title && this.innerText) { const _slottedText = this.innerText; @@ -34,13 +34,13 @@ class AppLinkElement extends BaseComponentElement { if (isTrue(this.goBack)) { window.addEventListener("routechanged", this.update); } - } + }; - public disconnectedCallback(): void { + elementDisconnected = (): void => { if (isTrue(this.goBack)) { window.removeEventListener("routechanged", this.update); } - } + }; goTo = (e: Event) => { e.preventDefault(); diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index d4b694d..6503dee 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -16,7 +16,7 @@ class AppMainElement extends BaseComponentElement { constructor() { super(); } - connectedCallback() { + elementConnected = () => { if (this.appMain !== this) return; const mainRoot = this.createMainRoot(); this.httpClient = new HttpClient(); @@ -70,7 +70,7 @@ class AppMainElement extends BaseComponentElement { }, ]); this.routerService.init(); - } + }; middleAuth = () => { if (!this.isAuth) { diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index dacebdd..3c10fe9 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -14,7 +14,7 @@ class AppMenuElement extends BaseComponentElement { super(); } - connectedCallback() { + elementConnected = () => { this.walletService = new WalletService(this.appMain?.appService); if (this.appMain.isAuth) { this.getWallets(); @@ -22,11 +22,11 @@ class AppMenuElement extends BaseComponentElement { this.update(); } window.addEventListener("tokenchange", this.updateToken); - } + }; - disconnectedCallback(): void { + elementDisconnected = () => { window.removeEventListener("tokenchange", this.updateToken); - } + }; getWallets = async () => { try { diff --git a/src/components/app-modal/AppModalElement.ts b/src/components/app-modal/AppModalElement.ts index 995ea3e..e40b215 100644 --- a/src/components/app-modal/AppModalElement.ts +++ b/src/components/app-modal/AppModalElement.ts @@ -10,5 +10,5 @@ class AppModalElement extends BaseComponentElement { super(); } - connectedCallback() {} + elementConnected = () => {}; } diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index dcfb4fa..20331bc 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/src/components/app-pagination/AppPaginationElement.ts @@ -16,7 +16,7 @@ class AppPaginationElement extends BaseComponentElement { super(); } - connectedCallback() {} + elementConnected = () => {}; attributeChangedCallback() { this.update(); diff --git a/src/components/app-root/AppRootElement.ts b/src/components/app-root/AppRootElement.ts index 6940ce7..def9b53 100644 --- a/src/components/app-root/AppRootElement.ts +++ b/src/components/app-root/AppRootElement.ts @@ -10,5 +10,5 @@ class AppRootElement extends BaseComponentElement { super(); } - connectedCallback() {} + elementConnected = () => {}; } diff --git a/src/components/app-slot/AppSlotElement.ts b/src/components/app-slot/AppSlotElement.ts index 933058c..e556424 100644 --- a/src/components/app-slot/AppSlotElement.ts +++ b/src/components/app-slot/AppSlotElement.ts @@ -10,5 +10,5 @@ class AppSlotElement extends BaseComponentElement { super(); } - connectedCallback() {} + elementConnected = () => {}; } diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index 8a881b9..38b974e 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/src/components/input-field/InputFieldElement.ts @@ -24,10 +24,10 @@ class InputFieldElement extends BaseComponentElement { super(); } - public connectedCallback(): void { + public elementConnected = () => { this.randId = `${name}${randomId()}`; this.update(); - } + }; get valid(): boolean { return !!this.error; diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index 093a8ad..780b543 100644 --- a/src/components/menu-item/MenuItemElement.ts +++ b/src/components/menu-item/MenuItemElement.ts @@ -16,7 +16,7 @@ class MenuItemElement extends BaseComponentElement { super(); } - public connectedCallback(): void { + public elementConnected = () => { this.routerService = this.appMain?.routerService; if (!this.title && this.innerText) { const _slottedText = this.innerText; @@ -25,11 +25,11 @@ class MenuItemElement extends BaseComponentElement { } this.update(); window.addEventListener("routechanged", this.update); - } + }; - public disconnectedCallback(): void { + public elementDisconnected = () => { window.removeEventListener("routechanged", this.update); - } + }; get current() { return this.routerService.comparePath(this.path); diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts index 680b37d..ed25913 100644 --- a/src/layouts/menu-layout/MenuLayoutElement.ts +++ b/src/layouts/menu-layout/MenuLayoutElement.ts @@ -12,16 +12,16 @@ class MenuLayoutElement extends BaseLayoutElement { super(); } - connectedCallback() { + elementConnected = () => { this.update(); window.addEventListener("tokenchange", this.updateAuth); window.addEventListener("routechanged", this.updateAuth); - } + }; - disconnectedCallback(): void { + elementDisconnected = () => { window.removeEventListener("tokenchange", this.updateAuth); window.removeEventListener("routechanged", this.updateAuth); - } + }; get isAuth() { const _is = this.appMain?.routerService?.routerState?.middleware; diff --git a/src/pages/history-page/HistoryPageElement.ts b/src/pages/history-page/HistoryPageElement.ts index f1b0b00..249aeb2 100644 --- a/src/pages/history-page/HistoryPageElement.ts +++ b/src/pages/history-page/HistoryPageElement.ts @@ -13,18 +13,18 @@ class HistoryPageElement extends BasePageElement { super(); } - connectedCallback() { + elementConnected = () => { this.transactionsService = new TransactionsService( this.appMain?.appService ); this.update(); this.pagination?.setFetchFunc?.(this.getTransactions, true)!; window.addEventListener("tokenchange", this.update); - } + }; - disconnectedCallback(): void { + elementDisconnected = () => { window.removeEventListener("tokenchange", this.update); - } + }; getTransactions = async (options) => { try { diff --git a/src/pages/home-page/HomePageElement.ts b/src/pages/home-page/HomePageElement.ts index ad48032..2ad5691 100644 --- a/src/pages/home-page/HomePageElement.ts +++ b/src/pages/home-page/HomePageElement.ts @@ -12,15 +12,15 @@ class HomePageElement extends BasePageElement { super(); } - connectedCallback() { + elementConnected = () => { this.pingService = new PingService(this.appMain?.appService); this.update(); window.addEventListener("tokenchange", this.update); - } + }; - disconnectedCallback(): void { + elementDisconnected = (): void => { window.removeEventListener("tokenchange", this.update); - } + }; getPong = async () => { try { diff --git a/src/pages/login-page/LoginPageElement.ts b/src/pages/login-page/LoginPageElement.ts index 8d041f8..beadc14 100644 --- a/src/pages/login-page/LoginPageElement.ts +++ b/src/pages/login-page/LoginPageElement.ts @@ -21,11 +21,11 @@ class LoginPageElement extends BasePageElement { constructor() { super(); } - connectedCallback() { + elementConnected = () => { this.authService = new AuthService(this.appMain.appService); this.routerService = this.appMain.routerService; this.update(); - } + }; get emailInput() { for (const i in this.inputs) { diff --git a/src/pages/logout-page/LogoutPageElement.ts b/src/pages/logout-page/LogoutPageElement.ts index 1768b10..80eb2d0 100644 --- a/src/pages/logout-page/LogoutPageElement.ts +++ b/src/pages/logout-page/LogoutPageElement.ts @@ -10,9 +10,9 @@ class LogoutPageElement extends BasePageElement { constructor() { super(); } - connectedCallback() { + elementConnected = () => { this.authService = new AuthService(this.appMain.appService); this.appMain?.authStore?.userLogout(); this.appMain?.routerService.goTo("/login"); - } + }; } diff --git a/src/pages/not-found/NotFoundElement.ts b/src/pages/not-found/NotFoundElement.ts index c25098d..bb085ce 100644 --- a/src/pages/not-found/NotFoundElement.ts +++ b/src/pages/not-found/NotFoundElement.ts @@ -9,9 +9,9 @@ class NotFoundElement extends BasePageElement { constructor() { super(); } - connectedCallback() { + elementConnected = () => { this.update(); - } + }; render = () => { return html` diff --git a/src/pages/register-page/RegisterPageElement.ts b/src/pages/register-page/RegisterPageElement.ts index 5141971..9ef385b 100644 --- a/src/pages/register-page/RegisterPageElement.ts +++ b/src/pages/register-page/RegisterPageElement.ts @@ -12,10 +12,10 @@ class RegisterPageElement extends BasePageElement { constructor() { super(); } - connectedCallback() { + elementConnected = () => { this.authService = new AuthService(this.appMain.appService); this.update(); - } + }; get values(): Object { const formObject = {};