From 5eefd9c2e4f948cddecf313231afdc62aa1531cd Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Mon, 23 Sep 2024 00:51:22 +0800
Subject: feat(layout): transition to reduce height of empty block

---
 src/css/dumbymap.css | 10 ++++++++++
 src/dumbymap.mjs     |  8 +++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index b4689b9..591c9ec 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -397,6 +397,16 @@
   }
 }
 
+.dumby-block:has(pre:only-child [data-placeholder]:only-child) {
+  overflow: clip;
+
+  [data-placeholder] {
+    height: 50px !important;
+    scale: .9;
+    transition-duration: .4s;
+    transition-timing-function: ease-out;
+  }
+}
 
 .bold-options {
   font-weight: bold;
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 9665c9c..42a507f 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -250,9 +250,15 @@ export const generateMaps = async (container, callback) => {
       // Placeholder for map in Showcase, it should has the same DOMRect
       const placeholder = target.cloneNode(true)
       placeholder.classList.remove('map-container')
-      placeholder.setAttribute('data-placeholder', target.id)
       target.parentElement.replaceChild(placeholder, target)
 
+      // HACK Trigger CSS transition, if placeholde is the olny chil element in block,
+      // reduce its height to zero.
+      // To make sure the original height of placeholder is applied, callBoundingClientRect() seems work(Why?).
+      // then set data-attribute for CSS selector to change height to 0
+      placeholder.getBoundingClientRect()
+      placeholder.setAttribute('data-placeholder', target.id)
+
       // To fit showcase, remove all inline style
       target.removeAttribute('style')
       showcase.appendChild(target)
-- 
cgit v1.2.3-70-g09d2