(function(){
document.addEventListener('DOMContentLoaded', function(){
document.querySelectorAll('.tabs-con-flechas').forEach(container => {
const heading = container.querySelector('.e-n-tabs-heading');
if (!heading) return;
// fuerza estilos útiles en caso de que no existan
heading.style.overflowX = heading.style.overflowX || 'auto';
heading.style.whiteSpace = heading.style.whiteSpace || 'nowrap';
heading.style.scrollBehavior = heading.style.scrollBehavior || 'smooth';
// crear flechas (si no existen)
if (!container.querySelector('.tabs-arrow-left')) {
const leftBtn = document.createElement('button');
leftBtn.className = 'tabs-arrow tabs-arrow-left';
leftBtn.setAttribute('aria-label','Desplazar pestañas a la izquierda');
leftBtn.innerHTML = '';
container.appendChild(leftBtn);
}
if (!container.querySelector('.tabs-arrow-right')) {
const rightBtn = document.createElement('button');
rightBtn.className = 'tabs-arrow tabs-arrow-right';
rightBtn.setAttribute('aria-label','Desplazar pestañas a la derecha');
rightBtn.innerHTML = '';
container.appendChild(rightBtn);
}
const leftBtn = container.querySelector('.tabs-arrow-left');
const rightBtn = container.querySelector('.tabs-arrow-right');
// actualiza visibilidad / estado de flechas
function updateButtons() {
const hasOverflow = heading.scrollWidth > heading.clientWidth + 1;
leftBtn.style.display = hasOverflow ? 'flex' : 'none';
rightBtn.style.display = hasOverflow ? 'flex' : 'none';
leftBtn.disabled = heading.scrollLeft <= 0;
rightBtn.disabled = Math.ceil(heading.scrollLeft + heading.clientWidth) >= heading.scrollWidth - 1;
}
// desplazar hacia el siguiente elemento oculto (derecha) o anterior (izquierda)
function scrollToNext(direction) {
const tabs = Array.from(heading.querySelectorAll('.e-n-tab-title'));
if (!tabs.length) return;
if (direction === 'right') {
const visibleRight = heading.scrollLeft + heading.clientWidth;
// primer tab cuya esquina derecha queda fuera de la vista
const next = tabs.find(tab => (tab.offsetLeft + tab.offsetWidth) > visibleRight + 2);
const target = next ? Math.max(0, next.offsetLeft - 8) : heading.scrollWidth;
heading.scrollTo({ left: target, behavior: 'smooth' });
} else {
const visibleLeft = heading.scrollLeft;
// último tab cuya izquierda está fuera a la izquierda
const prev = tabs.slice().reverse().find(tab => tab.offsetLeft < visibleLeft - 2);
const target = prev ? Math.max(0, prev.offsetLeft - 8) : 0;
heading.scrollTo({ left: target, behavior: 'smooth' });
}
}
leftBtn.addEventListener('click', () => scrollToNext('left'));
rightBtn.addEventListener('click', () => scrollToNext('right'));
// actualizar cuando se haga scroll o cambie tamaño
heading.addEventListener('scroll', updateButtons);
window.addEventListener('resize', updateButtons);
window.addEventListener('load', updateButtons);
setTimeout(updateButtons, 300); // espera a que imágenes/estilos carguen
// observa cambios en las pestañas (por si cambian dinámicamente)
const mo = new MutationObserver(updateButtons);
mo.observe(heading, { childList: true, subtree: true, attributes: true });
});
});
})();
