From 64b54b3568f0d3fbabcd15a9d42bfe018e72c417 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Sat, 12 Jun 2021 21:21:03 +0200 Subject: [PATCH] implemented toasts --- src/common/core/BaseElement/BaseElement.ts | 2 +- .../app-dropdown/AppDropdownElement.ts | 24 +- src/components/app-main/AppMainElement.ts | 37 +- src/components/app-menu/AppMenuElement.ts | 1 + src/components/app-modal/AppModalElement.ts | 1 + src/components/app-shadow/AppShadowElement.ts | 2 + src/components/index.ts | 1 + .../toast-portal/ToastPortalElement.ts | 57 + src/core/utils/directives/delay.ts | 8 + src/core/utils/directives/until.ts | 64 + src/core/utils/index.ts | 4 + src/core/utils/templating.ts | 4 +- src/core/utils/timer.ts | 20 + src/styles/main.scss | 1 + src/styles/toast-portal/index.scss | 1 + src/styles/toast-portal/toast-portal.scss | 29 + yarn-error.log | 6941 +++++++++++++++++ 17 files changed, 7186 insertions(+), 11 deletions(-) create mode 100644 src/components/toast-portal/ToastPortalElement.ts create mode 100644 src/core/utils/directives/delay.ts create mode 100644 src/core/utils/directives/until.ts create mode 100644 src/core/utils/timer.ts create mode 100644 src/styles/toast-portal/index.scss create mode 100644 src/styles/toast-portal/toast-portal.scss create mode 100644 yarn-error.log diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts index eb738d3..af302fa 100644 --- a/src/common/core/BaseElement/BaseElement.ts +++ b/src/common/core/BaseElement/BaseElement.ts @@ -8,7 +8,7 @@ class BaseElement extends HTMLElement { @closest appMain: AppMainElement; private _appMain: AppMainElement; public loader: Loader; - private elementDisconnectCallbacks: Array = []; + public elementDisconnectCallbacks: Array = []; constructor() { super(); this.connectedCallback = this.connectedCallback.bind(this); diff --git a/src/components/app-dropdown/AppDropdownElement.ts b/src/components/app-dropdown/AppDropdownElement.ts index 4165923..554ba11 100644 --- a/src/components/app-dropdown/AppDropdownElement.ts +++ b/src/components/app-dropdown/AppDropdownElement.ts @@ -46,6 +46,11 @@ class AppDropdownElement extends BaseComponentElement { this.validator = new Validator(this, this.appForm, this.rules); this.randId = `${name}${randomId()}`; this.update(); + this.appMain.addEventListener('click', this.outsideClick); + this.elementDisconnectCallbacks.push((appMain) => { + console.log('oslo'); + appMain.removeEventListener('click', this.outsideClick); + }); const options = { rpp: this.rpp, @@ -54,6 +59,13 @@ class AppDropdownElement extends BaseComponentElement { this.getItems(options); }; + elementDisconnected = (): void => {}; + + outsideClick = (e) => { + console.log(e.target); + this.closeDropdown(e); + }; + attributeChangedCallback(): void { this.update(); } @@ -135,10 +147,16 @@ class AppDropdownElement extends BaseComponentElement { this.isOpen = isOpen; }; - openDropdown = () => { + openDropdown = (e?) => { + if (e?.target?.closest('app-dropdown > .dropdown-custom')?.randId == this.randId) return; this.setOpen(true); }; + closeDropdown = (e?) => { + if (e?.target?.closest('app-dropdown')?.randId == this.randId) return; + this.setOpen(false); + }; + stopPropagation = (e) => { e.stopPropagation(); }; @@ -179,9 +197,9 @@ class AppDropdownElement extends BaseComponentElement { return html`
-