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.
2026-07-22 00:13:10 +02:00 · 2026-07-22 00:13:10 +02:00 · f775d4ac26
commit f775d4ac26
parent 8dead27d22
4 changed files with 121 additions and 116 deletions
--- a/PENDIENTE.md
+++ b/PENDIENTE.md
@ -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`).
--- a/imports/ui/pages/Index/Index-custom.scss
+++ b/imports/ui/pages/Index/Index-custom.scss
@ -40,10 +40,47 @@
  height: 40px;
 }

+// react-bootstrap v2 renders indicators as <button> (BS5 markup), not <li> (BS4),
+// so port the base "bar" look here — the BS4 CSS only styles <li>. The last two
+// rules are the original custom tweaks.
+.carousel-indicators button,
 .carousel-indicators li {
+  box-sizing: content-box;
+  flex: 0 1 auto;
+  width: 30px;
  height: 5px;
-  border-radius: 2px;
+  padding: 0;
+  margin-right: 3px;
+  margin-left: 3px;
+  text-indent: -999px;
  cursor: pointer;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-radius: 2px;
+  opacity: .5;
+  transition: opacity .6s ease;
+}
+
+.carousel-indicators .active {
+  opacity: 1;
+}
+
+// BS5 renames BS4's `.sr-only` to `.visually-hidden`; react-bootstrap's carousel
+// prev/next labels use it. Shim it until the Bootstrap 5 CSS swap lands, else the
+// "Anterior"/"Siguiente" labels would render visible over the controls.
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
 }

 .carousel-snd-caption > h3,
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@ -1,11 +1,11 @@
 /* eslint-disable import/no-absolute-path */
 /* eslint-disable react/jsx-indent-props */
 /* eslint-disable key-spacing */
-/* eslint-env jquery */
 import 'simple-line-icons/css/simple-line-icons.css';
 import React, { Component } from 'react';
 import { withTranslation, Trans } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
+import { Carousel } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 // import { Link } from 'react-router-dom';
 // https://www.npmjs.com/package/react-resize-detector
@ -13,7 +13,6 @@ import ReactResizeDetector from 'react-resize-detector';
 import MobileStoreButton from 'react-mobile-store-button';
 import _ from 'lodash';
 import 'html5-device-mockups/dist/device-mockups.min.css';
-import 'bootstrap-carousel-swipe/carousel-swipe';
 import { isAnyMobile } from '/imports/ui/components/Utils/isMobile';
 import SubscriptionEditor from '/imports/ui/components/SubscriptionEditor/SubscriptionEditor';
 import SubscriptionsMap from '/imports/ui/pages/Subscriptions/SubscriptionsMap';
@ -30,32 +29,27 @@ class Index extends Component {
  constructor(props) {
    super(props);
    const self = this;
+    // Progressive slide backgrounds: each carousel-item shows a blurred/low-res
+    // bg until it becomes active, when the `.lazy` class swaps in the full image
+    // (see Index-custom.scss). Was the jQuery `slide.bs.carousel` handler; now the
+    // react-bootstrap <Carousel onSlide> marks the incoming index here.
+    this.state = { mainLazy: {}, sndLazy: {} };
    this.myScaleFunction = _.debounce(() => {
      self.scaleHeader();
    }, 250);
    this.onResize = this.onResize.bind(this);
    this.getBotUrl = this.getBotUrl.bind(this);
-  }
-
-  componentDidMount() {
-    const car1 = $('#carouselMainIndicators');
-    const car2 = $('#carouselSndIndicators');
-    car1.carousel();
-    car2.carousel();
-    /* _.defer(() => {
-      $('#firsthomeslide').addClass('lazy');
-    }); */
-    const loadLazy = (ev) => {
-      ev.relatedTarget.classList.add('lazy');
-    };
-    car1.on('slide.bs.carousel', loadLazy);
-    car2.on('slide.bs.carousel', loadLazy);
+    this.markLazy = this.markLazy.bind(this);
  }

  onResize() {
    this.myScaleFunction();
  }

+  markLazy(which, index) {
+    this.setState(s => ({ [which]: { ...s[which], [index]: true } }));
+  }
+
  getMap(isMobile, props) {
    if (!isMobile) {
      return (
@ -112,67 +106,51 @@ class Index extends Component {
          <section className="sect1">
            <header>
              <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
-              <div
+              <Carousel
                  id="carouselMainIndicators"
-                  className="carousel slide"
-                  ref={(ref) => { this.slides = ref; }}
+                  className="slide"
+                  onSlide={index => this.markLazy('mainLazy', index)}
+                  prevLabel={t('Anterior')}
+                  nextLabel={t('Siguiente')}
              >
-                {/* for dev ^^^: data-interval=false */}
-                <ol className="carousel-indicators">
-                  <li key="sl1-1" data-target="#carouselMainIndicators" data-slide-to="0" className="active" />
-                  <li key="sl1-2" data-target="#carouselMainIndicators" data-slide-to="1" />
-                  <li key="sl1-3" data-target="#carouselMainIndicators" data-slide-to="2" />
-                  <li key="sl1-4" data-target="#carouselMainIndicators" data-slide-to="3" />
-                </ol>
-                <div className="carousel-inner" role="listbox">
-
-                  <div id="firsthomeslide" className="carousel-item carousel-item-1 active">
-                    <div
-                        tabIndex={0}
-                        role="button"
-                        className="slide-1-icon"
-                        onKeyDown={() => { this.gotoParticipe(); }}
-                        onClick={() => { this.gotoParticipe(); }}
-                    />
-                    <div className="carousel-caption">
-                      <h3><Trans>Elige un lugar</Trans></h3>
-                      <p />
-                    </div>
+                <Carousel.Item id="firsthomeslide" className="carousel-item-1">
+                  <div
+                      tabIndex={0}
+                      role="button"
+                      className="slide-1-icon"
+                      onKeyDown={() => { this.gotoParticipe(); }}
+                      onClick={() => { this.gotoParticipe(); }}
+                  />
+                  <div className="carousel-caption">
+                    <h3><Trans>Elige un lugar</Trans></h3>
+                    <p />
                  </div>
+                </Carousel.Item>

-                  <div className="carousel-item carousel-item-2">
-                    <div className="slide-2-icon" />
-                    <div className="carousel-caption">
-                      <h3><Trans>Elige un radio de vigilancia</Trans></h3>
-                      <p />
-                    </div>
+                <Carousel.Item className={`carousel-item-2${this.state.mainLazy[1] ? ' lazy' : ''}`}>
+                  <div className="slide-2-icon" />
+                  <div className="carousel-caption">
+                    <h3><Trans>Elige un radio de vigilancia</Trans></h3>
+                    <p />
                  </div>
+                </Carousel.Item>

-                  <div className="carousel-item carousel-item-3">
-                    <div className="slide-3-icon" />
-                    <div className="carousel-caption">
-                      <h3><Trans>Recibe alertas de fuegos en esa zona</Trans></h3>
-                      <p />
-                    </div>
+                <Carousel.Item className={`carousel-item-3${this.state.mainLazy[2] ? ' lazy' : ''}`}>
+                  <div className="slide-3-icon" />
+                  <div className="carousel-caption">
+                    <h3><Trans>Recibe alertas de fuegos en esa zona</Trans></h3>
+                    <p />
                  </div>
+                </Carousel.Item>

-                  <div className="carousel-item carousel-item-4">
-                    <div className="slide-4-icon" />
-                    <div className="carousel-caption">
-                      <h3><Trans>Alerta cuando hay un fuego</Trans></h3>
-                      <p />
-                    </div>
+                <Carousel.Item className={`carousel-item-4${this.state.mainLazy[3] ? ' lazy' : ''}`}>
+                  <div className="slide-4-icon" />
+                  <div className="carousel-caption">
+                    <h3><Trans>Alerta cuando hay un fuego</Trans></h3>
+                    <p />
                  </div>
-                </div>
-                <a className="carousel-control-prev" href="#carouselMainIndicators" role="button" data-slide="prev">
-                  <span className="carousel-control-prev-icon" aria-hidden="true" />
-                  <span className="sr-only"><Trans>Anterior</Trans></span>
-                </a>
-                <a className="carousel-control-next" href="#carouselMainIndicators" role="button" data-slide="next">
-                  <span className="carousel-control-next-icon" aria-hidden="true" />
-                  <span className="sr-only"><Trans>Siguiente</Trans></span>
-                </a>
-              </div>
+                </Carousel.Item>
+              </Carousel>
            </header>
            <section className="py-5">
              <div className="container">
@ -208,46 +186,32 @@ class Index extends Component {
            </div>
          </section>

-          <div
+          <Carousel
              id="carouselSndIndicators"
-              className="carousel slide"
-              ref={(ref) => { this.slidesSnd = ref; }}
+              className="slide"
+              onSlide={index => this.markLazy('sndLazy', index)}
+              prevLabel={t('Anterior')}
+              nextLabel={t('Siguiente')}
          >
-            {/* for dev ^^^: data-interval=false */}
-            <ol className="carousel-indicators">
-              <li key="sl2-1" data-target="#carouselSndIndicators" data-slide-to="0" className="active" />
-              <li key="sl2-2" data-target="#carouselSndIndicators" data-slide-to="1" />
-            </ol>
-            <div className="carousel-inner" role="listbox">
-
-              <div className="carousel-item carousel-snd-item carousel-snd-item-1 active">
-                <div className="carousel-caption carousel-snd-caption">
-                  <h3><Trans i18nKey="CO2emisions">¿Sabías que los fuegos <a href="https://www.livescience.com/1981-wildfires-release-cars.html" target="_blank">producen tanto CO² como los coches</a> y <a href="https://www.motherjones.com/politics/2014/08/wild-fires-are-so-so-bad-climate/" target="_blank">aproximadamente ⅕ de todas nuestras emisiones</a>?</Trans></h3>
-                  <p />
-                  <div className="row slides-footer">
-                    <p className="text-muted"><a href="https://commons.wikimedia.org/wiki/File:La_Tuna_fire_and_cityscape_1.jpg" target="_blank"><Trans>Fuego en La Tuna, Los Ángeles, Estados Unidos, septiembre de 2017</Trans></a></p>
-                  </div>
+            <Carousel.Item className="carousel-snd-item carousel-snd-item-1">
+              <div className="carousel-caption carousel-snd-caption">
+                <h3><Trans i18nKey="CO2emisions">¿Sabías que los fuegos <a href="https://www.livescience.com/1981-wildfires-release-cars.html" target="_blank">producen tanto CO² como los coches</a> y <a href="https://www.motherjones.com/politics/2014/08/wild-fires-are-so-so-bad-climate/" target="_blank">aproximadamente ⅕ de todas nuestras emisiones</a>?</Trans></h3>
+                <p />
+                <div className="row slides-footer">
+                  <p className="text-muted"><a href="https://commons.wikimedia.org/wiki/File:La_Tuna_fire_and_cityscape_1.jpg" target="_blank"><Trans>Fuego en La Tuna, Los Ángeles, Estados Unidos, septiembre de 2017</Trans></a></p>
                </div>
              </div>
-              <div className="carousel-item carousel-snd-item carousel-snd-item-2">
-                <div className="carousel-caption carousel-snd-caption">
-                  <h3><Trans>Ayúdanos a combatir el cambio climático y a proteger el medioambiente</Trans></h3>
-                  <p />
-                  <div className="row slides-footer">
-                    <p className="text-muted"><a href="https://commons.wikimedia.org/wiki/File:Smog_over_Almaty.jpg" target="_blank"><Trans>Polución en la ciudad de Almaty, Kazakhstan, enero de 2014</Trans></a></p>
-                  </div>
+            </Carousel.Item>
+            <Carousel.Item className={`carousel-snd-item carousel-snd-item-2${this.state.sndLazy[1] ? ' lazy' : ''}`}>
+              <div className="carousel-caption carousel-snd-caption">
+                <h3><Trans>Ayúdanos a combatir el cambio climático y a proteger el medioambiente</Trans></h3>
+                <p />
+                <div className="row slides-footer">
+                  <p className="text-muted"><a href="https://commons.wikimedia.org/wiki/File:Smog_over_Almaty.jpg" target="_blank"><Trans>Polución en la ciudad de Almaty, Kazakhstan, enero de 2014</Trans></a></p>
                </div>
              </div>
-            </div>
-            <a className="carousel-control-prev" href="#carouselSndIndicators" role="button" data-slide="prev">
-              <span className="carousel-control-prev-icon" aria-hidden="true" />
-              <span className="sr-only"><Trans>Anterior</Trans></span>
-            </a>
-            <a className="carousel-control-next" href="#carouselSndIndicators" role="button" data-slide="next">
-              <span className="carousel-control-next-icon" aria-hidden="true" />
-              <span className="sr-only"><Trans>Siguiente</Trans></span>
-            </a>
-          </div>
+            </Carousel.Item>
+          </Carousel>

          <a id="participe" name="participe" />
          <section className="sect4">
--- a/package.json
+++ b/package.json
@ -14,7 +14,6 @@
    "@turf/buffer": "^5.1.5",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^5.1.1",
-    "bootstrap-carousel-swipe": "0.0.6",
    "commonmark": "^0.28.1",
    "core-js": "^2.5.1",
    "crypto-random-hex": "^1.0.0",