scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-10 14:42:13 -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'}` Math.abs(props.horizontalScrollLengthPercent - 100) < 1e-8 ? 'none' : 'block'}`
}} }}
onMouseDown={props.onHorizontalScrollbarMouseDown} onMouseDown={props.onHorizontalScrollbarMouseDown}
onTouchStart={props.onHorizontalScrollbarMouseDown}
/> />
</div> </div>
<div <div
@ -38,6 +39,7 @@ const ScrollableCanvasComponent = props => (
Math.abs(props.verticalScrollLengthPercent - 100) < 1e-8 ? 'none' : 'block'}` Math.abs(props.verticalScrollLengthPercent - 100) < 1e-8 ? 'none' : 'block'}`
}} }}
onMouseDown={props.onVerticalScrollbarMouseDown} onMouseDown={props.onVerticalScrollbarMouseDown}
onTouchStart={props.onVerticalScrollbarMouseDown}
/> />
</div> </div>
</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.initialMouseX = getEventXY(event).x;
this.initialScreenX = paper.view.matrix.tx; this.initialScreenX = paper.view.matrix.tx;
window.addEventListener('mousemove', this.handleHorizontalScrollbarMouseMove); window.addEventListener('mousemove', this.handleHorizontalScrollbarMouseMove);
window.addEventListener('touchmove', this.handleHorizontalScrollbarMouseMove);
window.addEventListener('mouseup', this.handleHorizontalScrollbarMouseUp); window.addEventListener('mouseup', this.handleHorizontalScrollbarMouseUp);
window.addEventListener('touchend', this.handleHorizontalScrollbarMouseUp);
event.preventDefault(); event.preventDefault();
} }
handleHorizontalScrollbarMouseMove (event) { handleHorizontalScrollbarMouseMove (event) {
@ -57,7 +59,9 @@ class ScrollableCanvas extends React.Component {
} }
handleHorizontalScrollbarMouseUp () { handleHorizontalScrollbarMouseUp () {
window.removeEventListener('mousemove', this.handleHorizontalScrollbarMouseMove); window.removeEventListener('mousemove', this.handleHorizontalScrollbarMouseMove);
window.removeEventListener('touchmove', this.handleHorizontalScrollbarMouseMove);
window.removeEventListener('mouseup', this.handleHorizontalScrollbarMouseUp); window.removeEventListener('mouseup', this.handleHorizontalScrollbarMouseUp);
window.removeEventListener('touchend', this.handleHorizontalScrollbarMouseUp);
this.initialMouseX = null; this.initialMouseX = null;
this.initialScreenX = null; this.initialScreenX = null;
event.preventDefault(); event.preventDefault();
@ -66,7 +70,9 @@ class ScrollableCanvas extends React.Component {
this.initialMouseY = getEventXY(event).y; this.initialMouseY = getEventXY(event).y;
this.initialScreenY = paper.view.matrix.ty; this.initialScreenY = paper.view.matrix.ty;
window.addEventListener('mousemove', this.handleVerticalScrollbarMouseMove); window.addEventListener('mousemove', this.handleVerticalScrollbarMouseMove);
window.addEventListener('touchmove', this.handleVerticalScrollbarMouseMove);
window.addEventListener('mouseup', this.handleVerticalScrollbarMouseUp); window.addEventListener('mouseup', this.handleVerticalScrollbarMouseUp);
window.addEventListener('touchend', this.handleVerticalScrollbarMouseUp);
event.preventDefault(); event.preventDefault();
} }
handleVerticalScrollbarMouseMove (event) { handleVerticalScrollbarMouseMove (event) {
@ -78,7 +84,9 @@ class ScrollableCanvas extends React.Component {
} }
handleVerticalScrollbarMouseUp (event) { handleVerticalScrollbarMouseUp (event) {
window.removeEventListener('mousemove', this.handleVerticalScrollbarMouseMove); window.removeEventListener('mousemove', this.handleVerticalScrollbarMouseMove);
window.removeEventListener('touchmove', this.handleVerticalScrollbarMouseMove);
window.removeEventListener('mouseup', this.handleVerticalScrollbarMouseUp); window.removeEventListener('mouseup', this.handleVerticalScrollbarMouseUp);
window.removeEventListener('touchend', this.handleVerticalScrollbarMouseUp);
this.initialMouseY = null; this.initialMouseY = null;
this.initialScreenY = null; this.initialScreenY = null;
event.preventDefault(); event.preventDefault();