@govbr-ds/webcomponents 2.1.3 → 2.2.0

package/dist/collection/pages/scripts/menu.js

@@ -2,6 +2,10 @@
 let MenuItems = [];
 // Expõe referências no escopo global para integração com pageLoader.js
 window.MENU_ITEMS = MenuItems;
+let menuItemsSignature = '';
+let menuItemsRefreshTimer = 0;
+let menuItemsRefreshInFlight = false;
+const MENU_ITEMS_REFRESH_INTERVAL = 750;
 
 function getBaseUrlFromPageLoader() {
   if (typeof window.getBaseUrl === 'function') {
@@ -12,9 +16,9 @@ function getBaseUrlFromPageLoader() {
   return pathname.endsWith('/') ? pathname.replace(/\/+$/, '') : pathname.slice(0, pathname.lastIndexOf('/'));
 }
 
-function loadPageFromPageLoader(path, files) {
+function loadPageFromPageLoader(path, examples, presets, baseScript) {
   if (typeof window.loadPage === 'function') {
-    window.loadPage(path, files);
+    window.loadPage(path, examples, presets, baseScript);
   }
 }
 
@@ -28,18 +32,55 @@ function getRefs() {
   return refs;
 }
 
+let activeMenuScrollFrame = 0;
+
+function scrollActiveMenuItemIntoView() {
+  if (activeMenuScrollFrame) {
+    window.cancelAnimationFrame(activeMenuScrollFrame);
+    activeMenuScrollFrame = 0;
+  }
+
+  const { MENU_BODY } = getRefs();
+  const activeItem = MENU_BODY?.querySelector('.menu-item.active');
+  if (!activeItem) return;
+
+  const itemReady =
+    typeof activeItem.componentOnReady === 'function' ? activeItem.componentOnReady() : Promise.resolve();
+  Promise.resolve(itemReady).then(() => {
+    if (!activeItem.isConnected || !activeItem.classList.contains('active')) return;
+
+    // Aguarda a renderização do menu para que o painel tenha suas dimensões finais.
+    activeMenuScrollFrame = window.requestAnimationFrame(() => {
+      activeMenuScrollFrame = window.requestAnimationFrame(() => {
+        activeMenuScrollFrame = 0;
+        if (!activeItem.isConnected || !activeItem.classList.contains('active')) return;
+
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        activeItem.scrollIntoView({
+          behavior: prefersReducedMotion ? 'auto' : 'smooth',
+          block: 'center',
+          inline: 'nearest',
+        });
+      });
+    });
+  });
+}
+
+window.scrollActiveMenuItemIntoView = scrollActiveMenuItemIntoView;
+
 async function loadMenuItems() {
   const baseUrl = getBaseUrlFromPageLoader();
   const maxAttempts = 200;
   for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
     try {
-      const res = await fetch(`${baseUrl}/assets/menu-index.json`, { cache: 'no-cache' });
+      const res = await fetch(`${baseUrl}/assets/menu-index.json`, { cache: 'no-store' });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const items = await res.json();
       if (!Array.isArray(items)) throw new Error('esperado um array');
       if (items.length > 0 || attempt === maxAttempts - 1) {
         MenuItems = items;
         window.MENU_ITEMS = MenuItems;
+        menuItemsSignature = JSON.stringify(MenuItems);
         return;
       }
     } catch (err) {
@@ -50,6 +91,47 @@ async function loadMenuItems() {
   }
 }
 
+async function refreshMenuItems() {
+  if (menuItemsRefreshInFlight) return;
+  menuItemsRefreshInFlight = true;
+
+  try {
+    const baseUrl = getBaseUrlFromPageLoader();
+    const res = await fetch(`${baseUrl}/assets/menu-index.json`, { cache: 'no-store' });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const items = await res.json();
+    if (!Array.isArray(items)) throw new Error('esperado um array');
+
+    const nextSignature = JSON.stringify(items);
+    if (nextSignature === menuItemsSignature) return;
+
+    MenuItems = items;
+    window.MENU_ITEMS = MenuItems;
+    menuItemsSignature = nextSignature;
+    setLinks();
+    window.dispatchEvent(new CustomEvent('wbcMenuItemsUpdated', { detail: { items: MenuItems } }));
+  } catch (error) {
+    // O gerador publica o índice de forma atômica; durante uma alteração,
+    // manter o último índice válido evita interromper a navegação.
+    console.debug('Índice do menu ainda não disponível para atualização:', error);
+  } finally {
+    menuItemsRefreshInFlight = false;
+  }
+}
+
+function startMenuItemsRefresh() {
+  if (menuItemsRefreshTimer) return;
+  menuItemsRefreshTimer = window.setInterval(refreshMenuItems, MENU_ITEMS_REFRESH_INTERVAL);
+  window.addEventListener(
+    'beforeunload',
+    () => {
+      window.clearInterval(menuItemsRefreshTimer);
+      menuItemsRefreshTimer = 0;
+    },
+    { once: true },
+  );
+}
+
 function setLinks() {
   const baseUrl = getBaseUrlFromPageLoader();
   const { MENU_BODY } = getRefs();
@@ -71,15 +153,16 @@ function setLinks() {
       const fullPath = `${baseUrl}/${targetPath}`;
 
       // Atualiza a URL primeiro
-      window.history.pushState({ path: targetPath, files: page.files }, '', fullPath);
+      window.history.pushState({ path: targetPath, examples: page.examples, presets: page.presets }, '', fullPath);
 
       // Carrega o conteúdo
-      loadPageFromPageLoader(page.path, page.files);
+      loadPageFromPageLoader(page.path, page.examples, page.presets, page.baseScript);
 
       // Atualiza estado ativo
       removeAllActiveClasses();
       link.active = true;
       link.classList.add('active');
+      scrollActiveMenuItemIntoView();
     });
     MENU_BODY.appendChild(link);
   });
@@ -108,6 +191,7 @@ function highlightMenuByUrl() {
       link.classList.remove('active');
     }
   });
+  scrollActiveMenuItemIntoView();
 }
 
 function normalizeMenuText(value) {
@@ -162,6 +246,7 @@ async function initializeMenu() {
     });
   }
   highlightMenuByUrl();
+  startMenuItemsRefresh();
 }
 
 if (document.readyState === 'loading') {