From 9d4032abf1ab33849a7cbc83d51411d73dc8a727 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Mon, 30 Sep 2024 12:09:32 +0800
Subject: feat: improve actions in sub-menu

* scroll to focus map/block
* refactor methods in dumbyUtils
* refactor MutationObserver for map
---
 src/dumbyUtils.mjs | 71 ++++++++++++++++++++++++------------------------------
 1 file changed, 31 insertions(+), 40 deletions(-)

(limited to 'src/dumbyUtils.mjs')

diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs
index 140d671..e7edee3 100644
--- a/src/dumbyUtils.mjs
+++ b/src/dumbyUtils.mjs
@@ -1,24 +1,41 @@
 export function focusNextMap(reverse = false) {
   const renderedList = this.utils.renderedMaps();
+  const index = renderedList.findIndex(e => e.classList.contains('focus'));
+  const nextIndex =
+    index === -1 ? 0 : (index + (reverse ? -1 : 1)) % renderedList.length;
 
-  const mapNum = renderedList.length;
-  if (mapNum === 0) return;
-
-  // Get current focused map element
-  const currentFocus = this.container.querySelector('.mapclay.focus');
+  const nextMap = renderedList.at(nextIndex);
+  nextMap.classList.add('focus');
+}
 
-  // Get next existing map element
-  const padding = reverse ? -1 : 1;
-  let nextIndex = currentFocus
-    ? renderedList.indexOf(currentFocus) + padding
-    : 0;
-  nextIndex = (nextIndex + mapNum) % mapNum;
-  const nextFocus = renderedList[nextIndex];
-  nextFocus.classList.add('focus');
+export function focusNextBlock(reverse = false) {
+  const blocks = this.blocks.filter(b =>
+    b.checkVisibility({
+      contentVisibilityAuto: true,
+      opacityProperty: true,
+      visibilityProperty: true,
+    }),
+  );
+  const index = blocks.findIndex(e => e.classList.contains('focus'));
+  const nextIndex =
+    index === -1 ? 0 : (index + (reverse ? -1 : 1)) % blocks.length;
 
-  return nextFocus;
+  const nextBlock = blocks.at(nextIndex);
+  blocks.forEach(b => b.classList.remove('focus'));
+  nextBlock?.classList?.add('focus');
+  scrollToBlock(nextBlock);
 }
 
+// Consider block is bigger then viewport height
+export const scrollToBlock = block => {
+  const parentRect = block.parentElement.getBoundingClientRect();
+  const scrollBlock =
+    block.getBoundingClientRect().height > parentRect.height * 0.8
+      ? 'nearest'
+      : 'center';
+  block.scrollIntoView({ behavior: 'smooth', block: scrollBlock });
+};
+
 export function focusDelay() {
   return window.getComputedStyle(this.showcase).display === 'none' ? 50 : 300;
 }
@@ -36,32 +53,6 @@ export function switchToNextLayout(reverse = false) {
   this.container.setAttribute('data-layout', nextLayout.name);
 }
 
-export function focusNextBlock(reverse = false) {
-  const blocks = this.blocks.filter(b =>
-    b.checkVisibility({
-      contentVisibilityAuto: true,
-      opacityProperty: true,
-      visibilityProperty: true,
-    }),
-  );
-  const currentBlock = blocks.find(b => b.classList.contains('focus'));
-  const currentIndex = blocks.indexOf(currentBlock);
-  const padding = reverse ? -1 : 1;
-  const nextIndex =
-    currentIndex === -1
-      ? 0
-      : (currentIndex + padding + blocks.length) % blocks.length;
-  const nextBlock = blocks[nextIndex];
-  blocks.forEach(b => b.classList.remove('focus'));
-  nextBlock?.classList?.add('focus');
-  const scrollBlock =
-    nextBlock.getBoundingClientRect().height >
-    nextBlock.parentElement.getBoundingClientRect().height * 0.8
-      ? 'nearest'
-      : 'center';
-  nextBlock.scrollIntoView({ behavior: 'smooth', block: scrollBlock });
-}
-
 export function removeBlockFocus() {
   this.blocks.forEach(b => b.classList.remove('focus'));
 }
-- 
cgit v1.2.3-70-g09d2