Plataforma-de-desarrolladores/SIG.Web/Scripts/SigTabsScroll.js

(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();
    }
})();