Files
gureametsabilagun/wp-content/themes/gure-ametsa/assets/js/main.js
Josep Piguillem f6150bd71b Carrusel de animales más fácil de entender
- Botones grandes con texto («Anteriores» / «Siguientes»; en móvil solo flechas, con nombre accesible).
- Contador «1–3 / 10» y la siguiente tarjeta asomando por el borde para que se vea que hay más.
- Última tarjeta «Ver todos los animales» que lleva a la página Adopta.
- Arreglado: al empezar, «Anteriores» no salía desactivado (el scroll-snap desplazaba 4 px).
- Versión del tema 2.3.1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-27 16:09:30 +02:00

143 lines
6.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

( function () {
// Cabecera: borde y sombra al desplazarse (se nota con la cabecera fija).
var header = document.querySelector( '.ga-header' );
if ( header ) {
var onScroll = function () { header.classList.toggle( 'is-scrolled', window.scrollY > 8 ); };
window.addEventListener( 'scroll', onScroll, { passive: true } );
onScroll();
}
var toggle = document.querySelector( '.ga-menu-toggle' );
var nav = document.getElementById( 'ga-nav' );
if ( toggle && nav ) {
toggle.addEventListener( 'click', function () {
var open = nav.classList.toggle( 'is-open' );
toggle.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
} );
document.addEventListener( 'keydown', function ( e ) {
if ( e.key === 'Escape' && nav.classList.contains( 'is-open' ) ) {
nav.classList.remove( 'is-open' );
toggle.setAttribute( 'aria-expanded', 'false' );
toggle.focus();
}
} );
}
// Pestañas segmentadas con enlaces: la píldora se desliza a la pulsada mientras carga la página.
document.querySelectorAll( '.ga-segmented' ).forEach( function ( group ) {
group.addEventListener( 'click', function ( e ) {
var tab = e.target.closest( '.ga-tab' );
if ( ! tab || e.metaKey || e.ctrlKey || e.shiftKey ) { return; }
group.querySelectorAll( '.ga-tab' ).forEach( function ( t ) { t.classList.toggle( 'is-active', t === tab ); } );
} );
} );
// Filtros del listado: los <select> envían el formulario al cambiar.
document.querySelectorAll( '.ga-filters select' ).forEach( function ( select ) {
select.addEventListener( 'change', function () {
select.form.submit();
} );
} );
} )();
// Vídeo de portada: se detiene si el usuario prefiere menos movimiento.
( function () {
var video = document.querySelector( '.ga-hero__bg video' );
if ( video && window.matchMedia && window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {
video.removeAttribute( 'autoplay' );
video.pause();
}
} )();
// Carruseles: desplazamiento con botones, ratón/táctil nativo (scroll-snap) y teclado.
( function () {
document.querySelectorAll( '[data-ga-carousel]' ).forEach( function ( carousel ) {
var track = carousel.querySelector( '.ga-carousel__track' );
var buttons = carousel.querySelectorAll( '.ga-carousel__btn' );
var count = carousel.querySelector( '.ga-carousel__count' );
var cards = track ? track.querySelectorAll( '.ga-card' ) : [];
if ( ! track ) {
return;
}
function update() {
var max = track.scrollWidth - track.clientWidth - 2;
buttons[ 0 ].disabled = track.scrollLeft <= 2;
buttons[ 1 ].disabled = track.scrollLeft >= max;
carousel.classList.toggle( 'is-static', max <= 0 );
// Contador «1–3 / 10»: tarjetas enteras a la vista (la tarjeta «Ver todos» no cuenta).
if ( count && cards.length ) {
var step = cards[ 0 ].offsetWidth + ( parseFloat( getComputedStyle( track ).columnGap ) || 0 );
var first = Math.min( cards.length - 1, Math.round( track.scrollLeft / step ) );
var last = Math.min( cards.length, first + Math.max( 1, Math.floor( ( track.clientWidth + 8 ) / step ) ) );
count.textContent = ( first + 1 ) + ( last > first + 1 ? '–' + last : '' ) + ' / ' + cards.length;
}
}
buttons.forEach( function ( button ) {
button.addEventListener( 'click', function () {
track.scrollBy( { left: track.clientWidth * 0.9 * Number( button.dataset.dir ), behavior: 'smooth' } );
} );
} );
track.addEventListener( 'keydown', function ( e ) {
if ( e.key === 'ArrowRight' || e.key === 'ArrowLeft' ) {
e.preventDefault();
track.scrollBy( { left: ( e.key === 'ArrowRight' ? 1 : -1 ) * track.clientWidth * 0.9, behavior: 'smooth' } );
}
} );
track.addEventListener( 'scroll', update, { passive: true } );
window.addEventListener( 'resize', update );
update();
} );
} )();
// Ficha: miniaturas de la galería y copiar enlace.
( function () {
var main = document.querySelector( '[data-ga-gallery-main] img' );
document.querySelectorAll( '.ga-thumbs button' ).forEach( function ( btn ) {
btn.addEventListener( 'click', function () {
if ( ! main ) { return; }
main.src = btn.dataset.full;
main.removeAttribute( 'srcset' );
document.querySelectorAll( '.ga-thumbs button' ).forEach( function ( b ) { b.removeAttribute( 'aria-current' ); } );
btn.setAttribute( 'aria-current', 'true' );
} );
} );
document.querySelectorAll( '[data-copy]' ).forEach( function ( btn ) {
btn.addEventListener( 'click', function () {
if ( navigator.clipboard ) {
navigator.clipboard.writeText( btn.dataset.copy ).then( function () { btn.textContent = btn.dataset.done; } );
}
} );
} );
} )();
// Formulario: campo «día y hora» solo cuando el motivo es pedir cita.
( function () {
document.querySelectorAll( '.ga-form select[name="motivo"]' ).forEach( function ( select ) {
var field = select.form.querySelector( '.ga-form__visit' );
if ( ! field ) { return; }
select.addEventListener( 'change', function () { field.hidden = select.value !== 'visita'; } );
} );
} )();
// Cuestionario: guarda el borrador en este navegador hasta que se envía.
( function () {
var done = document.querySelector( '[data-ga-clear-draft]' );
try {
if ( done ) { Object.keys( localStorage ).filter( function ( k ) { return k.indexOf( 'ga-cuestionario-' ) === 0; } ).forEach( function ( k ) { localStorage.removeItem( k ); } ); }
} catch ( e ) {}
document.querySelectorAll( 'form[data-ga-draft]' ).forEach( function ( form ) {
var key = form.dataset.gaDraft, saved = {};
try { saved = JSON.parse( localStorage.getItem( key ) || '{}' ); } catch ( e ) {}
Array.prototype.forEach.call( form.elements, function ( el ) {
if ( el.name && el.type !== 'hidden' && el.type !== 'checkbox' && saved[ el.name ] && ! el.value ) { el.value = saved[ el.name ]; }
} );
form.addEventListener( 'input', function () {
var data = {};
Array.prototype.forEach.call( form.elements, function ( el ) {
if ( el.name && el.type !== 'hidden' && el.type !== 'checkbox' && el.name !== 'web' ) { data[ el.name ] = el.value; }
} );
try { localStorage.setItem( key, JSON.stringify( data ) ); } catch ( e ) {}
} );
} );
} )();