From ac66fd66dfe20c91588afaa4837fd046b32c27ee Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Tue, 24 Sep 2024 18:44:37 +0800
Subject: feat: improve focus utils

* use block height to determine behavior of scrollIntoView()
* change color of indicator for focused block
* make indicator always visible
---
 src/css/dumbymap.css | 15 ++++++++++-----
 src/dumbyUtils.mjs   |  5 ++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index e87e228..f4abaad 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -101,12 +101,17 @@
     left: 0.8rem;
 
     border-left: 0.5em solid #e0e0e0;
+    transition: border-color .5s linear;
   }
 
   &.focus {
-    background: var(--block-focus-color);
+    /* background: var(--block-focus-color); */
+    &::before {
+      border-color: chocolate;
+    }
 
     &::after {
+      z-index: 9999;
       content: counter(block) "/" attr(data-total);
       padding: .3rem .5rem;
 
@@ -126,7 +131,7 @@
       font-weight: bold;
 
       opacity: 0;
-      animation: 1s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
+      animation: 1.5s forwards fade-out cubic-bezier(.44,.18,.86,-0.21);
     }
   }
 }
@@ -400,9 +405,9 @@
       background: linear-gradient(0deg, rgb(255 255 255 / 0%), white 60%);
     }
 
-    &.focus::before {
-      background: linear-gradient(0deg, rgb(255 255 255 / 0%), var(--block-focus-color) 60%);
-    }
+    /* &.focus::before { */
+    /*   background: linear-gradient(0deg, rgb(255 255 255 / 0%), var(--block-focus-color) 60%); */
+    /* } */
 
     .map-container {
       min-width: 200px;
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index ba0bbf8..fc9eab9 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -49,7 +49,10 @@ export function focusNextBlock(reverse = false) {
   const nextBlock = blocks[nextIndex]
   blocks.forEach(b => b.classList.remove('focus'))
   nextBlock?.classList?.add('focus')
-  nextBlock.scrollIntoView({ behavior: 'smooth', block: "nearest" })
+  const scrollBlock = nextBlock.getBoundingClientRect().height > nextBlock.parentElement.getBoundingClientRect().height * 0.8
+    ? 'nearest'
+    : 'center'
+  nextBlock.scrollIntoView({ behavior: 'smooth', block: scrollBlock })
 }
 
 export function removeBlockFocus() {
-- 
cgit v1.2.3-70-g09d2