Initial commit
This commit is contained in:
Jorge Luis caudillo esparza
225
SIG.Web/Scripts/SigTabsScroll.js
Normal file
225
SIG.Web/Scripts/SigTabsScroll.js
Normal file
@@ -0,0 +1,225 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
function inicializarNavegacionTabs() {
|
||||
var contenedor = document.getElementById("C_Tab");
|
||||
|
||||
if (!contenedor) {
|
||||
return;
|
||||
}
|
||||
|
||||
var encabezado =
|
||||
document.getElementById("C_Tab_header") ||
|
||||
contenedor.querySelector(".ajax__tab_header");
|
||||
|
||||
if (!encabezado) {
|
||||
return;
|
||||
}
|
||||
|
||||
/*
|
||||
* Si ya fue inicializado, únicamente vuelve a calcular
|
||||
* dimensiones después de un postback parcial.
|
||||
*/
|
||||
if (contenedor._sigTabsInicializados) {
|
||||
if (contenedor._sigTabsActualizar) {
|
||||
contenedor._sigTabsActualizar();
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var botonAnterior = document.createElement("button");
|
||||
botonAnterior.type = "button";
|
||||
botonAnterior.className =
|
||||
"sig-tab-arrow sig-tab-arrow-prev";
|
||||
botonAnterior.innerHTML = "‹";
|
||||
botonAnterior.setAttribute(
|
||||
"aria-label",
|
||||
"Mostrar pestañas anteriores"
|
||||
);
|
||||
botonAnterior.setAttribute("title", "Pestañas anteriores");
|
||||
|
||||
var botonSiguiente = document.createElement("button");
|
||||
botonSiguiente.type = "button";
|
||||
botonSiguiente.className =
|
||||
"sig-tab-arrow sig-tab-arrow-next";
|
||||
botonSiguiente.innerHTML = "›";
|
||||
botonSiguiente.setAttribute(
|
||||
"aria-label",
|
||||
"Mostrar pestañas siguientes"
|
||||
);
|
||||
botonSiguiente.setAttribute("title", "Pestañas siguientes");
|
||||
|
||||
contenedor.appendChild(botonAnterior);
|
||||
contenedor.appendChild(botonSiguiente);
|
||||
|
||||
function posicionarFlechas() {
|
||||
var top = encabezado.offsetTop;
|
||||
var alto = encabezado.offsetHeight;
|
||||
|
||||
botonAnterior.style.top = top + "px";
|
||||
botonAnterior.style.height = alto + "px";
|
||||
|
||||
botonSiguiente.style.top = top + "px";
|
||||
botonSiguiente.style.height = alto + "px";
|
||||
}
|
||||
|
||||
function actualizarEstadoFlechas() {
|
||||
var desplazamientoActual = Math.max(
|
||||
0,
|
||||
encabezado.scrollLeft
|
||||
);
|
||||
|
||||
var desplazamientoMaximo = Math.max(
|
||||
0,
|
||||
encabezado.scrollWidth - encabezado.clientWidth
|
||||
);
|
||||
|
||||
botonAnterior.disabled = desplazamientoActual <= 2;
|
||||
|
||||
botonSiguiente.disabled =
|
||||
desplazamientoActual >= desplazamientoMaximo - 2;
|
||||
}
|
||||
|
||||
function recalcularOverflow() {
|
||||
/*
|
||||
* Primero se mide sin el espacio reservado para las flechas.
|
||||
*/
|
||||
contenedor.classList.remove("sig-tabs-has-overflow");
|
||||
|
||||
var tieneOverflow =
|
||||
encabezado.scrollWidth >
|
||||
encabezado.clientWidth + 2;
|
||||
|
||||
if (tieneOverflow) {
|
||||
contenedor.classList.add(
|
||||
"sig-tabs-has-overflow"
|
||||
);
|
||||
} else {
|
||||
encabezado.scrollLeft = 0;
|
||||
}
|
||||
|
||||
posicionarFlechas();
|
||||
actualizarEstadoFlechas();
|
||||
}
|
||||
|
||||
function desplazar(cantidad) {
|
||||
if (typeof encabezado.scrollBy === "function") {
|
||||
encabezado.scrollBy({
|
||||
left: cantidad,
|
||||
behavior: "smooth"
|
||||
});
|
||||
} else {
|
||||
encabezado.scrollLeft += cantidad;
|
||||
}
|
||||
}
|
||||
|
||||
botonAnterior.addEventListener("click", function (evento) {
|
||||
evento.preventDefault();
|
||||
evento.stopPropagation();
|
||||
|
||||
desplazar(
|
||||
-Math.max(180, encabezado.clientWidth * 0.65)
|
||||
);
|
||||
});
|
||||
|
||||
botonSiguiente.addEventListener("click", function (evento) {
|
||||
evento.preventDefault();
|
||||
evento.stopPropagation();
|
||||
|
||||
desplazar(
|
||||
Math.max(180, encabezado.clientWidth * 0.65)
|
||||
);
|
||||
});
|
||||
|
||||
encabezado.addEventListener(
|
||||
"scroll",
|
||||
actualizarEstadoFlechas,
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
/*
|
||||
* Mantiene visible el tab que se acaba de seleccionar.
|
||||
*/
|
||||
encabezado.addEventListener("click", function (evento) {
|
||||
var tab = evento.target.closest(".ajax__tab");
|
||||
|
||||
if (!tab) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.setTimeout(function () {
|
||||
var izquierdaTab = tab.offsetLeft;
|
||||
var derechaTab =
|
||||
izquierdaTab + tab.offsetWidth;
|
||||
|
||||
var izquierdaVisible =
|
||||
encabezado.scrollLeft;
|
||||
|
||||
var derechaVisible =
|
||||
izquierdaVisible +
|
||||
encabezado.clientWidth;
|
||||
|
||||
if (izquierdaTab < izquierdaVisible) {
|
||||
encabezado.scrollTo({
|
||||
left: izquierdaTab,
|
||||
behavior: "smooth"
|
||||
});
|
||||
} else if (derechaTab > derechaVisible) {
|
||||
encabezado.scrollTo({
|
||||
left:
|
||||
derechaTab -
|
||||
encabezado.clientWidth,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
|
||||
if (typeof ResizeObserver !== "undefined") {
|
||||
var observer = new ResizeObserver(function () {
|
||||
recalcularOverflow();
|
||||
});
|
||||
|
||||
observer.observe(contenedor);
|
||||
} else {
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
recalcularOverflow
|
||||
);
|
||||
}
|
||||
|
||||
contenedor._sigTabsInicializados = true;
|
||||
contenedor._sigTabsActualizar = recalcularOverflow;
|
||||
|
||||
recalcularOverflow();
|
||||
|
||||
/*
|
||||
* Segunda revisión por si las fuentes o estilos
|
||||
* todavía no terminaban de cargarse.
|
||||
*/
|
||||
window.setTimeout(recalcularOverflow, 200);
|
||||
}
|
||||
|
||||
/*
|
||||
* ASP.NET WebForms:
|
||||
* Sys.Application.add_load también se ejecuta
|
||||
* después de los postbacks de un UpdatePanel.
|
||||
*/
|
||||
if (
|
||||
window.Sys &&
|
||||
Sys.Application &&
|
||||
typeof Sys.Application.add_load === "function"
|
||||
) {
|
||||
Sys.Application.add_load(
|
||||
inicializarNavegacionTabs
|
||||
);
|
||||
} else if (document.readyState === "loading") {
|
||||
document.addEventListener(
|
||||
"DOMContentLoaded",
|
||||
inicializarNavegacionTabs
|
||||
);
|
||||
} else {
|
||||
inicializarNavegacionTabs();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user