github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-30 07:53:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/javascripts/discourse/app/components/quote-button.js
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 });
});
},