fix autoscroll: mobile drag pageY + cap vertical scroll at board bottom+200px; v1.2.1
This commit is contained in:
@@ -28,6 +28,7 @@
|
|||||||
var EDGE_ZONE_MAX = 160; // ...and at most 160px.
|
var EDGE_ZONE_MAX = 160; // ...and at most 160px.
|
||||||
var MAX_SPEED = 22; // px per animation frame at the very edge
|
var MAX_SPEED = 22; // px per animation frame at the very edge
|
||||||
var EASE = 1; // 1 = linear ramp, 2 = gentle-then-fast
|
var EASE = 1; // 1 = linear ramp, 2 = gentle-then-fast
|
||||||
|
var SCROLL_SAFETY = 200; // px of page we may scroll past the bottom of the columns
|
||||||
|
|
||||||
var jq = window.jQuery;
|
var jq = window.jQuery;
|
||||||
if (!jq) {
|
if (!jq) {
|
||||||
@@ -116,6 +117,20 @@
|
|||||||
vspeed = speedFor(dBottom, zoneV);
|
vspeed = speedFor(dBottom, zoneV);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Cap downward scrolling to just past the bottom of the columns, so a drag held at
|
||||||
|
// the bottom edge cannot scroll the page forever. #board is the columns table, so
|
||||||
|
// its height is the tallest column; allow SCROLL_SAFETY px beyond it.
|
||||||
|
if (vspeed > 0) {
|
||||||
|
var boardEl = document.getElementById("board");
|
||||||
|
if (boardEl) {
|
||||||
|
var boardBottomPage = boardEl.getBoundingClientRect().bottom + window.pageYOffset;
|
||||||
|
var maxScrollY = boardBottomPage + SCROLL_SAFETY - window.innerHeight;
|
||||||
|
if (window.pageYOffset >= maxScrollY) {
|
||||||
|
vspeed = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (vspeed !== 0) {
|
if (vspeed !== 0) {
|
||||||
var beforeY = window.pageYOffset;
|
var beforeY = window.pageYOffset;
|
||||||
window.scrollBy(0, vspeed);
|
window.scrollBy(0, vspeed);
|
||||||
@@ -125,12 +140,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// When the board/page actually moved, nudge jQuery UI to recompute drop positions
|
// When the board/page actually moved, nudge jQuery UI to recompute drop positions
|
||||||
// so the placeholder follows onto the newly revealed area (either axis).
|
// so the placeholder follows onto the newly revealed area (either axis). Dispatch
|
||||||
|
// through jQuery with EXPLICIT page coordinates: a raw synthetic MouseEvent does not
|
||||||
|
// carry a correct pageY on mobile browsers, which made jQuery UI drop the dragged
|
||||||
|
// card to a wrong vertical position (X right, Y jumping up).
|
||||||
if (moved) {
|
if (moved) {
|
||||||
document.dispatchEvent(new MouseEvent("mousemove", {
|
jq(document).trigger(jq.Event("mousemove", {
|
||||||
|
which: 1,
|
||||||
clientX: lastX,
|
clientX: lastX,
|
||||||
clientY: lastY,
|
clientY: lastY,
|
||||||
bubbles: true
|
pageX: lastX + window.pageXOffset,
|
||||||
|
pageY: lastY + window.pageYOffset
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ class Plugin extends Base
|
|||||||
|
|
||||||
public function getPluginVersion()
|
public function getPluginVersion()
|
||||||
{
|
{
|
||||||
return '1.2.0';
|
return '1.2.1';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPluginHomepage()
|
public function getPluginHomepage()
|
||||||
|
|||||||
Reference in New Issue
Block a user