- 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>
143 lines
6.0 KiB
JavaScript
143 lines
6.0 KiB
JavaScript
( 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 ) {}
|
||
} );
|
||
} );
|
||
} )();
|