Commit Graph

8 Commits

Author SHA1 Message Date
Kevin Ansfield
1bf14c2cc3 Fixed card settings panel drag outside of central editor canvas closing panel
refs https://github.com/TryGhost/Team/issues/1208

- removing the click event listener in the same event loop as the `dragEnd` event is triggered meant Chrome still allowed the `click` event to trigger causing the card to become deselected and the movable panel closed when a drag ends outside of the central editor canvas
- adding a 1ms timeout means the event loop where the dragEnd is triggered fully completes before the next tick begins where the click handler is finally removed
2021-11-09 18:07:50 +00:00
Kevin Ansfield
59fb902b1c Improved card settings panel drag in Firefox
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)
2021-11-09 17:57:24 +00:00
Kevin Ansfield
5bb85430af Re-organised {{movable}} render modifier code
no issue

- moved lifecycle hooks to top of file as they are framework-provided and control creation/destruction
- changed code order for `dragStart()`, `drag()`, `dragEnd()` so they follow the modifiers expected event cycle
2021-11-05 10:53:41 +00:00
Kevin Ansfield
3fafc4a48a Fixed {{movable}} stopping text input selection and allowing drag of dropdown elems
no issue

- stops drag from being initiated from any element that matches `input` or `.ember-basic-dropdown-trigger` so that text can still be selected from inputs whilst dragging and we don't get left with orphaned dropdowns from dragging a dropdown-inducing element
2021-11-05 10:47:39 +00:00
Kevin Ansfield
e119eb3760 Fixed drag handling sometimes intercepting clicks on card settings panel
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
2021-11-04 14:53:39 +00:00
Kevin Ansfield
b230b2efff Fixed inputs being toggled / events being fired at end of {{movable}} drag
no issue

- moves disabling of scroll and pointer events into the `drag` handler so we don't inadvertently stop genuine clicks on elements inside the movable container
- adds a timeout for re-enabling pointer-events and clicks when drag finishes so we can still capture the unwanted events that would otherwise fire on mouseup
- uses a `click` event handler as that event is still fired even though we're preventing `mouseup`, fixes problems where the `pointer-events: none` on the movable container lets events through to the element behind it which could cause the movable container to be removed (eg, click event on the editor background moving a card out of edit mode)
2021-11-04 10:14:08 +00:00
Kevin Ansfield
49ea27cfb8 Fixed right-click triggering drag in {{movable}} modifier
no issue

- if the right button was pressed on the movable element it would start "drag" but also show the right-click menu meaning that once you clicked to close the menu the movable element was stuck to your pointer without the left button being held down
2021-11-04 09:49:14 +00:00
Kevin Ansfield
aae6e32494 Added basic drag-to-move handling to card setting panels
no issue

- adds `{{movable}}` render modifier that sets up basic mouse/touch event handlers that adjust the element's `translate` style when click/touched+dragged so it can be moved around the screen
2021-11-03 16:51:24 +00:00