added top scrollbar imported
This commit is contained in:
@@ -1410,6 +1410,9 @@ $gridMeta = [
|
|||||||
const topScrollbar = document.getElementById('topScrollbar');
|
const topScrollbar = document.getElementById('topScrollbar');
|
||||||
const topScrollbarInner = document.getElementById('topScrollbarInner');
|
const topScrollbarInner = document.getElementById('topScrollbarInner');
|
||||||
const gridContainer = document.getElementById('gridContainer');
|
const gridContainer = document.getElementById('gridContainer');
|
||||||
|
const gridRowContainer = document.getElementById('gridRowContainer');
|
||||||
|
const gridHeaderContainer = document.getElementById('gridHeaderContainer');
|
||||||
|
const gridTopContainer = document.getElementById('gridTopContainer');
|
||||||
|
|
||||||
if (!topScrollbar || !topScrollbarInner || !gridContainer) return;
|
if (!topScrollbar || !topScrollbarInner || !gridContainer) return;
|
||||||
|
|
||||||
@@ -1417,14 +1420,22 @@ $gridMeta = [
|
|||||||
let syncingFromGrid = false;
|
let syncingFromGrid = false;
|
||||||
|
|
||||||
function updateTopScrollbarWidth() {
|
function updateTopScrollbarWidth() {
|
||||||
topScrollbarInner.style.width = gridContainer.scrollWidth + 'px';
|
const realWidth = Math.max(
|
||||||
|
gridContainer.scrollWidth,
|
||||||
|
gridHeaderContainer ? gridHeaderContainer.scrollWidth : 0,
|
||||||
|
gridTopContainer ? gridTopContainer.scrollWidth : 0,
|
||||||
|
gridRowContainer ? gridRowContainer.scrollWidth : 0
|
||||||
|
);
|
||||||
|
|
||||||
// Mostra la barra solo se serve davvero
|
topScrollbarInner.style.width = realWidth + 'px';
|
||||||
if (gridContainer.scrollWidth > gridContainer.clientWidth) {
|
|
||||||
|
if (realWidth > gridContainer.clientWidth) {
|
||||||
topScrollbar.style.display = 'block';
|
topScrollbar.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
topScrollbar.style.display = 'none';
|
topScrollbar.style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
topScrollbar.scrollLeft = gridContainer.scrollLeft;
|
||||||
}
|
}
|
||||||
|
|
||||||
topScrollbar.addEventListener('scroll', function() {
|
topScrollbar.addEventListener('scroll', function() {
|
||||||
@@ -1441,14 +1452,24 @@ $gridMeta = [
|
|||||||
syncingFromGrid = false;
|
syncingFromGrid = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
updateTopScrollbarWidth();
|
|
||||||
|
|
||||||
window.addEventListener('resize', updateTopScrollbarWidth);
|
window.addEventListener('resize', updateTopScrollbarWidth);
|
||||||
|
|
||||||
// Ritarda un attimo per sicurezza, visto che la griglia viene renderizzata via JS
|
// Recalculate after JS grid rendering
|
||||||
setTimeout(updateTopScrollbarWidth, 200);
|
setTimeout(updateTopScrollbarWidth, 100);
|
||||||
setTimeout(updateTopScrollbarWidth, 600);
|
setTimeout(updateTopScrollbarWidth, 300);
|
||||||
setTimeout(updateTopScrollbarWidth, 1200);
|
setTimeout(updateTopScrollbarWidth, 700);
|
||||||
|
setTimeout(updateTopScrollbarWidth, 1500);
|
||||||
|
|
||||||
|
// Recalculate automatically when rows/header/top controls are rendered or changed
|
||||||
|
const observer = new MutationObserver(updateTopScrollbarWidth);
|
||||||
|
|
||||||
|
if (gridContainer) {
|
||||||
|
observer.observe(gridContainer, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
attributes: true
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user