FIX: Ensure floating quote button is distanced from iOS selection (#15588)

Tapping within ~50px of the selection end handle on iOS doesn't trigger a click event. This commit ensures that our quote buttons are always at least 50px away from the end handle. It will try 4 positions in order of preference:

1. The original position
2. 50px to the left of the handle
3. 50px to the right of the handle
4. 50px below the handle, centered on the handle
This commit is contained in:
David Taylor 2022-01-17 01:03:43 +00:00 committed by GitHub
parent b06c5dde94
commit cbf99f48d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 0 deletions

View File

@ -233,6 +233,44 @@ export default Component.extend(KeyEnterEscape, {
top = top - $quoteButton.outerHeight() - 5;
}
if (isIOS) {
// The selection-handles on iOS have a hit area of ~50px radius
// so we need to make sure our buttons are outside that radius
const safeRadius = 50;
const endHandlePosition = markerOffset;
const width = this.element.clientWidth;
const possiblePositions = [
{ top, left },
{ top, left: endHandlePosition.left - width - safeRadius - 10 }, // move to left
{ top, left: left + safeRadius }, // move to right
{ top: top + safeRadius, left: endHandlePosition.left - width / 2 }, // centered below end handle
];
let newPos;
for (const pos of possiblePositions) {
if (pos.left < 0 || pos.left + width + 10 > window.innerWidth) {
continue; // Offscreen
}
const clearOfEndHandle =
pos.top - endHandlePosition.top >= safeRadius ||
pos.left + width <= endHandlePosition.left - safeRadius ||
pos.left >= endHandlePosition.left + safeRadius;
if (clearOfEndHandle) {
newPos = pos;
break;
}
}
if (newPos) {
left = newPos.left;
top = newPos.top;
}
}
$quoteButton.offset({ top, left });
});
},