https://www.um.es/o/um-lr-74-principal-theme/js/components/um-hori…=js&languageId=es_ES&t=1790587750000

1/*1790587750000*/
2(function() {
3  function initHorizontalScroll(componentSelector, mobileOnly = false, tabletOnly = false) {
4    const components = document.querySelectorAll(componentSelector);
5
6    components.forEach(component => {
7      if (mobileOnly && window.innerWidth > 768) return;
8      if (tabletOnly && window.innerWidth > 991) return;
9
10      const container = component.querySelector('.um-horizontal-scroll__wrapper');
11      if (!container) return;
12
13      let isDown = false;
14      let startX;
15      let scrollLeft;
16      let hasMoved = false;
17
18      // Función para limpiar el estado de drag
19      const cleanupDrag = () => {
20        if (isDown) {
21          isDown = false;
22          container.style.cursor = 'grab';
23          
24          // Quita eventos
25          window.removeEventListener('mouseup', handleWindowMouseUp);
26          window.removeEventListener('mousemove', handleWindowMouseMove);
27          
28          // Previene clicks por un momento si hubo movimiento
29          if (hasMoved) {
30            setTimeout(() => {
31              hasMoved = false;
32            }, 100);
33          }
34        }
35      };
36
37      const handleWindowMouseUp = (e) => {
38        cleanupDrag();
39      };
40
41      const handleWindowMouseMove = (e) => {
42        if (!isDown) return;
43        e.preventDefault();
44        
45        const x = e.pageX - container.offsetLeft;
46        const walk = (x - startX) * 1;
47        
48        if (Math.abs(walk) > 5) {
49          hasMoved = true;
50        }
51        
52        container.scrollLeft = scrollLeft - walk;
53      };
54
55      // Previene el drag & drop nativo en enlaces
56      const preventNativeDrag = (e) => {
57        e.preventDefault();
58        return false;
59      };
60
61      // Mousedown en el contenedor
62      container.addEventListener('mousedown', (e) => {
63        // Previene comportamiento por defecto para evitar conflictos
64        e.preventDefault();
65        
66        isDown = true;
67        hasMoved = false;
68        container.style.cursor = 'grabbing';
69        startX = e.pageX - container.offsetLeft;
70        scrollLeft = container.scrollLeft;
71        
72        /* Añade event listeners a window para capturar eventos fuera del contenedor.
73         * Esto evita un problema que había al arrastrar si el ratón salía fuera del
74         * marco del componente mientras se arrastraba, "enganchando" el componente
75         * al ratón.
76         */
77        window.addEventListener('mouseup', handleWindowMouseUp);
78        window.addEventListener('mousemove', handleWindowMouseMove);
79      });
80
81      // Mouseleave del contenedor
82      container.addEventListener('mouseleave', () => {
83        // No limpiar aquí, dejar que window maneje el mouseup
84        if (hasMoved) {
85          setTimeout(() => {
86            hasMoved = false;
87          }, 100);
88        }
89      });
90
91      // Mouseup en el contenedor
92      container.addEventListener('mouseup', () => {
93        cleanupDrag();
94      });
95
96      // Evita clicks en enlaces si hay drag
97      container.addEventListener('click', (e) => {
98        if (hasMoved) {
99          e.preventDefault();
100          e.stopPropagation();
101          return false;
102        }
103      }, true);
104
105      // Previene drag nativo en todos los enlaces y imágenes
106      const draggableElements = container.querySelectorAll('a, img');
107      draggableElements.forEach(element => {
108        element.addEventListener('dragstart', preventNativeDrag);
109        element.draggable = false;
110      });
111
112      // Eventos para dispositivos móviles
113      let touchStartX;
114      
115      container.addEventListener('touchstart', (e) => {
116        isDown = true;
117        hasMoved = false;
118        touchStartX = e.touches[0].pageX - container.offsetLeft;
119        scrollLeft = container.scrollLeft;
120      });
121
122      container.addEventListener('touchend', () => {
123        isDown = false;
124        
125        if (hasMoved) {
126          setTimeout(() => {
127            hasMoved = false;
128          }, 100);
129        }
130      });
131
132      container.addEventListener('touchmove', (e) => {
133        if (!isDown) return;
134        
135        const x = e.touches[0].pageX - container.offsetLeft;
136        const walk = (x - touchStartX) * 1;
137        
138        if (Math.abs(walk) > 5) {
139          hasMoved = true;
140        }
141        
142        container.scrollLeft = scrollLeft - walk;
143      });
144    });
145  }
146
147  // Función de limpieza para reinicialización
148  function cleanupHorizontalScroll() {
149    // Quita cualquier event listener global que pueda estar activo
150    const cleanup = () => {
151      window.removeEventListener('mouseup', cleanup);
152      window.removeEventListener('mousemove', cleanup);
153    };
154    cleanup();
155  }
156
157  // Inicialización
158  document.addEventListener('DOMContentLoaded', () => {
159    initHorizontalScroll('.um-horizontal-scroll', false, false);
160    initHorizontalScroll('.um-horizontal-scroll-mobile', true, false);
161    initHorizontalScroll('.um-horizontal-scroll-tablet', false, true);
162  });
163
164  // Reinicializa en resize
165  let resizeTimeout;
166  window.addEventListener('resize', () => {
167    clearTimeout(resizeTimeout);
168    resizeTimeout = setTimeout(() => {
169      cleanupHorizontalScroll();
170      initHorizontalScroll('.um-horizontal-scroll', false, false);
171      initHorizontalScroll('.um-horizontal-scroll-mobile', true, false);
172      initHorizontalScroll('.um-horizontal-scroll-tablet', false, true);
173    }, 150);
174  });
175})();