Better handling of popup visibility.

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