382 lines
11 KiB
JavaScript
382 lines
11 KiB
JavaScript
(function (window, document) {
|
|
'use strict';
|
|
|
|
var api = window.SIGBitacoraGrid = window.SIGBitacoraGrid || {};
|
|
|
|
function asArray(list) {
|
|
return Array.prototype.slice.call(list || []);
|
|
}
|
|
|
|
function getRoots(root) {
|
|
var context = root || document;
|
|
var roots = [];
|
|
|
|
if (context.nodeType === 1 &&
|
|
context.matches &&
|
|
context.matches('.js-sig-bitacora-grid')) {
|
|
roots.push(context);
|
|
}
|
|
|
|
if (context.querySelectorAll) {
|
|
roots = roots.concat(
|
|
asArray(context.querySelectorAll('.js-sig-bitacora-grid'))
|
|
);
|
|
}
|
|
|
|
return roots;
|
|
}
|
|
|
|
function initializeRoot(root) {
|
|
if (!root ||
|
|
root.getAttribute('data-sig-bitacora-grid-initialized') === '1') {
|
|
return;
|
|
}
|
|
|
|
var scroll = root.querySelector('.js-sig-bitacora-grid-scroll');
|
|
var previous = root.querySelector('.js-sig-bitacora-grid-prev');
|
|
var next = root.querySelector('.js-sig-bitacora-grid-next');
|
|
var threshold = parseInt(
|
|
root.getAttribute('data-sig-scroll-threshold'),
|
|
10
|
|
);
|
|
var canPrevious = root.getAttribute('data-sig-can-prev') === '1';
|
|
var canNext = root.getAttribute('data-sig-can-next') === '1';
|
|
var anchor = root.getAttribute('data-sig-scroll-anchor');
|
|
var upCount = 0;
|
|
var downCount = 0;
|
|
var changingPage = false;
|
|
|
|
if (!scroll) {
|
|
return;
|
|
}
|
|
|
|
if (!threshold || threshold < 1) {
|
|
threshold = 3;
|
|
}
|
|
|
|
if (anchor === 'bottom') {
|
|
scroll.scrollTop = scroll.scrollHeight;
|
|
} else {
|
|
scroll.scrollTop = 0;
|
|
}
|
|
|
|
scroll.addEventListener('scroll', function () {
|
|
upCount = 0;
|
|
downCount = 0;
|
|
}, false);
|
|
|
|
scroll.addEventListener('wheel', function (event) {
|
|
if (changingPage) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
var atTop = scroll.scrollTop <= 1;
|
|
var remaining = scroll.scrollHeight -
|
|
scroll.clientHeight -
|
|
scroll.scrollTop;
|
|
var atBottom = remaining <= 1;
|
|
|
|
if (event.deltaY > 0 && atBottom && canNext && next) {
|
|
event.preventDefault();
|
|
downCount += 1;
|
|
upCount = 0;
|
|
|
|
if (downCount >= threshold) {
|
|
changingPage = true;
|
|
next.click();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (event.deltaY < 0 && atTop && canPrevious && previous) {
|
|
event.preventDefault();
|
|
upCount += 1;
|
|
downCount = 0;
|
|
|
|
if (upCount >= threshold) {
|
|
changingPage = true;
|
|
previous.click();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
upCount = 0;
|
|
downCount = 0;
|
|
}, false);
|
|
|
|
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(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) {
|
|
if (!id || !window.jQuery) {
|
|
return;
|
|
}
|
|
|
|
var modal = window.jQuery('#' + id);
|
|
|
|
if (!modal.length || !modal.modal) {
|
|
return;
|
|
}
|
|
|
|
modal.modal('show');
|
|
|
|
if (window.App && window.App.initAjax) {
|
|
window.App.initAjax();
|
|
}
|
|
};
|
|
|
|
function registerPartialPostbackBridge() {
|
|
if (window.SIG_BITACORA_GRID_PARTIAL_INITIALIZED === true) {
|
|
return;
|
|
}
|
|
|
|
if (!window.Sys ||
|
|
!Sys.WebForms ||
|
|
!Sys.WebForms.PageRequestManager) {
|
|
return;
|
|
}
|
|
|
|
window.SIG_BITACORA_GRID_PARTIAL_INITIALIZED = true;
|
|
|
|
var requestManager =
|
|
Sys.WebForms.PageRequestManager.getInstance();
|
|
|
|
requestManager.add_beginRequest(function () {
|
|
api.cancelPendingNavigation(document);
|
|
});
|
|
|
|
requestManager.add_endRequest(
|
|
function (sender, args) {
|
|
var panels = null;
|
|
if (args?.get_panelsUpdated) {
|
|
panels = args.get_panelsUpdated();
|
|
}
|
|
if (!panels || panels.length === 0) {
|
|
api.initialize(document);
|
|
return;
|
|
}
|
|
|
|
for (var index = 0; index < panels.length; index += 1) {
|
|
api.initialize(panels[index]);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
function ready() {
|
|
api.initialize(document);
|
|
registerPartialPostbackBridge();
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', ready, false);
|
|
} else {
|
|
ready();
|
|
}
|
|
}(window, document));
|