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

implemented modals

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-01 12:23:50 +02:00
parent 1e2895f22f
commit 86d2cec105
4 changed files with 91 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@ class BaseLayoutElement extends HTMLElement {
};
setElement = (newTag: string) => {
const _appSlot = `<${newTag}></${newTag}>`;
const _appSlot = `<div data-target="base-layout.content"><${newTag}></${newTag}></div>`;
this._appSlot = _appSlot;
this.appSlot.innerHTML = _appSlot;
};

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

@@ -51,16 +51,20 @@ class AppLinkElement extends HTMLElement {
render = () => {
return html`${this.disabled
? html`<span data-target="app-link.main" style="color:grey"
? html`<span
class="btn btn-link btn-disabled"
data-target="app-link.main"
style="color:grey"
>${this.title}</span
>`
: html`<span
class="btn btn-link btn-disabled"
data-target="app-link.main"
data-action="click:app-link#goTo"
style="text-decoration: underline; cursor: pointer;"
>${this.title}</span
>`}`;
}
};
update = () => {
render(this.render(), this);

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

@@ -77,17 +77,44 @@ 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);
const _appModal = this.createAppModal();
const _modalContent = this.createModalContent(element);
const _modalOverlay = this.createModalOverlay();
_modalOverlay.appendChild(_modalContent);
_appModal.appendChild(_modalOverlay);
this.appendChild(_appModal);
};
createMainRoot = () => {
private createAppModal = () => {
const _appModal = document.createElement("app-modal");
_appModal.setAttribute("data-target", "app-main.appModal");
return _appModal;
};
private createModalContent = (element: string) => {
const _modalElement = document.createElement(element);
const _divEl = document.createElement("div");
_modalElement.setAttribute("data-target", "app-modal.modalElement");
_modalElement.setAttribute(
"data-action",
"click:app-main#preventClosing"
);
_divEl.setAttribute("data-target", "app-modal.modalContent");
_divEl.appendChild(_modalElement);
return _divEl;
};
private createModalOverlay = () => {
const _divOverlay = document.createElement("div");
_divOverlay.setAttribute("data-target", "app-modal.modalOverlay");
_divOverlay.setAttribute("data-action", "click:app-main#closeModal");
return _divOverlay;
};
private createMainRoot = () => {
if (this.mainRoot) this.removeChild(this.mainRoot);
const _mainRoot = document.createElement("app-root");
_mainRoot.setAttribute("data-target", "app-main.mainRoot");
@@ -95,6 +122,10 @@ class AppMainElement extends HTMLElement {
return _mainRoot;
};
preventClosing = (e: Event) => {
e.stopPropagation();
};
closeModal = () => {
if (this.appModal) this.removeChild(this.appModal);
};

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

@@ -59,49 +59,55 @@ class AppMenuElement extends HTMLElement {
render = () => {
return html`
<ul>
<li>
<app-link data-to="/">Home</app-link>
</li>
${this.isAuth
? html` <li>
<app-link data-to="/history">History</app-link>
</li>`
: null}
${this.isAuth && this.totalWallets > 0
? this.walletData.map((wallet) => {
return html`
<div data-target="app-menu.sidebar">
<ul>
<li>
<app-link data-to="/">Home</app-link>
</li>
${this.isAuth
? html` <li>
<app-link data-to="/history">History</app-link>
</li>`
: null}
${this.isAuth && this.totalWallets > 0
? this.walletData.map((wallet) => {
return html`
<li>
<app-link data-to="/wallet/${wallet.id}"
>${wallet.name}</app-link
>
</li>
`;
})
: null}
${this.isAuth && this.totalWallets > 2
? html`
<li>
<app-link data-to="/wallet/${wallet.id}"
>${wallet.name}</app-link
<app-link data-to="/wallet/all"
>Other</app-link
>
</li>
`;
})
: null}
${this.isAuth && this.totalWallets > 2
? html`
<li>
<app-link data-to="/wallet/all">Other</app-link>
</li>
`
: null}
${this.isAuth
? html` <li>
<app-link data-to="/logout">Logout</app-link>
</li>`
: null}
${!this.isAuth
? html`
<li>
<app-link data-to="/login">Login</app-link>
</li>
<li>
<app-link data-to="/register">Register</app-link>
</li>
`
: null}
</ul>
`
: null}
${this.isAuth
? html` <li>
<app-link data-to="/logout">Logout</app-link>
</li>`
: null}
${!this.isAuth
? html`
<li>
<app-link data-to="/login">Login</app-link>
</li>
<li>
<app-link data-to="/register"
>Register</app-link
>
</li>
`
: null}
</ul>
</div>
`;
};
}