Skip to content

Commit

Permalink
Add Pointer Events DOM Fixture
Browse files Browse the repository at this point in the history
  • Loading branch information
philipp-spiess committed May 16, 2018
1 parent 135e820 commit 5f3167d
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 0 deletions.
1 change: 1 addition & 0 deletions fixtures/dom/src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ class Header extends React.Component {
<option value="/event-pooling">Event Pooling</option>
<option value="/custom-elements">Custom Elements</option>
<option value="/media-events">Media Events</option>
<option value="/pointer-events">Pointer Events</option>
</select>
</label>
<label htmlFor="react_version">
Expand Down
3 changes: 3 additions & 0 deletions fixtures/dom/src/components/fixtures/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import ErrorHandling from './error-handling';
import EventPooling from './event-pooling';
import CustomElementFixtures from './custom-elements';
import MediaEventsFixtures from './media-events';
import PointerEventsFixtures from './pointer-events';

const React = window.React;

Expand Down Expand Up @@ -46,6 +47,8 @@ function FixturesPage() {
return <CustomElementFixtures />;
case '/media-events':
return <MediaEventsFixtures />;
case '/pointer-events':
return <PointerEventsFixtures />;
default:
return <p>Please select a test fixture.</p>;
}
Expand Down
90 changes: 90 additions & 0 deletions fixtures/dom/src/components/fixtures/pointer-events/drag-box.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
const React = window.React;

const CIRCLE_SIZE = 80;

class DragBox extends React.Component {
state = {
hasCapture: false,
circleLeft: 80,
circleTop: 80,
};
isDragging = false;
previousLeft = 0;
previousTop = 0;

onDown = event => {
this.isDragging = true;
event.target.setPointerCapture(event.pointerId);

// We store the initial coordinates to be able to calculate the changes
// later on.
this.extractPositionDelta(event);
};

onMove = event => {
if (!this.isDragging) {
return;
}
const {left, top} = this.extractPositionDelta(event);

this.setState(({circleLeft, circleTop}) => ({
circleLeft: circleLeft + left,
circleTop: circleTop + top,
}));
};

onUp = event => (this.isDragging = false);
onGotCapture = event => this.setState({hasCapture: true});
onLostCapture = event => this.setState({hasCapture: false});

extractPositionDelta = event => {
const left = event.pageX;
const top = event.pageY;
const delta = {
left: left - this.previousLeft,
top: top - this.previousTop,
};
this.previousLeft = left;
this.previousTop = top;
return delta;
};

render() {
const {hasCapture, circleLeft, circleTop} = this.state;

const boxStyle = {
border: '1px solid #d9d9d9',
margin: '10px 0 20px',
minHeight: 400,
width: '100%',
position: 'relative',
};

const circleStyle = {
width: CIRCLE_SIZE,
height: CIRCLE_SIZE,
borderRadius: CIRCLE_SIZE / 2,
position: 'absolute',
left: circleLeft,
top: circleTop,
backgroundColor: hasCapture ? 'blue' : 'green',
touchAction: 'none',
};

return (
<div style={boxStyle}>
<div
style={circleStyle}
onPointerDown={this.onDown}
onPointerMove={this.onMove}
onPointerUp={this.onUp}
onPointerCancel={this.onUp}
onGotPointerCapture={this.onGotCapture}
onLostPointerCapture={this.onLostCapture}
/>
</div>
);
}
}

export default DragBox;
25 changes: 25 additions & 0 deletions fixtures/dom/src/components/fixtures/pointer-events/drag.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import TestCase from '../../TestCase';
import DragBox from './drag-box';

const React = window.React;

class Drag extends React.Component {
render() {
return (
<TestCase title="Drag" description="">
<TestCase.Steps>
<li>Drag the circle below with any pointer tool</li>
</TestCase.Steps>

<TestCase.ExpectedResult>
While dragging, the circle must have turn blue to indicate that a
pointer capture was received.
</TestCase.ExpectedResult>

<DragBox />
</TestCase>
);
}
}

export default Drag;
34 changes: 34 additions & 0 deletions fixtures/dom/src/components/fixtures/pointer-events/hover-box.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const React = window.React;

class DrawBox extends React.Component {
render() {
const boxStyle = {
border: '1px solid #d9d9d9',
margin: '10px 0 20px',
padding: '20px 20px',
touchAction: 'none',
};

const obstacleStyle = {
border: '1px solid #d9d9d9',
width: '25%',
height: '200px',
margin: '12.5%',
display: 'inline-block',
};

return (
<div
style={boxStyle}
onPointerOver={this.props.onOver}
onPointerOut={this.props.onOut}
onPointerEnter={this.props.onEnter}
onPointerLeave={this.props.onLeave}>
<div style={obstacleStyle} />
<div style={obstacleStyle} />
</div>
);
}
}

export default DrawBox;
51 changes: 51 additions & 0 deletions fixtures/dom/src/components/fixtures/pointer-events/hover.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import TestCase from '../../TestCase';
import HoverBox from './hover-box';

const React = window.React;

class Hover extends React.Component {
state = {
overs: 0,
outs: 0,
enters: 0,
leaves: 0,
};

onOver = () => this.setState({overs: this.state.overs + 1});
onOut = () => this.setState({outs: this.state.outs + 1});
onEnter = () => this.setState({enters: this.state.enters + 1});
onLeave = () => this.setState({leaves: this.state.leaves + 1});

render() {
const {overs, outs, enters, leaves} = this.state;

return (
<TestCase title="Hover" description="">
<TestCase.Steps>
<li>Hover over the above box and the obstacles</li>
</TestCase.Steps>

<TestCase.ExpectedResult>
Overs and outs should increase when moving over the obstacles but
enters and leaves should not.
</TestCase.ExpectedResult>

<HoverBox
onOver={this.onOver}
onOut={this.onOut}
onEnter={this.onEnter}
onLeave={this.onLeave}
/>

<p>
Pointer Overs: <b>{overs}</b> <br />
Pointer Outs: <b>{outs}</b> <br />
Pointer Enters: <b>{enters}</b> <br />
Pointer Leaves: <b>{leaves}</b> <br />
</p>
</TestCase>
);
}
}

export default Hover;
20 changes: 20 additions & 0 deletions fixtures/dom/src/components/fixtures/pointer-events/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import FixtureSet from '../../FixtureSet';
import Drag from './drag';
import Hover from './hover';

const React = window.React;

class PointerEvents extends React.Component {
render() {
return (
<FixtureSet
title="Pointer Events"
description="Pointer Events are not supported in every browser. The examples below might not work in every browser. To test pointer events, make sure to use Google Chrome, Firefox, Internet Explorer, or Edge.">
<Drag />
<Hover />
</FixtureSet>
);
}
}

export default PointerEvents;

0 comments on commit 5f3167d

Please sign in to comment.