feat: only show map id when select manually

4 files changed, 17 insertions, 6 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index 8b54539..cffd4a7 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -355,7 +355,11 @@ export const toggleBlockFocus = block =>
 export const toggleMapFocus = map =>
   new Item({
     text: 'Toggle Focus',
-    onclick: () => map.classList.toggle('focus'),
+    onclick: () => {
+      if (map.classList.toggle('focus')) {
+        map.classList.add('focus-manual')
+      }
+    },
   })
 
 /**
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 4a7bf4f..fe6c0d7 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -68,7 +68,7 @@ a[href^='http']:not(:has(img))::after,
 
   transition: flex-basis 300ms ease-in-out;
 
-  &.focus::after {
+  &.focus.focus-manual::after {
     content: 'Map-ID: ' attr(id);
     padding: 0.3rem 0.5rem;
 
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 8148366..170cb16 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -12,7 +12,7 @@ export function focusNextMap (reverse = false) {
   const nextIndex = (index + (reverse ? -1 : 1)) % renderedList.length
 
   const nextMap = renderedList.at(nextIndex)
-  nextMap.classList.add('focus')
+  nextMap.classList.add('focus', 'focus-manual')
   nextMap.scrollIntoView({ behavior: 'smooth' })
 }
 
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index b01c73e..35a4614 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -173,7 +173,7 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
    * mapFocusObserver. observe for map focus
    * @return {MutationObserver} observer
    */
-  const mapFocusObserver = () =>
+  const mapClassObserver = () =>
     new window.MutationObserver(mutations => {
       const mutation = mutations.at(-1)
       const target = mutation.target
@@ -191,6 +191,13 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
           .renderedMaps()
           .filter(map => map.id !== target.id)
           .forEach(map => map.classList.remove('focus'))
+
+        if (target.classList.contains('focus-manual')) {
+          setTimeout(
+            () => target.classList.remove('focus-manual'),
+            2000,
+          )
+        }
       }
 
       if (shouldBeInShowcase) {
@@ -304,7 +311,7 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
     renderCallback?.(renderer)
 
     // Work with Mutation Observer
-    const observer = mapFocusObserver()
+    const observer = mapClassObserver()
     observer.observe(mapElement, {
       attributes: true,
       attributeFilter: ['class'],
@@ -511,4 +518,4 @@ export const generateMaps = (container, { layouts = [], delay, renderCallback }
   )
 
   return Object.seal(dumbymap)
-}
\ No newline at end of file
+}