TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Fixed drag handling sometimes intercepting clicks on card settings panel

Browse Source 
no issue

- added a movement threshold for click+drag so we don't make the drag fully active until there's been a few pixels of movement whilst the mouse is held down, fixes issues where a slight bit of movement when clicking on elements would make drag active blocking the click from working
This commit is contained in:
Kevin Ansfield 2021-11-04 14:53:28 +00:00
parent 208b4948ff
commit e119eb3760
1 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ghost/admin/app/modifiers/movable.js
View File

@ -2,6 +2,8 @@ import Modifier from 'ember-modifier';
import {action} from '@ember/object';
export default class MovableModifier extends Modifier {
moveThreshold = 3;
active = false;
currentX = undefined;
currentY = undefined;
@ -81,7 +83,7 @@ export default class MovableModifier extends Modifier {
this.removeActiveEventListeners();
this.enableScroll();
// timeout required so immediate events are still blocked
// timeout required so immediate events blocked until the dragEnd has fully realised
setTimeout(() => {
this.enablePointerEvents();
}, 5);
@ -91,24 +93,35 @@ export default class MovableModifier extends Modifier {
drag(e) {
e.preventDefault();
if (!this.active) {
this.disableScroll();
this.disablePointerEvents();
this.active = true;
}
let eventX, eventY;
if (e.type === 'touchmove') {
this.currentX = e.touches[0].clientX - this.initialX;
this.currentY = e.touches[0].clientY - this.initialY;
eventX = e.touches[0].clientX;
eventY = e.touches[0].clientY;
} else {
this.currentX = e.clientX - this.initialX;
this.currentY = e.clientY - this.initialY;
eventX = e.clientX;
eventY = e.clientY;
}
this.xOffset = this.currentX;
this.yOffset = this.currentY;
if (!this.active) {
if (
Math.abs(Math.abs(this.initialX - eventX) - Math.abs(this.xOffset)) > this.moveThreshold ||
Math.abs(Math.abs(this.initialY - eventY) - Math.abs(this.yOffset)) > this.moveThreshold
) {
this.disableScroll();
this.disablePointerEvents();
this.active = true;
}
}
this.setTranslate(this.currentX, this.currentY);
if (this.active) {
this.currentX = eventX - this.initialX;
this.currentY = eventY - this.initialY;
this.xOffset = this.currentX;
this.yOffset = this.currentY;
this.setTranslate(this.currentX, this.currentY);
}
}
@action