Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Touch drag-and-drop support for toolbox #439

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Touch drag-and-drop support for toolbox #439

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a11fa2c
Added touch drag-and-drop support to toolbox.
cubiclesoft Sep 2, 2017
5631cd2
Merge remote-tracking branch 'upstream/master'
cubiclesoft Oct 13, 2017
a12152c
Merge remote-tracking branch 'upstream/master'
cubiclesoft Mar 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 27 additions & 9 deletions src/scripts/ui/toolbox.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ class ContentTools.ToolboxUI extends ContentTools.WidgetUI

# Allow the toolbox to be dragged to a new location by the user
@_domGrip.addEventListener('mousedown', @_onStartDragging)
@_domGrip.addEventListener('touchstart', @_onStartDragging)

# Ensure that when the window is resized the toolbox remains in view
@_handleResize = (ev) =>
Expand Down Expand Up @@ -347,13 +348,18 @@ class ContentTools.ToolboxUI extends ContentTools.WidgetUI

_onDrag: (ev) =>
# User has dragged the toolbox to a new position
ev.preventDefault()

# Prevent content selection while dragging elements
ContentSelect.Range.unselectAll()

# Reposition the toolbox
@_domElement.style.left = "#{ ev.clientX - @_draggingOffset.x }px"
@_domElement.style.top = "#{ ev.clientY - @_draggingOffset.y }px"
if ev.type == 'touchmove'
@_domElement.style.left = "#{ ev.touches[0].clientX - @_draggingOffset.x }px"
@_domElement.style.top = "#{ ev.touches[0].clientY - @_draggingOffset.y }px"
else
@_domElement.style.left = "#{ ev.clientX - @_draggingOffset.x }px"
@_domElement.style.top = "#{ ev.clientY - @_draggingOffset.y }px"

_onStartDragging: (ev) =>
# Start dragging the toolbox
Expand All @@ -368,14 +374,24 @@ class ContentTools.ToolboxUI extends ContentTools.WidgetUI

# Calculate the offset of the cursor to the toolbox
rect = @_domElement.getBoundingClientRect()
@_draggingOffset = {
x: ev.clientX - rect.left,
y: ev.clientY - rect.top
}
if ev.type == 'touchstart'
@_draggingOffset = {
x: ev.touches[0].clientX - rect.left,
y: ev.touches[0].clientY - rect.top
}

# Setup dragging behaviour for the element
document.addEventListener('touchmove', @_onDrag)
document.addEventListener('touchend', @_onStopDragging)
else
@_draggingOffset = {
x: ev.clientX - rect.left,
y: ev.clientY - rect.top
}

# Setup dragging behaviour for the element
document.addEventListener('mousemove', @_onDrag)
document.addEventListener('mouseup', @_onStopDragging)
# Setup dragging behaviour for the element
document.addEventListener('mousemove', @_onDrag)
document.addEventListener('mouseup', @_onStopDragging)

# Add dragging class to the body (this class is defined in ContentEdit
# it disabled content selection via CSS).
Expand All @@ -390,6 +406,8 @@ class ContentTools.ToolboxUI extends ContentTools.WidgetUI
@_contain()

# Remove dragging behaviour
document.removeEventListener('touchmove', @_onDrag)
document.removeEventListener('touchend', @_onStopDragging)
document.removeEventListener('mousemove', @_onDrag)
document.removeEventListener('mouseup', @_onStopDragging)

Expand Down