mirror/php-adminer
1
0
Fork 0
mirror of https://github.com/vrana/adminer.git synced 2025-08-31 18:11:52 +02:00
Code Issues Releases Wiki Activity

Add support for page scrolling while dragging sortable rows (issue #11)

Browse Source
This commit is contained in:
Peter Knut
2025-01-28 17:12:48 +01:00
parent d53c966ef7
commit cad67e2c68
1 changed files with 50 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
adminer/static/functions.js
View File

@@ -528,7 +528,7 @@ function selectSearchSearch() {
// Sorting. // Sorting.
(function() { (function() {
let placeholderRow = null, nextRow = null, dragHelper = null; let placeholderRow = null, nextRow = null, dragHelper = null;
let startY, minY, maxY; let startScrollY, startY, minY, maxY, lastPointerY;
/** /**
* Initializes sortable list of DIV elements. * Initializes sortable list of DIV elements.
@@ -569,6 +569,7 @@ function selectSearchSearch() {
const pointerY = getPointerY(event); const pointerY = getPointerY(event);
const parent = row.parentNode; const parent = row.parentNode;
startScrollY = window.scrollY;
startY = pointerY - getOffsetTop(row); startY = pointerY - getOffsetTop(row);
minY = getOffsetTop(parent); minY = getOffsetTop(parent);
maxY = minY + parent.offsetHeight - row.offsetHeight; maxY = minY + parent.offsetHeight - row.offsetHeight;
@@ -612,6 +613,7 @@ function selectSearchSearch() {
window.addEventListener("mousemove", updateSorting); window.addEventListener("mousemove", updateSorting);
window.addEventListener("touchmove", updateSorting); window.addEventListener("touchmove", updateSorting);
window.addEventListener("scroll", updateSorting);
window.addEventListener("mouseup", finishSorting); window.addEventListener("mouseup", finishSorting);
window.addEventListener("touchend", finishSorting); window.addEventListener("touchend", finishSorting);
@@ -620,27 +622,51 @@ function selectSearchSearch() {
function updateSorting(event) { function updateSorting(event) {
const pointerY = getPointerY(event); const pointerY = getPointerY(event);
const scrollingBoundary = 30;
const speedCoefficient = 8;
let top = Math.min(Math.max(pointerY - startY, minY), maxY); // If mouse pointer is over the top boundary, scroll page down.
dragHelper.style.top = `${top}px`; let distance = pointerY - scrollingBoundary;
if (distance < 0 && window.scrollY > 0) {
const parent = placeholderRow.parentNode; window.scrollBy(0, distance / speedCoefficient);
top = top - minY + parent.offsetTop; return;
let sibling;
if (top > placeholderRow.offsetTop + placeholderRow.offsetHeight / 2) {
sibling = !nextRow.classList.contains("no-sort") ? nextRow.nextElementSibling : nextRow;
} else if (top + placeholderRow.offsetHeight < placeholderRow.offsetTop + placeholderRow.offsetHeight / 2) {
sibling = placeholderRow.previousElementSibling;
} else {
sibling = nextRow;
} }
if (sibling !== nextRow) { // If mouse pointer is under the bottom boundary, scroll page up.
const parent = placeholderRow.parentNode; distance = pointerY - window.innerHeight + scrollingBoundary;
if (distance > 0 && window.scrollY + window.innerHeight < document.documentElement.scrollHeight) {
window.scrollBy(0, distance / speedCoefficient);
return;
}
nextRow = sibling; // Move helper row to the pointer position.
if (sibling) { let top = Math.min(Math.max(pointerY - startY + window.scrollY - startScrollY, minY), maxY);
dragHelper.style.top = `${top}px`;
// Find a new position for the placeholder.
const parent = placeholderRow.parentNode;
let oldNextRow = nextRow;
top = top - minY + parent.offsetTop;
let testingRow = placeholderRow;
do {
if (top > testingRow.offsetTop + testingRow.offsetHeight / 2 + 1) {
if (!nextRow.classList.contains("no-sort")) {
testingRow = nextRow;
nextRow = nextRow.nextElementSibling;
} else {
break;
}
} else if (top + testingRow.offsetHeight < testingRow.offsetTop + testingRow.offsetHeight / 2 - 1) {
nextRow = testingRow = testingRow.previousElementSibling;
} else {
break;
}
} while (nextRow);
// Move the placeholder to a new position.
if (nextRow !== oldNextRow) {
if (nextRow) {
parent.insertBefore(placeholderRow, nextRow); parent.insertBefore(placeholderRow, nextRow);
} else { } else {
parent.appendChild(placeholderRow); parent.appendChild(placeholderRow);
@@ -661,6 +687,7 @@ function selectSearchSearch() {
window.removeEventListener("mousemove", updateSorting); window.removeEventListener("mousemove", updateSorting);
window.removeEventListener("touchmove", updateSorting); window.removeEventListener("touchmove", updateSorting);
window.removeEventListener("scroll", updateSorting);
window.removeEventListener("mouseup", finishSorting); window.removeEventListener("mouseup", finishSorting);
window.removeEventListener("touchend", finishSorting); window.removeEventListener("touchend", finishSorting);
@@ -670,10 +697,12 @@ function selectSearchSearch() {
function getPointerY(event) { function getPointerY(event) {
if (event.type.includes("touch")) { if (event.type.includes("touch")) {
const touch = event.touches[0] || event.changedTouches[0]; const touch = event.touches[0] || event.changedTouches[0];
return touch.clientY; lastPointerY = touch.clientY;
} else { } else if (event.clientY !== undefined) {
return event.clientY; lastPointerY = event.clientY;
} }
return lastPointerY;
} }
})(); })();