feat: use focus to decide display in overlay layout

2 files changed, 6 insertions, 12 deletions

diff --git a/src/Layout.mjs b/src/Layout.mjs
index 89a48ae..3c4ea3d 100644
--- a/src/Layout.mjs
+++ b/src/Layout.mjs
@@ -143,7 +143,7 @@ export class Overlay extends Layout {
       wrapper.onmouseup = e => {
         // Hide block with middle click
         if (e.button === 1) {
-          wrapper.classList.add('hide')
+          block.classList.remove('focus')
         }
       }
 
@@ -182,7 +182,7 @@ export class Overlay extends Layout {
 
       // Close button
       wrapper.querySelector('#close').onclick = () => {
-        wrapper.classList.add('hide')
+        block.classList.remove('focus')
         utils.removeAttribute('style')
       }
       // Plus/Minus font-size of content
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index d21c110..3294e40 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -608,6 +608,8 @@ p a[href^='http']::after,
 }
 
 .draggable-block {
+  /* TODO transition for display */
+  display: none;
   overflow: visible;
   width: fit-content;
 
@@ -622,6 +624,8 @@ p a[href^='http']::after,
   pointer-events: auto;
 
   &:has(.dumby-block.focus) {
+    display: block;
+
     z-index: 9001;
     outline: solid #505050 1px;
     border-color: #505050;
@@ -708,16 +712,6 @@ p a[href^='http']::after,
     transform: translate(0, -0.6rem);
   }
 
-  &.hide {
-    transition: all 0.5s;
-    visibility: hidden;
-    opacity: 0;
-
-    .utils {
-      visibility: hidden !important;
-    }
-  }
-
   &.drag,
   &:has(.draggable-part:hover) {
     .handle {