diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-12-10 00:12:52 +0100 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-12-10 00:12:52 +0100 |
commit | 03331033ea7105f4f7adbae639c22efa98fa8017 (patch) | |
tree | 94c84c64fceb05f7cbf2c414a57af05d7bf2bc29 /static | |
parent | Propagate recurring events to frontend. (diff) | |
download | calp-03331033ea7105f4f7adbae639c22efa98fa8017.tar.gz calp-03331033ea7105f4f7adbae639c22efa98fa8017.tar.xz |
Better handling of popup visibility.
Diffstat (limited to 'static')
-rw-r--r-- | static/components/popup-element.ts | 22 | ||||
-rw-r--r-- | static/popup.ts | 2 | ||||
-rw-r--r-- | static/style.scss | 2 |
3 files changed, 17 insertions, 9 deletions
diff --git a/static/components/popup-element.ts b/static/components/popup-element.ts index 0a142348..42e8ee7f 100644 --- a/static/components/popup-element.ts +++ b/static/components/popup-element.ts @@ -12,8 +12,6 @@ import { remove_event } from '../server_connect' /* <popup-element /> */ class PopupElement extends ComponentVEvent { - isVisible: boolean = false; - constructor(uid?: string) { super(uid); @@ -74,17 +72,27 @@ class PopupElement extends ComponentVEvent { return ['visible']; } + attributeChangedCallback(name: string, oldValue?: string, newValue?: string) { + switch (name) { + case 'visible': + this.onVisibilityChange() + break; + } + } + get visible(): boolean { - return this.isVisible; + return this.hasAttribute('visible'); } set visible(isVisible: boolean) { - this.isVisible = isVisible; - if (this.isVisible) { - this.classList.add('visible'); + if (isVisible) { + this.setAttribute('visible', 'visible'); } else { - this.classList.remove('visible'); + this.removeAttribute('visible'); } + } + + private onVisibilityChange() { /* TODO better way to find root */ let root; diff --git a/static/popup.ts b/static/popup.ts index 1635fab2..69edbb6e 100644 --- a/static/popup.ts +++ b/static/popup.ts @@ -39,7 +39,7 @@ function close_popup(popup: PopupElement): void { /* hides all popups */ function close_all_popups() { - for (let popup of document.querySelectorAll("popup-element.visible")) { + for (let popup of document.querySelectorAll("popup-element[visible]")) { close_popup(popup as PopupElement) } } diff --git a/static/style.scss b/static/style.scss index a76a76c2..847ffb16 100644 --- a/static/style.scss +++ b/static/style.scss @@ -778,7 +778,7 @@ popup-element { box-shadow: gray 10px 10px 10px; - &.visible { + &[visible] { display: block; } |