--

SIG.Web/Scripts/BitacoraGrid.js

@@ -110,8 +110,206 @@
         root.setAttribute('data-sig-bitacora-grid-initialized', '1');
     }
 
+    function clearPaginationTimer(slider) {
+        if (!slider || !slider.sigBitacoraPaginationTimer) {
+            return;
+        }
+
+        window.clearTimeout(slider.sigBitacoraPaginationTimer);
+        slider.sigBitacoraPaginationTimer = null;
+    }
+
+    function setPaginationSliderDisplay(slider, track, label) {
+        var currentValue = parseInt(slider.value, 10);
+        var totalPages = parseInt(slider.max, 10);
+        var position = totalPages <= 1
+            ? 0
+            : ((currentValue - 1) * 100) / (totalPages - 1);
+        var pageText = 'Página ' + currentValue + ' de ' + totalPages;
+
+        track.style.setProperty(
+            '--sig-bitacora-page-position',
+            position + '%'
+        );
+        track.setAttribute(
+            'data-sig-slider-edge',
+            currentValue <= 1
+                ? 'start'
+                : currentValue >= totalPages
+                    ? 'end'
+                    : 'middle'
+        );
+        label.textContent = pageText;
+        slider.setAttribute('aria-valuenow', currentValue.toString());
+        slider.setAttribute('aria-valuetext', pageText);
+    }
+
+    function initializePaginationSlider(root) {
+        var slider = root.querySelector(
+            '.js-sig-bitacora-grid-pagination-slider'
+        );
+
+        if (!slider ||
+            slider.getAttribute(
+                'data-sig-bitacora-pagination-slider-initialized'
+            ) === '1') {
+            return;
+        }
+
+        var track = slider.parentNode;
+        var label = track.querySelector(
+            '.sig-bitacora-grid-pagination-slider-label'
+        );
+        var requestedPageField = document.getElementById(
+            slider.getAttribute('data-sig-page-field-id')
+        );
+        var pageRequest = root.querySelector(
+            '.js-sig-bitacora-grid-page-request'
+        );
+        var pointerInteraction = false;
+        var thumbRadius = 12;
+
+        if (!track || !label || !requestedPageField || !pageRequest) {
+            return;
+        }
+
+        function setLabelVisible(visible) {
+            if (visible) {
+                track.classList.add('is-label-visible');
+                return;
+            }
+
+            track.classList.remove('is-label-visible');
+        }
+
+        function updateLabelHover(event) {
+            if (pointerInteraction) {
+                setLabelVisible(true);
+                return;
+            }
+
+            var rectangle = slider.getBoundingClientRect();
+            var minimum = parseInt(slider.min, 10) || 1;
+            var maximum = parseInt(slider.max, 10) || minimum;
+            var current = parseInt(slider.value, 10) || minimum;
+            var range = Math.max(maximum - minimum, 1);
+            var usableWidth = Math.max(
+                rectangle.width - (thumbRadius * 2),
+                0
+            );
+            var thumbCenter = rectangle.left + thumbRadius +
+                (((current - minimum) / range) * usableWidth);
+            var isOverThumb =
+                Math.abs(event.clientX - thumbCenter) <= thumbRadius &&
+                event.clientY >= rectangle.top - 4 &&
+                event.clientY <= rectangle.bottom + 4;
+
+            setLabelVisible(isOverThumb);
+        }
+
+        function scheduleNavigation() {
+            var selectedPage = parseInt(slider.value, 10);
+            var currentPage = parseInt(
+                slider.getAttribute('data-sig-current-page'),
+                10
+            );
+            var totalPages = parseInt(slider.max, 10);
+
+            clearPaginationTimer(slider);
+
+            if (slider.disabled ||
+                totalPages <= 1 ||
+                selectedPage === currentPage) {
+                requestedPageField.value = '';
+                return;
+            }
+
+            requestedPageField.value = selectedPage.toString();
+            slider.sigBitacoraPaginationTimer = window.setTimeout(
+                function () {
+                    var finalPage = parseInt(slider.value, 10);
+
+                    slider.sigBitacoraPaginationTimer = null;
+
+                    if (slider.disabled ||
+                        finalPage === currentPage ||
+                        finalPage !== selectedPage ||
+                        !document.documentElement.contains(slider)) {
+                        requestedPageField.value = '';
+                        return;
+                    }
+
+                    requestedPageField.value = finalPage.toString();
+                    slider.disabled = true;
+                    pageRequest.click();
+                },
+                3000
+            );
+        }
+
+        function handleInput() {
+            setPaginationSliderDisplay(slider, track, label);
+            setLabelVisible(true);
+            clearPaginationTimer(slider);
+
+            if (!pointerInteraction) {
+                scheduleNavigation();
+            }
+        }
+
+        function beginPointerInteraction() {
+            pointerInteraction = true;
+            setLabelVisible(true);
+            clearPaginationTimer(slider);
+        }
+
+        function endPointerInteraction(event) {
+            pointerInteraction = false;
+
+            if (event && event.type === 'touchend') {
+                setLabelVisible(false);
+            } else if (event && typeof event.clientX === 'number') {
+                updateLabelHover(event);
+            }
+
+            scheduleNavigation();
+        }
+
+        slider.addEventListener('input', handleInput, false);
+        slider.addEventListener('change', endPointerInteraction, false);
+        slider.addEventListener('mousedown', beginPointerInteraction, false);
+        slider.addEventListener('mouseup', endPointerInteraction, false);
+        slider.addEventListener('touchstart', beginPointerInteraction, false);
+        slider.addEventListener('touchend', endPointerInteraction, false);
+        slider.addEventListener('mousemove', updateLabelHover, false);
+        slider.addEventListener('mouseleave', function () {
+            if (!pointerInteraction) {
+                setLabelVisible(false);
+            }
+        }, false);
+
+        setPaginationSliderDisplay(slider, track, label);
+        slider.setAttribute(
+            'data-sig-bitacora-pagination-slider-initialized',
+            '1'
+        );
+    }
+
     api.initialize = function (root) {
-        getRoots(root).forEach(initializeRoot);
+        getRoots(root).forEach(function (bitacoraRoot) {
+            initializeRoot(bitacoraRoot);
+            initializePaginationSlider(bitacoraRoot);
+        });
+    };
+
+    api.cancelPendingNavigation = function (root) {
+        getRoots(root).forEach(function (bitacoraRoot) {
+            var slider = bitacoraRoot.querySelector(
+                '.js-sig-bitacora-grid-pagination-slider'
+            );
+
+            clearPaginationTimer(slider);
+        });
     };
 
     api.showModal = function (id) {
@@ -145,9 +343,15 @@
 
         window.SIG_BITACORA_GRID_PARTIAL_INITIALIZED = true;
 
-        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
+        var requestManager =
+            Sys.WebForms.PageRequestManager.getInstance();
+
+        requestManager.add_beginRequest(function () {
+            api.cancelPendingNavigation(document);
+        });
+
+        requestManager.add_endRequest(
             function (sender, args) {
-                debugger
                 var panels = null;
                 if (args?.get_panelsUpdated) {
                     panels = args.get_panelsUpdated();