Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Improved card settings panel drag in Firefox

Browse source 
closes https://github.com/TryGhost/Team/issues/1208

- clear and disable selection when drag starts
- ensure click-cancel event handler is removed when destroying (FF could trigger destroy without triggering drag end leaving you with nothing clickable)
This commit is contained in:
Kevin Ansfield 2021-11-09 17:57:24 +00:00
parent 8b007802d4
commit 59fb902b1c
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
ghost/admin/app/modifiers/movable.js
View file

@ -1,5 +1,6 @@
import Modifier from 'ember-modifier'; import Modifier from 'ember-modifier';
import {action} from '@ember/object'; import {action} from '@ember/object';
import {guidFor} from '@ember/object/internals';
export default class MovableModifier extends Modifier { export default class MovableModifier extends Modifier {
moveThreshold = 3; moveThreshold = 3;
@ -14,13 +15,13 @@ export default class MovableModifier extends Modifier {
// Lifecycle hooks --------------------------------------------------------- // Lifecycle hooks ---------------------------------------------------------
didReceiveArguments() { didInstall() {
this.removeEventListeners();
this.addStartEventListeners(); this.addStartEventListeners();
} }
willDestroy() { willDestroy() {
this.removeEventListeners(); this.removeEventListeners();
this.enableSelection();
} }
// Custom methods ----------------------------------------------------------- // Custom methods -----------------------------------------------------------
@ -47,6 +48,7 @@ export default class MovableModifier extends Modifier {
window.removeEventListener('touchmove', this.drag, {capture: true, passive: false}); window.removeEventListener('touchmove', this.drag, {capture: true, passive: false});
window.removeEventListener('mouseup', this.dragEnd, {capture: true, passive: false}); window.removeEventListener('mouseup', this.dragEnd, {capture: true, passive: false});
window.removeEventListener('mousemove', this.drag, {capture: true, passive: false}); window.removeEventListener('mousemove', this.drag, {capture: true, passive: false});
window.removeEventListener('click', this.cancelClick, {capture: true, passive: false});
} }
removeEventListeners() { removeEventListeners() {
@ -98,6 +100,7 @@ export default class MovableModifier extends Modifier {
Math.abs(Math.abs(this.initialY - eventY) - Math.abs(this.yOffset)) > this.moveThreshold Math.abs(Math.abs(this.initialY - eventY) - Math.abs(this.yOffset)) > this.moveThreshold
) { ) {
this.disableScroll(); this.disableScroll();
this.disableSelection();
this.disablePointerEvents(); this.disablePointerEvents();
this.active = true; this.active = true;
} }
@ -125,6 +128,7 @@ export default class MovableModifier extends Modifier {
this.removeActiveEventListeners(); this.removeActiveEventListeners();
this.enableScroll(); this.enableScroll();
this.enableSelection();
// timeout required so immediate events blocked until the dragEnd has fully realised // timeout required so immediate events blocked until the dragEnd has fully realised
setTimeout(() => { setTimeout(() => {
@ -151,6 +155,22 @@ export default class MovableModifier extends Modifier {
this.element.style.overflow = this.originalOverflow; this.element.style.overflow = this.originalOverflow;
} }
disableSelection() {
window.getSelection().removeAllRanges();
const stylesheet = document.createElement('style');
stylesheet.id = `stylesheet-${guidFor(this)}`;
document.head.appendChild(stylesheet);
stylesheet.sheet.insertRule('* { user-select: none !important; }', 0);
}
enableSelection() {
const stylesheet = document.getElementById(`stylesheet-${guidFor(this)}`);
stylesheet?.remove();
}
// disabling pointer events prevents inputs being activated when drag finishes, // disabling pointer events prevents inputs being activated when drag finishes,
// preventing clicks stops any event handlers that may otherwise result in the // preventing clicks stops any event handlers that may otherwise result in the
// movable element being closed when the drag finishes // movable element being closed when the drag finishes