scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-23 05:52:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #853 from paulkaplan/touch-scrollbars

Browse source 
Make scrollbars touch accessible.
This commit is contained in:
Paul Kaplan 2019-06-21 09:05:13 -04:00 committed by GitHub
commit 4d9aac9bf9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/scrollable-canvas/scrollable-canvas.jsx
View file

@ -22,6 +22,7 @@ const ScrollableCanvasComponent = props => (
Math.abs(props.horizontalScrollLengthPercent - 100) < 1e-8 ? 'none' : 'block'}`
}}
onMouseDown={props.onHorizontalScrollbarMouseDown}
onTouchStart={props.onHorizontalScrollbarMouseDown}
/>
</div>
<div
@ -38,6 +39,7 @@ const ScrollableCanvasComponent = props => (
Math.abs(props.verticalScrollLengthPercent - 100) < 1e-8 ? 'none' : 'block'}`
}}
onMouseDown={props.onVerticalScrollbarMouseDown}
onTouchStart={props.onVerticalScrollbarMouseDown}
/>
</div>
</div>

8
src/containers/scrollable-canvas.jsx
View file

@ -45,7 +45,9 @@ class ScrollableCanvas extends React.Component {
this.initialMouseX = getEventXY(event).x;
this.initialScreenX = paper.view.matrix.tx;
window.addEventListener('mousemove', this.handleHorizontalScrollbarMouseMove);
window.addEventListener('touchmove', this.handleHorizontalScrollbarMouseMove);
window.addEventListener('mouseup', this.handleHorizontalScrollbarMouseUp);
window.addEventListener('touchend', this.handleHorizontalScrollbarMouseUp);
event.preventDefault();
}
handleHorizontalScrollbarMouseMove (event) {
@ -57,7 +59,9 @@ class ScrollableCanvas extends React.Component {
}
handleHorizontalScrollbarMouseUp () {
window.removeEventListener('mousemove', this.handleHorizontalScrollbarMouseMove);
window.removeEventListener('touchmove', this.handleHorizontalScrollbarMouseMove);
window.removeEventListener('mouseup', this.handleHorizontalScrollbarMouseUp);
window.removeEventListener('touchend', this.handleHorizontalScrollbarMouseUp);
this.initialMouseX = null;
this.initialScreenX = null;
event.preventDefault();
@ -66,7 +70,9 @@ class ScrollableCanvas extends React.Component {
this.initialMouseY = getEventXY(event).y;
this.initialScreenY = paper.view.matrix.ty;
window.addEventListener('mousemove', this.handleVerticalScrollbarMouseMove);
window.addEventListener('touchmove', this.handleVerticalScrollbarMouseMove);
window.addEventListener('mouseup', this.handleVerticalScrollbarMouseUp);
window.addEventListener('touchend', this.handleVerticalScrollbarMouseUp);
event.preventDefault();
}
handleVerticalScrollbarMouseMove (event) {
@ -78,7 +84,9 @@ class ScrollableCanvas extends React.Component {
}
handleVerticalScrollbarMouseUp (event) {
window.removeEventListener('mousemove', this.handleVerticalScrollbarMouseMove);
window.removeEventListener('touchmove', this.handleVerticalScrollbarMouseMove);
window.removeEventListener('mouseup', this.handleVerticalScrollbarMouseUp);
window.removeEventListener('touchend', this.handleVerticalScrollbarMouseUp);
this.initialMouseY = null;
this.initialScreenY = null;
event.preventDefault();