FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-11-11 07:41:09 +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

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