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

formatted files

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-11 19:06:43 +02:00
parent 47f6207798
commit 130246ca88
70 changed files with 3281 additions and 21038 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { BaseElement } from "common/";
import { BaseElement } from 'common/';
class BaseComponentElement extends BaseElement {}

2
src/common/components/index.ts
View File

@@ -1 +1 @@
export { default as BaseComponentElement } from "./BaseComponentElement/BaseComponentElement";
export { default as BaseComponentElement } from './BaseComponentElement/BaseComponentElement';

219
src/common/core/BaseElement/BaseElement.ts
View File

@@ -1,142 +1,133 @@
import { html, render, TemplateResult } from "lit-html";
import {
AppLoaderElement,
AppMainElement,
AppModalElement,
AppRootElement,
} from "components/";
import { AppService, RouterService } from "core/services";
import { AuthStore } from "core/store";
import { closest } from "core/utils";
import { html, render, TemplateResult } from 'lit-html';
import { AppLoaderElement, AppMainElement, AppModalElement, AppRootElement } from 'components/';
import { AppService, RouterService } from 'core/services';
import { AuthStore } from 'core/store';
import { closest } from 'core/utils';
class BaseElement extends HTMLElement {
@closest appMain: AppMainElement;
private _appMain: AppMainElement;
public loader: Loader;
private elementDisconnectCallbacks: Array<Function> = [];
constructor() {
super();
this.connectedCallback = this.connectedCallback.bind(this);
this.disconnectedCallback = this.disconnectedCallback.bind(this);
this.loader = new Loader(this);
}
@closest appMain: AppMainElement;
private _appMain: AppMainElement;
public loader: Loader;
private elementDisconnectCallbacks: Array<Function> = [];
constructor() {
super();
this.connectedCallback = this.connectedCallback.bind(this);
this.disconnectedCallback = this.disconnectedCallback.bind(this);
this.loader = new Loader(this);
}
public get routerService(): RouterService {
return this.appMain?.routerService;
}
public get routerService(): RouterService {
return this.appMain?.routerService;
}
public get authStore(): AuthStore {
return this.appMain?.authStore;
}
public get authStore(): AuthStore {
return this.appMain?.authStore;
}
public get appService(): AppService {
return this.appMain?.appService;
}
public get appService(): AppService {
return this.appMain?.appService;
}
public get appModal(): AppModalElement {
return this.appMain?.appModal;
}
public get appModal(): AppModalElement {
return this.appMain?.appModal;
}
public get mainRoot(): AppRootElement {
return this.appMain?.mainRoot;
}
public get appLoader(): AppLoaderElement {
return this.appMain?.appLoader;
}
public get mainRoot(): AppRootElement {
return this.appMain?.mainRoot;
}
public get appLoader(): AppLoaderElement {
return this.appMain?.appLoader;
}
public get isAuth(): boolean {
return this.appMain?.isAuth();
}
public get isAuth(): boolean {
return this.appMain?.isAuth();
}
public bindEvents = (attrName): void => {
const _elems = this.querySelectorAll(`[${attrName}]`);
_elems?.forEach((el) => {
for (const action of (el.getAttribute(attrName) || "")
.trim()
.split(/\s+/)) {
const eventSep = action.lastIndexOf(":");
const methodSep = action.lastIndexOf("#");
const tag = action.slice(eventSep + 1, methodSep);
public bindEvents = (attrName): void => {
const _elems = this.querySelectorAll(`[${attrName}]`);
_elems?.forEach((el) => {
for (const action of (el.getAttribute(attrName) || '').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);
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);
}
});
}
}
});
};
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 = (): TemplateResult | Temp => {
return html``;
};
render = (): TemplateResult | Temp => {
return html``;
};
updateCallback = (): void => {};
updateCallback = (): void => {};
update = (): void => {
render(this.render(), this);
this.bindEvents("data-action");
this.bindEvents("app-action");
this.updateCallback();
};
update = (): void => {
render(this.render(), this);
this.bindEvents('data-action');
this.bindEvents('app-action');
this.updateCallback();
};
connectedCallback(): void {
this.elementConnected();
this._appMain = this.appMain;
}
connectedCallback(): void {
this.elementConnected();
this._appMain = this.appMain;
}
disconnectedCallback(): void {
const { _appMain } = this;
this.elementDisconnected(_appMain);
if (Array.isArray(this.elementDisconnectCallbacks)) {
this.elementDisconnectCallbacks.forEach((callback: Function) => {
if (typeof callback == "function") {
callback(_appMain);
}
});
}
}
disconnectedCallback(): void {
const { _appMain } = this;
this.elementDisconnected(_appMain);
if (Array.isArray(this.elementDisconnectCallbacks)) {
this.elementDisconnectCallbacks.forEach((callback: Function) => {
if (typeof callback == 'function') {
callback(_appMain);
}
});
}
}
elementConnected = (): void => {
this.update();
};
elementConnected = (): void => {
this.update();
};
elementDisconnected = (appMain: AppMainElement): void => {};
elementDisconnected = (appMain: AppMainElement): void => {};
}
export default BaseElement;
class Loader {
private _loading: number = 0;
private _loading: number = 0;
constructor(private _main: BaseElement) {}
constructor(private _main: BaseElement) {}
public start = () => {
this._loading++;
this._main?.update?.();
};
public start = () => {
this._loading++;
this._main?.update?.();
};
public stop = () => {
if (this._loading > 0) {
this._loading--;
this._main?.update?.();
}
};
public stop = () => {
if (this._loading > 0) {
this._loading--;
this._main?.update?.();
}
};
public get loading() {
return this._loading > 0;
}
public get loading() {
return this._loading > 0;
}
}

8
src/common/index.ts
View File

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

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

@@ -1,30 +1,30 @@
import { target } from "@github/catalyst";
import { BaseElement } from "common/";
import { target } from '@github/catalyst';
import { BaseElement } from 'common/';
class BaseLayoutElement extends BaseElement {
@target appSlot: HTMLElement;
public isLayout: boolean = true;
public _appSlot: string;
constructor() {
super();
}
@target appSlot: HTMLElement;
public isLayout: boolean = true;
public _appSlot: string;
constructor() {
super();
}
get slotTag(): string {
return this.appSlot?.firstElementChild?.tagName;
}
get slotTag(): string {
return this.appSlot?.firstElementChild?.tagName;
}
compareTags = (tag: string | HTMLElement): boolean => {
if (typeof tag === "string") {
return this.slotTag === tag;
}
return tag?.tagName === this.slotTag;
};
compareTags = (tag: string | HTMLElement): boolean => {
if (typeof tag === 'string') {
return this.slotTag === tag;
}
return tag?.tagName === this.slotTag;
};
setElement = (newTag: string): void => {
const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`;
this._appSlot = _appSlot;
this.appSlot.innerHTML = _appSlot;
};
setElement = (newTag: string): void => {
const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`;
this._appSlot = _appSlot;
this.appSlot.innerHTML = _appSlot;
};
}
export default BaseLayoutElement;

2
src/common/layouts/index.ts
View File

@@ -1 +1 @@
export { default as BaseLayoutElement } from "./BaseLayoutElement/BaseLayoutElement";
export { default as BaseLayoutElement } from './BaseLayoutElement/BaseLayoutElement';

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

@@ -1,45 +1,43 @@
import { attr } from "@github/catalyst";
import { html, render } from "lit-html";
import { BaseElement } from "common/";
import { isTrue } from "core/utils";
import { attr } from '@github/catalyst';
import { html, render } from 'lit-html';
import { BaseElement } from 'common/';
import { isTrue } from 'core/utils';
class BasePageElement extends BaseElement {
public pageTitle: string = "";
@attr hidetitle: string;
@attr customtitle: string;
constructor(options: OptionType) {
super();
if (options?.title) {
this.pageTitle = options?.title;
}
this.connectedCallback = this.connectedCallback.bind(this);
this.disconnectedCallback = this.disconnectedCallback.bind(this);
}
public pageTitle: string = '';
@attr hidetitle: string;
@attr customtitle: string;
constructor(options: OptionType) {
super();
if (options?.title) {
this.pageTitle = options?.title;
}
this.connectedCallback = this.connectedCallback.bind(this);
this.disconnectedCallback = this.disconnectedCallback.bind(this);
}
public renderTitle = () => {
if (!isTrue(this.hidetitle)) {
return html`<div class="page --title">
${this.customtitle ? this.customtitle : this.pageTitle}
</div>`;
}
return html``;
};
public renderTitle = () => {
if (!isTrue(this.hidetitle)) {
return html`<div class="page --title">${this.customtitle ? this.customtitle : this.pageTitle}</div>`;
}
return html``;
};
update = (): void => {
const _render = () => html` ${this.renderTitle()} ${this.render()} `;
render(_render(), this);
this.bindEvents("app-action");
this.updateCallback();
};
update = (): void => {
const _render = () => html` ${this.renderTitle()} ${this.render()} `;
render(_render(), this);
this.bindEvents('app-action');
this.updateCallback();
};
connectedCallback() {
this.appMain.setTitle(this.pageTitle);
super.connectedCallback();
}
connectedCallback() {
this.appMain.setTitle(this.pageTitle);
super.connectedCallback();
}
}
export default BasePageElement;
export type OptionType = {
title?: string;
title?: string;
};

2
src/common/pages/index.ts
View File

@@ -1 +1 @@
export { default as BasePageElement } from "./BasePageElement/BasePageElement";
export { default as BasePageElement } from './BasePageElement/BasePageElement';