From 8730a7ea5192177e217ccf2f76e1336305ae5d7d Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Tue, 24 Sep 2024 14:08:07 +0800
Subject: feat: add block indicator by peudo element

---
 src/css/dumbymap.css | 30 ++++++++++++++++++++++++++++--
 src/dumbymap.mjs     |  7 +++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index a7729f0..e6e736a 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -1,5 +1,6 @@
 .Dumby {
   --block-focus-color: lightyellow;
+  counter-reset: block;
 }
 
 [class^="leader-line"] {
@@ -13,7 +14,7 @@
 
 @keyframes fade-out {
   from { opacity: 1; }
-  to { opacity: 0; }
+  to { opacity: 0; visibility: hidden; }
 }
 
 @keyframes map-fade-in {
@@ -90,11 +91,13 @@
 
   position: relative;
 
+  counter-increment: block;
+
   &::before {
     content: "";
     height: calc(100% - 2rem);
-
     position: absolute;
+
     left: 0.8rem;
 
     border-left: 0.5em solid #e0e0e0;
@@ -102,6 +105,29 @@
 
   &.focus {
     background: var(--block-focus-color);
+
+    &::after {
+      content: counter(block) "/" attr(data-total);
+      padding: .3rem .5rem;
+
+      position: absolute;
+      left: 0;
+      top: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      border: solid transparent;
+      border-radius: 5px;
+
+      background: gray;
+
+      color: white;
+      font-size: 1.5em;
+      font-weight: bold;
+
+      opacity: 0;
+      animation: 1s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
+    }
   }
 }
 
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 595de5c..1e8c38d 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -131,8 +131,11 @@ export const markdown2HTML = (container, mdContent) => {
   htmlHolder.innerHTML = md.render(contentWithToc);
 
   // TODO Do this in markdown-it
-  htmlHolder.querySelectorAll(':scope > div:not(:has(nav))')
-    .forEach(b => b.classList.add('dumby-block'))
+  const blocks = htmlHolder.querySelectorAll(':scope > div:not(:has(nav))')
+  blocks.forEach(b => {
+    b.classList.add('dumby-block')
+    b.setAttribute('data-total', blocks.length)
+  })
 
   return container
   //}}}
-- 
cgit v1.2.3-70-g09d2