feat: improve actions in sub-menu

* scroll to focus map/block
* refactor methods in dumbyUtils
* refactor MutationObserver for map

1 files changed, 14 insertions, 3 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index ac082b2..9830bf4 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,4 +1,5 @@
 import { createGeoLink } from './dumbymap';
+import { scrollToBlock } from './dumbyUtils';
 
 class Item {
   constructor({ text, innerHTML, onclick }) {
@@ -55,7 +56,10 @@ export const pickMapItem = dumbymap =>
       map =>
         new Item({
           text: map.id,
-          onclick: () => map.classList.add('focus'),
+          onclick: () => {
+            map.classList.add('focus');
+            map.scrollIntoView({ behavior: 'smooth' });
+          },
         }).element,
     ),
   }).element;
@@ -66,8 +70,15 @@ export const pickBlockItem = dumbymap =>
     items: dumbymap.blocks.map(
       (block, index) =>
         new Item({
-          text: `Block ${index}`,
-          onclick: () => block.classList.add('focus'),
+          text:
+            block
+              .querySelector('p')
+              ?.textContent.substring(0, 20)
+              .concat(' ...') ?? `Block ${index}`,
+          onclick: () => {
+            block.classList.add('focus');
+            scrollToBlock(block);
+          },
         }).element,
     ),
   }).element;