bootstrap: home carousel jQuery plugin -> react-bootstrap <Carousel>

Second (last) jQuery/BS4 JS blocker to the BS5 CSS swap. Replaces the
`bootstrap-carousel-swipe` jQuery plugin + `$(...).carousel()` init with
react-bootstrap's <Carousel> (native swipe, no jQuery) for both home carousels.

- Preserves the progressive `.lazy` background mechanism (blur -> full image on
  slide-in): the old `slide.bs.carousel` handler becomes <Carousel onSlide>,
  which marks the incoming index in component state.
- Keeps all per-slide class hooks (carousel-item-N, carousel-snd-item-N).
- CSS ports in Index-custom.scss for react-bootstrap's BS5 markup: indicators
  render as <button> (not <li>), and prev/next labels use .visually-hidden
  (BS4 had .sr-only) -> add a shim so labels stay hidden on current BS4 CSS.
- Drops the now-unused bootstrap-carousel-swipe dependency.

Full-app build boots clean. Needs a visual staging check of the home page.
This commit is contained in:
vjrj 2026-07-22 00:13:10 +02:00
parent 8dead27d22
commit f775d4ac26
4 changed files with 121 additions and 116 deletions

View file

@ -67,18 +67,23 @@ React 19: el `<Blaze serverFacts>` de Status.js (`findDOMNode`), solo en `/statu
`i18n.js`. Traducción gallega de la app (`gl/common.json`): 0 claves faltantes.
- **Salto Bootstrap 4→5 (CSS/JS) pendiente:** react-bootstrap ya está en v2 y
corre sobre el CSS Bootstrap 4 actual (`alexwine:bootstrap-4`) con un único
shim `.form-label` en `forms.scss`. El salto a Bootstrap 5 npm está diferido
porque el carrusel del home (`bootstrap-carousel-swipe`, jQuery/BS4) depende del
JS jQuery de BS4 (`data-slide`).
- ✅ **Collapse del navbar migrado a React** (`Navigation.js` + `NavItem.js`):
el `data-toggle="collapse"` jQuery se sustituyó por estado React (`useState`
que alterna `.show`); funciona ya sobre el CSS BS4 y no depende del JS jQuery.
shim `.form-label` en `forms.scss`. **Ya no quedan dependencias del JS jQuery de
BS4** — los dos blockers se migraron a React:
- ✅ **Collapse del navbar** (`Navigation.js` + `NavItem.js`): `data-toggle=
"collapse"` jQuery → estado React (`useState` que alterna `.show`).
*Verificar en staging el menú móvil (<lg): abrir/cerrar y cierre al pulsar un
enlace.* Un blocker jQuery menos.
- Falta: reescribir el carrusel (BS5 trae swipe nativo → quitar el plugin),
importar `bootstrap@5` SCSS+JS, `data-slide``data-bs-slide`,
`ml-auto``ms-auto`, `sr-only``visually-hidden`, revisar
`new-age.scss`/`custom.scss`/`bootstrap-overrides.scss`.
enlace.*
- ✅ **Carrusel del home** (`Index.js`): `bootstrap-carousel-swipe` (jQuery) +
`$(...).carousel()``<Carousel>` de react-bootstrap con swipe nativo; se
conserva el mecanismo `.lazy` de fondos (blur→full) vía `onSlide`. Dep
`bootstrap-carousel-swipe` eliminada. Ports de CSS en `Index-custom.scss`:
indicadores `li``button` (markup BS5) y shim `.visually-hidden`.
*Verificar en staging el home: transiciones, swipe, indicadores, prev/next y
carga progresiva de las imágenes de fondo.*
- Falta (el salto de CSS en sí, ya sin bloqueos de JS): importar `bootstrap@5`
SCSS+JS, `ml-auto``ms-auto` (y demás utilidades direccionales), revisar
`new-age.scss`/`custom.scss`/`bootstrap-overrides.scss` y retirar
`alexwine:bootstrap-4`.
- **Limpieza menor:** migración 217 `// TODO remove falsepositives lowercase
collection`; `prerender.js` gating comentado; sección per-fire del sitemap
eliminada (era código muerto tras `firesMapEnabled=false`).