1let mouseActionImageButton = false; 2 3// Función para resetear el estado activo de los botones y ocultar todas las imágenes 4function resetButtonAndImageStates(clickedButtonId) { 5 const buttons = document.querySelectorAll('.custom-button'); 6 buttons.forEach(button => { 7 //if (button.id !== clickedButtonId) { 8 button.classList.remove('active'); 9 button.classList.remove('hide-customButton'); 10 const imageGroups = document.querySelectorAll('.rotateImageGroupServices'); 11 imageGroups.forEach(group => { 12 group.classList.remove('hide-images'); 13 }); 14 const rotateImageGroups = document.querySelectorAll('.rotateImageGroupServices'); 15 rotateImageGroups.forEach(group => { 16 //group.style.transform = 'translateX(0%)'; 17 group.classList.remove('traslada1'); 18 group.classList.remove('traslada2'); 19 group.classList.remove('traslada3'); 20 21 22 }); 23 //} 24 }); 25} 26 27function hideStyleNonClickedButtons(clickedButtonId) { 28 const buttons = document.querySelectorAll('.custom-button'); 29 buttons.forEach(button => { 30 //if (button.id !== clickedButtonId) { 31 button.classList.add('hide-customButton'); 32 //} 33 }); 34} 35 36function clickOpenSideInfoBox(boton, condicional) { 37 38 if (boton === 'button1') { 39 moveSeccion1(condicional) 40 } else if (boton === 'button2') { 41 moveSeccion2(condicional) 42 } else if (boton === 'button3') { 43 44 moveSeccion3(condicional) 45 } 46} 47 48 49// Definición de las funciones de clic para cada botón 50async function moveSeccion1(condicional) { 51 52 //var infoBoxGen = document.querySelector('.contenidoInfoDivision'); 53 var infoBoxGen = document.getElementById('contenidoInfoDivision'); 54 55 var contentInfoBoxGen; 56 try { 57 const response = await fetch('_contenidoDivisionOC.php'); 58 if (!response.ok) { 59 throw new Error('Error al cargar el archivo: ' + response.statusText); 60 } 61 contentInfoBoxGen = await response.text(); 62 63 resetButtonAndImageStates('button1'); 64 //const button1 = document.getElementById('button1'); 65 const rotateImageGroupServices1 = document.getElementById('rotateImageGroupServices1'); 66 const rotateImageGroupServices2 = document.getElementById('rotateImageGroupServices2'); 67 const rotateImageGroupServices3 = document.getElementById('rotateImageGroupServices3'); 68 const infoBox = document.getElementById('infoBox'); 69 70 if (condicional) { //button1.classList.contains('active') 71 // button1.classList.remove('active'); 72 rotateImageGroupServices2.style.zIndex = 1; 73 //rotateImageGroupServices2.classList.remove('hide-images'); 74 //rotateImageGroupServices3.classList.remove('hide-images'); 75 // rotateImageGroupServices2.style.transform = 'translateX(0%)'; 76 //rotateImageGroupServices3.style.transform = 'translateX(0%)'; 77 const contenedorTodo = document.getElementById('contenedorTodo'); 78 infoBox.classList.remove('show-info-box'); 79 80 contenedorTodo.style.overflow = 'hidden'; 81 } else { 82 contenedorTodo.style.overflow = 'visible'; 83 84 infoBoxGen.innerHTML = contentInfoBoxGen; 85 // button1.classList.add('active'); 86 hideStyleNonClickedButtons('button1'); 87 rotateImageGroupServices1.style.zIndex = 2; 88 rotateImageGroupServices1.classList.add('traslada1'); 89 //rotateImageGroupServices2.classList.add('trasladaLejos'); 90 //rotateImageGroupServices3.classList.add('trasladaLejos'); 91 92 93 //rotateImageGroupServices1.style.transform = 'translateX(37%)'; traslada1 94 //rotateImageGroupServices2.style.transform = 'translateX(-105%)'; 95 //rotateImageGroupServices3.style.transform = 'translateX(-105%)'; 96 rotateImageGroupServices2.classList.add('hide-images'); 97 rotateImageGroupServices3.classList.add('hide-images'); 98 infoBox.classList.add('show-info-box'); 99 } 100} catch (error) { 101 console.error('Error:', error); 102} 103} 104 105async function moveSeccion2(condicional) { 106 107 108 var infoBoxGen = document.getElementById('contenidoInfoDivision'); 109// 110 var contentInfoBoxGen; 111 try { 112 const response = await fetch('_contenidoDivisionED.php'); 113 if (!response.ok) { 114 throw new Error('Error al cargar el archivo: ' + response.statusText); 115 } 116 contentInfoBoxGen = await response.text(); 117 resetButtonAndImageStates('button2'); 118 //const button2 = document.getElementById('button2'); 119 const rotateImageGroupServices1 = document.getElementById('rotateImageGroupServices1'); 120 const rotateImageGroupServices2 = document.getElementById('rotateImageGroupServices2'); 121 const rotateImageGroupServices3 = document.getElementById('rotateImageGroupServices3'); 122 const infoBox = document.getElementById('infoBox'); 123 124 if (condicional) { 125 // button2.classList.remove('active'); 126 rotateImageGroupServices2.style.zIndex = 1; 127 rotateImageGroupServices1.classList.remove('hide-images'); 128 rotateImageGroupServices3.classList.remove('hide-images'); 129 //rotateImageGroupServices1.style.transform = 'translateX(0%)'; 130 //rotateImageGroupServices2.style.transform = 'translateX(0%)'; 131 //rotateImageGroupServices3.style.transform = 'translateX(0%)'; 132 const contenedorTodo = document.getElementById('contenedorTodo'); 133 infoBox.classList.remove('show-info-box'); 134 135 contenedorTodo.style.overflow = 'hidden'; 136 } else { 137 contenedorTodo.style.overflow = 'visible'; 138 139 infoBoxGen.innerHTML = contentInfoBoxGen; 140 // button2.classList.add('active'); 141 hideStyleNonClickedButtons('button2'); 142 rotateImageGroupServices2.style.zIndex = 2; 143 //rotateImageGroupServices1.style.transform = 'translateX(-106%)'; 144 //rotateImageGroupServices2.style.transform = 'translateX(-67%)'; 145 //rotateImageGroupServices3.style.transform = 'translateX(-106%)'; 146 rotateImageGroupServices2.classList.add('traslada2'); 147 rotateImageGroupServices1.classList.add('hide-images'); 148 rotateImageGroupServices3.classList.add('hide-images'); 149 150 infoBox.classList.add('show-info-box'); 151 } 152 } catch (error) { 153 console.error('Error:', error); 154 } 155} 156 157async function moveSeccion3(condicional) { 158 159 //var infoBoxGen = document.querySelector('.contenidoInfoDivision'); 160 var infoBoxGen = document.getElementById('contenidoInfoDivision'); 161 var contentInfoBoxGen; 162 try { 163 164 const response = await fetch('_contenidoDivisionIN.php'); 165 166 if (!response.ok) { 167 throw new Error('Error al cargar el archivo: ' + response.statusText); 168 } 169 contentInfoBoxGen = await response.text(); 170 171 172 resetButtonAndImageStates('button3'); 173 174 //const button3 = document.getElementById('button3'); 175 const rotateImageGroupServices1 = document.getElementById('rotateImageGroupServices1'); 176 const rotateImageGroupServices2 = document.getElementById('rotateImageGroupServices2'); 177 const rotateImageGroupServices3 = document.getElementById('rotateImageGroupServices3'); 178 const contenedorTodo = document.getElementById('contenedorTodo'); 179 180 181 182 const infoBox = document.getElementById('infoBox'); 183 184 if (condicional) { 185 // button3.classList.remove('active'); 186 //rotateImageGroupServices3.style.transform = 'translateX(0%)'; 187 rotateImageGroupServices1.classList.remove('hide-images'); 188 rotateImageGroupServices2.classList.remove('hide-images'); 189 infoBox.classList.remove('show-info-box'); 190 contenedorTodo.style.overflow = 'hidden'; 191 } else { 192 contenedorTodo.style.overflow = 'visible'; 193 //infoBoxIzq.innerHTML = contentInfoBoxIzq; 194 //infoBoxDer.innerHTML = contentInfoBoxDer; 195 infoBoxGen.innerHTML = contentInfoBoxGen; 196 // button3.classList.add('active'); 197 hideStyleNonClickedButtons('button3'); 198 rotateImageGroupServices3.style.zIndex = 2; 199 rotateImageGroupServices3.classList.add('traslada3'); 200 //rotateImageGroupServices3.style.transform = 'translateX(-170%)'; 201 rotateImageGroupServices1.classList.add('hide-images'); 202 rotateImageGroupServices2.classList.add('hide-images'); 203 infoBox.classList.add('show-info-box'); 204 } 205 } catch (error) { 206 console.error('Error:', error); 207 } 208} 209 210 211document.addEventListener('DOMContentLoaded', function () { 212 213 // ###################################################################################################### 214 // ###################################################################################################### 215 // New Order Horizontal to Vertical Services 216 217 218 function changeServicesAppareance() { 219 220 221 if (window.innerWidth >= 768) { 222 223 224 225 function shuffle(array) { 226 for (let i = array.length - 1; i > 0; i--) { 227 const j = Math.floor(Math.random() * (i + 1)); 228 [array[i], array[j]] = [array[j], array[i]]; 229 } 230 return array; 231 } 232 233 234 // Implement the random image change logic 235 let lastChangedIndex = -1; 236 237 function changeRandomImage() { 238 const totalContainers = 3; //groups.length; 239 let randomIndex; 240 // const images = container.querySelectorAll('.image-container'); 241 242 do { 243 randomIndex = Math.floor(Math.random() * totalContainers
243); 244 } while (randomIndex === lastChangedIndex); 245 246 lastChangedIndex = randomIndex; 247 248 const containerId = `rotateImageGroupServices${randomIndex + 1}`; 249 const container = document.getElementById(containerId); 250 const images = container.querySelectorAll('.image-container'); 251 252 if (images) { 253 const currentImage = container.querySelector('.image-container.active'); 254 let currentIndex = Array.prototype.indexOf.call(images, currentImage); 255 256 images.forEach(imgContainer => { 257 imgContainer.classList.remove('active'); 258 imgContainer.classList.add('inactive'); 259 }); 260 261 currentIndex = (currentIndex + 1) % images.length; 262 images[currentIndex].classList.remove('inactive'); 263 images[currentIndex].classList.add('active'); 264 } 265 } 266 267 setInterval(changeRandomImage, 1750); 268 269 // ###################################################################################### eventos click/mouse boton/imagen 270 271 document.getElementById('back').addEventListener('click', 272 function (event) { 273 event.preventDefault(); 274 clickOpenSideInfoBox('button3', true) 275 mouseActionImageButton = false; 276 } 277 ); 278 279 280 281 document.getElementById('button1').addEventListener('click', 282 function (event) { 283 if (mouseActionImageButton) { 284 clickOpenSideInfoBox('button1', mouseActionImageButton) 285 mouseActionImageButton = false; 286 } else { 287 clickOpenSideInfoBox('button1', mouseActionImageButton) 288 mouseActionImageButton = true; 289 } 290 event.stopPropagation(); 291 } 292 ); 293 294 document.getElementById('button2').addEventListener('click', 295 296 function (event) { 297 if (mouseActionImageButton) { 298 clickOpenSideInfoBox('button2', mouseActionImageButton) 299 mouseActionImageButton = false; 300 } else { 301 clickOpenSideInfoBox('button2', mouseActionImageButton) 302 mouseActionImageButton = true; 303 304 } 305 event.stopPropagation(); 306 } 307 308 ); 309 310 document.getElementById('button3').addEventListener('click', 311 312 function (event) { 313 if (mouseActionImageButton) { 314 clickOpenSideInfoBox('button3', mouseActionImageButton) 315 mouseActionImageButton = false; 316 } else { 317 clickOpenSideInfoBox('button3', mouseActionImageButton) 318 mouseActionImageButton = true; 319 320 } 321 event.stopPropagation(); 322 } 323 ); 324 325 // Eventos click para imágenes 326 document.getElementById('rotateImageGroupServices1').addEventListener('click', 327 328 function (event) { 329 if (mouseActionImageButton) { 330 clickOpenSideInfoBox('button1', mouseActionImageButton) 331 mouseActionImageButton = false; 332 } else { 333 clickOpenSideInfoBox('button1', mouseActionImageButton) 334 mouseActionImageButton = true; 335 336 } 337 event.stopPropagation(); 338 } 339 340 ); 341 document.getElementById('rotateImageGroupServices2').addEventListener('click', 342 343 function (event) { 344 if (mouseActionImageButton) { 345 clickOpenSideInfoBox('button2', mouseActionImageButton) 346 mouseActionImageButton = false; 347 } else { 348 clickOpenSideInfoBox('button2', mouseActionImageButton) 349 mouseActionImageButton = true; 350 351 } 352 event.stopPropagation(); 353 } 354 355 ); 356 357 358 document.getElementById('rotateImageGroupServices3').addEventListener('click', 359 360 function (event) { 361 if (mouseActionImageButton) { 362 clickOpenSideInfoBox('button3', mouseActionImageButton) 363 mouseActionImageButton = false; 364 } else { 365 clickOpenSideInfoBox('button3', mouseActionImageButton) 366 mouseActionImageButton = true; 367 368 } 369 event.stopPropagation(); 370 } 371 372 ); 373 374 375 // ########################################################################################################## -> activar hover boton superior en base imagen (no click) 376 377 const imageGroup1 = document.getElementById('rotateImageGroupServices1'); 378 const imageGroup2 = document.getElementById('rotateImageGroupServices2'); 379 const imageGroup3 = document.getElementById('rotateImageGroupServices3'); 380 381 // Agregar manejadores de eventos para el hover 382 imageGroup1.addEventListener('mouseover', function () { 383 activarBoton('button1', mouseActionImageButton)(); // Envuelve la llamada en otra función 384 }); 385 386 imageGroup1.addEventListener('mouseout', function () { 387 desactivarBoton('button1', mouseActionImageButton)(); // Envuelve la llamada en otra función 388 }); 389 390 imageGroup2.addEventListener('mouseover', function () { 391 activarBoton('button2', mouseActionImageButton)(); // Envuelve la llamada en otra función 392 }); 393 394 imageGroup2.addEventListener('mouseout', function () { 395 desactivarBoton('button2', mouseActionImageButton)(); // Envuelve la llamada en otra función 396 }); 397 398 imageGroup3.addEventListener('mouseover', function () { 399 activarBoton('button3', mouseActionImageButton)(); // Envuelve la llamada en otra función 400 }); 401 402 imageGroup3.addEventListener('mouseout', function () { 403 desactivarBoton('button3', mouseActionImageButton)(); // Envuelve la llamada en otra función 404 }); 405 406 407 function activarBoton(boton) { 408 return function () { 409 if (!mouseActionImageButton) { 410 const button = document.getElementById(boton);
411 // console.log(mouseActionImageButton); 412 button.classList.add('active'); 413 // console.log('Dentro'); 414 } 415 }; 416 } 417 418 function desactivarBoton(boton) { 419 return function () { 420 if (!mouseActionImageButton) { 421 const button = document.getElementById(boton); 422 // console.log(mouseActionImageButton); 423 button.classList.remove('active'); 424 // console.log('Fuera'); 425 } 426 }; 427 } 428 429 430 } 431 432 } 433 434 changeServicesAppareance(); 435 436 // Llamar a la función al cargar la página y al cambiar el tamaño de la ventana 437 // document.addEventListener('DOMContentLoaded', changeServicesAppareance); 438 // Llamar a la función al cambiar el tamaño de la ventana 439 window.addEventListener('size', changeServicesAppareance); 440 441}); 442/* 443document.addEventListener('DOMContentLoaded', function () { 444 function updateHeightBasedOnWidth() { 445 const elements = document.querySelectorAll('.rotateImageGroupServices'); 446 if (elements) { 447 elements.forEach(element => { 448 if (window.innerWidth < 1800) { 449 element.style.height = '100%'; 450 element.style.paddingBottom = '0'; 451 } else { 452 element.style.height = 'auto'; 453 element.style.paddingBottom = '32%'; 454 } 455 }); 456 } 457 } 458 459 // Inicializar y actualizar el tamaño al cargar y redimensionar la ventana 460 updateHeightBasedOnWidth(); 461 window.addEventListener('resize', updateHeightBasedOnWidth); 462}); 463 464document.addEventListener('DOMContentLoaded', function () { 465 if (window.innerWidth > 1800) { 466 var rotateImageGroupServices = document.querySelector('.rotateImageGroupServices'); 467 var estiloHorizontalServicios = document.querySelector('.estiloHorizontalServicios'); 468 var estiloHorizontalServicios2 = document.querySelector('.containerImagesGroupServices'); 469 470 471 if (rotateImageGroupServices && estiloHorizontalServicios) { 472 var computedStyle = window.getComputedStyle(rotateImageGroupServices); 473 var alturaImagenes = computedStyle.getPropertyValue('height'); 474 475 estiloHorizontalServicios.style.height = alturaImagenes; 476 estiloHorizontalServicios2.style.height = alturaImagenes; 477 // console.log(estiloHorizontalServicios.style.maxHeight); 478 // console.log(alturaImagenes); 479 } 480 } else { 481 var estiloHorizontalServicios = document.querySelector('.estiloHorizontalServicios'); 482 var estiloHorizontalServicios2 = document.querySelector('.containerImagesGroupServices'); 483 if (estiloHorizontalServicios) { 484 estiloHorizontalServicios.style.height = ''; 485 estiloHorizontalServicios2.style.height = ''; 486 } 487 } 488}); 489 490*/ 491 492 493
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.