FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

custom callbacks from base element

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-02 14:05:38 +02:00
parent ffef98e7a5
commit ca51c304f3
21 changed files with 122 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/common/components/BaseComponentElement/BaseComponentElement.ts
View File

@@ -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;

75
src/common/core/BaseElement/BaseElement.ts Normal file
View File

@@ -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<Function> = [];
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;

1
src/common/index.ts
View File

@@ -1,3 +1,4 @@
export { default as BaseElement } from "./core/BaseElement/BaseElement";
export * from "./layouts";
export * from "./components";
export * from "./pages";

36
src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
View File

@@ -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;

36
src/common/pages/BasePageElement/BasePageElement.ts
View File

@@ -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;

8
src/components/app-link/AppLinkElement.ts
View File

@@ -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();

4
src/components/app-main/AppMainElement.ts
View File

@@ -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) {

8
src/components/app-menu/AppMenuElement.ts
View File

@@ -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 {

2
src/components/app-modal/AppModalElement.ts
View File

@@ -10,5 +10,5 @@ class AppModalElement extends BaseComponentElement {
super();
}
connectedCallback() {}
elementConnected = () => {};
}

2
src/components/app-pagination/AppPaginationElement.ts
View File

@@ -16,7 +16,7 @@ class AppPaginationElement extends BaseComponentElement {
super();
}
connectedCallback() {}
elementConnected = () => {};
attributeChangedCallback() {
this.update();

2
src/components/app-root/AppRootElement.ts
View File

@@ -10,5 +10,5 @@ class AppRootElement extends BaseComponentElement {
super();
}
connectedCallback() {}
elementConnected = () => {};
}

2
src/components/app-slot/AppSlotElement.ts
View File

@@ -10,5 +10,5 @@ class AppSlotElement extends BaseComponentElement {
super();
}
connectedCallback() {}
elementConnected = () => {};
}

4
src/components/input-field/InputFieldElement.ts
View File

@@ -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;

8
src/components/menu-item/MenuItemElement.ts
View File

@@ -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);

8
src/layouts/menu-layout/MenuLayoutElement.ts
View File

@@ -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;

8
src/pages/history-page/HistoryPageElement.ts
View File

@@ -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 {

8
src/pages/home-page/HomePageElement.ts
View File

@@ -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 {

4
src/pages/login-page/LoginPageElement.ts
View File

@@ -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) {

4
src/pages/logout-page/LogoutPageElement.ts
View File

@@ -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");
}
};
}

4
src/pages/not-found/NotFoundElement.ts
View File

@@ -9,9 +9,9 @@ class NotFoundElement extends BasePageElement {
constructor() {
super();
}
connectedCallback() {
elementConnected = () => {
this.update();
}
};
render = () => {
return html`

4
src/pages/register-page/RegisterPageElement.ts
View File

@@ -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 = {};