From 4cf84d2fe96c004fef3b508ce344885db74917e2 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Wed, 18 Sep 2024 23:41:15 +0800
Subject: feat: swith focus map by tab key and click

* Use data-focus attribute and MutationObserver to move map-container
  between Sementic HTML and Showcase.

* Currently set return value of docuement.onkeydown in editor, then
  reset onkeydown function in dumbymap. Maybe there is a better way?

* CSS to make placeholder not so obvious
---
 src/css/dumbymap.css | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

(limited to 'src/css')

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 6554ceb..03c6c2a 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -40,8 +40,11 @@
 
   .Showcase {
     order: 2;
-    #mapPlaceholder {
-      display: none;
+    display: none;
+
+    .map-container {
+      width: 100% !important;
+      height: 100% !important;
     }
   }
 
@@ -74,9 +77,11 @@
     }
 
     .map-container {
+      background: white;
       margin: 2px;
-      &.focus {
-        border: solid gray;
+      border: 3px solid transparent;
+      &[data-focus=true] {
+        border: 3px solid gray;
       }
     }
 
@@ -90,6 +95,11 @@
         width: fit-content;
         flex: 0 0;
       }
+    [data-placeholder] {
+      box-sizing: border-box;
+      border: 5px solid white;
+      background: lightgray;
+      margin: 0;
     }
   }
 
@@ -116,6 +126,10 @@
     display: none;
     pointer-events: none;
   }
+
+  .Showcase {
+    display: block;
+  }
 }
 
 .DumbyMap[data-layout=side] {
@@ -191,9 +205,14 @@
         }
       }
     }
+
     > :not(.draggable-block) {
       display: none;
     }
+
+    [data-placeholder] {
+      max-width: 50px;
+    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2