rf-v4.10-ecosistema50%

js/ecosistema.js

@@ -0,0 +1,130 @@
+/* ==========================================================================
+   ECOSISTEMA IDE — Cambio in-place entre tarjetas y paneles de unidad
+   ========================================================================== */
+(function () {
+  'use strict';
+
+  const section = document.getElementById('ecosistema-ide');
+  if (!section) return;
+
+  const stateEcosystem = section.querySelector('[data-eco-state="ecosystem"]');
+  const stateUnit      = section.querySelector('[data-eco-state="unit"]');
+  const panels         = Array.from(section.querySelectorAll('[data-eco-panel]'));
+  const triggers       = Array.from(section.querySelectorAll('[data-eco-open]'));
+  const backBtn        = section.querySelector('[data-eco-close]');
+  const pills          = Array.from(section.querySelectorAll('.eco-pill'));
+
+  let lastFocusedTrigger = null;
+
+  /* --- Mostrar panel de una unidad --- */
+  function openUnit(id) {
+    const panel = panels.find(p => p.dataset.ecoPanel === id);
+    if (!panel) return;
+
+    // Guardamos el trigger que originó el cambio (para devolver foco)
+    const origin = triggers.find(t => t.dataset.ecoOpen === id);
+    if (origin) lastFocusedTrigger = origin;
+
+    // Ocultar ecosistema, mostrar estado unidad
+    stateEcosystem.hidden = true;
+    stateUnit.hidden = false;
+
+    // Alternar paneles
+    panels.forEach(p => {
+      const isActive = p.dataset.ecoPanel === id;
+      p.hidden = !isActive;
+      if (isActive) {
+        // Re-trigger de la animación de entrada
+        p.style.animation = 'none';
+        // Forzar reflow
+        void p.offsetWidth;
+        p.style.animation = '';
+      }
+    });
+
+    // Aria expandido en tarjetas
+    triggers.forEach(t => {
+      const isThis = t.dataset.ecoOpen === id;
+      t.setAttribute('aria-expanded', isThis ? 'true' : 'false');
+    });
+
+    // Pills activas
+    pills.forEach(pill => {
+      pill.classList.toggle('is-active', pill.dataset.ecoOpen === id);
+    });
+
+    // Foco accesible al título del panel
+    const title = panel.querySelector('.eco-panel__title');
+    if (title) {
+      title.setAttribute('tabindex', '-1');
+      // Pequeño timeout para asegurar visibilidad tras el cambio de estado
+      requestAnimationFrame(() => title.focus({ preventScroll: false }));
+    }
+
+    // Scroll suave al inicio de la sección (solo si quedó fuera de vista)
+    const rect = section.getBoundingClientRect();
+    if (rect.top < -80) {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }
+
+  /* --- Volver al estado ecosistema --- */
+  function closeUnit() {
+    stateUnit.hidden = true;
+    stateEcosystem.hidden = false;
+
+    triggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
+    pills.forEach(p => p.classList.remove('is-active'));
+
+    // Devolver foco a la tarjeta origen
+    if (lastFocusedTrigger && typeof lastFocusedTrigger.focus === 'function') {
+      lastFocusedTrigger.focus({ preventScroll: false });
+    } else {
+      // Fallback: primer botón del grid
+      const first = triggers[0];
+      if (first) first.focus({ preventScroll: false });
+    }
+  }
+
+  /* --- Listeners --- */
+  triggers.forEach(trigger => {
+    trigger.addEventListener('click', (e) => {
+      const id = trigger.dataset.ecoOpen;
+      if (!id) return;
+      // Si es un <a> real (academy), dejamos que navegue
+      if (trigger.tagName === 'A' && trigger.getAttribute('href')) return;
+      e.preventDefault();
+      openUnit(id);
+    });
+
+    // Soporte teclado para tarjetas no-button (por si acaso)
+    trigger.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        const id = trigger.dataset.ecoOpen;
+        if (!id) return;
+        if (trigger.tagName === 'A') return;
+        e.preventDefault();
+        openUnit(id);
+      }
+    });
+  });
+
+  if (backBtn) backBtn.addEventListener('click', closeUnit);
+
+  // Escape cierra el panel expandido
+  section.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !stateUnit.hidden) {
+      closeUnit();
+    }
+  });
+
+  /* --- Deep link opcional por hash (#eco-projects) sin recargar --- */
+  function readHash() {
+    const hash = window.location.hash.replace('#eco-', '');
+    if (['excellence', 'projects', 'digital'].includes(hash)) {
+      openUnit(hash);
+    }
+  }
+  window.addEventListener('hashchange', readHash);
+  readHash();
+})();