Skip to content

Commit 692aa2c

Browse files
cezarycezary
committed
update demo
1 parent a3704ce commit 692aa2c

File tree

1 file changed

+100
-98
lines changed

1 file changed

+100
-98
lines changed

‎index.html

+100-98
Original file line numberDiff line numberDiff line change
@@ -25,114 +25,116 @@
2525
</style>
2626
</head>
2727
<body>
28-
<script src="//fb.me/react-with-addons-0.13.3.js"></script>
29-
<script src="//fb.me/JSXTransformer-0.13.3.js"></script>
30-
<script src="dist/react-image-diff.js"></script>
31-
<script type="text/jsx">
32-
var imageSets = {
33-
aralSea: {
34-
before: './public/img/aralSea-1970.jpg',
35-
after: './public/img/aralSea-2014.jpg',
36-
height: 281,
37-
width: 500
38-
},
39-
background: {
40-
before: './public/img/background-0.png',
41-
after: './public/img/background-1.png'
42-
},
43-
monocle: {
44-
before: './public/img/monocle-0.jpg',
45-
after: './public/img/monocle-1.jpg'
46-
},
47-
'spotTheDifference': {
48-
before: './public/img/spot-the-difference-a.jpg',
49-
after: './public/img/spot-the-difference-b.jpg'
50-
},
51-
'spotTheDifference2': {
52-
before: './public/img/spot-the-difference-2a.jpg',
53-
after: './public/img/spot-the-difference-2b.jpg'
54-
},
55-
yellowstone: {
56-
before: './public/img/yellowstone-1988.jpg',
57-
after: './public/img/yellowstone-1990.jpg',
58-
height: 500,
59-
width: 500
60-
}
61-
};
28+
<div id="root"></div>
29+
<script src="//fb.me/react-with-addons-0.14.7.js"></script>
30+
<script src="//fb.me/react-dom-0.14.7.js"></script>
31+
<script src="//npmcdn.com/[email protected]/dist/btib.min.js"></script>
32+
<script src="dist/react-image-diff.js"></script>
33+
<script type="text/es2015">
34+
var imageSets = {
35+
aralSea: {
36+
before: './public/img/aralSea-1970.jpg',
37+
after: './public/img/aralSea-2014.jpg',
38+
height: 281,
39+
width: 500
40+
},
41+
background: {
42+
before: './public/img/background-0.png',
43+
after: './public/img/background-1.png'
44+
},
45+
monocle: {
46+
before: './public/img/monocle-0.jpg',
47+
after: './public/img/monocle-1.jpg'
48+
},
49+
'spotTheDifference': {
50+
before: './public/img/spot-the-difference-a.jpg',
51+
after: './public/img/spot-the-difference-b.jpg'
52+
},
53+
'spotTheDifference2': {
54+
before: './public/img/spot-the-difference-2a.jpg',
55+
after: './public/img/spot-the-difference-2b.jpg'
56+
},
57+
yellowstone: {
58+
before: './public/img/yellowstone-1988.jpg',
59+
after: './public/img/yellowstone-1990.jpg',
60+
height: 500,
61+
width: 500
62+
}
63+
};
6264

63-
var App = React.createClass({
64-
getInitialState: function() {
65-
return {
66-
images: 'monocle',
67-
type: 'fade',
68-
value: .5
69-
};
70-
},
65+
var App = React.createClass({
66+
getInitialState: function() {
67+
return {
68+
images: 'monocle',
69+
type: 'fade',
70+
value: .5
71+
};
72+
},
7173

72-
handleImageSelect: function(e) {
73-
this.setState({images: e.target.value});
74-
},
74+
handleImageSelect: function(e) {
75+
this.setState({images: e.target.value});
76+
},
7577

76-
handleInputChange: function(e) {
77-
this.setState({
78-
value: parseFloat(e.target.value)
79-
});
80-
},
78+
handleInputChange: function(e) {
79+
this.setState({
80+
value: parseFloat(e.target.value)
81+
});
82+
},
8183

82-
handleRadioChange: function(e) {
83-
this.setState({type: e.target.value});
84-
},
84+
handleRadioChange: function(e) {
85+
this.setState({type: e.target.value});
86+
},
8587

86-
render: function () {
87-
var images = imageSets[this.state.images];
88+
render: function () {
89+
var images = imageSets[this.state.images];
8890

89-
return (
90-
<div>
91-
<h1>react-image-diff</h1>
92-
<select onChange={this.handleImageSelect}>
93-
<option value='monocle'>Monocle</option>
94-
<option value='background'>Background</option>
95-
<option value='aralSea'>Aral Sea 1970-2014</option>
96-
<option value='spotTheDifference'>Spot the Difference 1</option>
97-
<option value='spotTheDifference2'>Spot the Difference 2</option>
98-
<option value='yellowstone'>Yellowstone Fire 1988</option>
99-
</select>
91+
return (
10092
<div>
101-
<ImageDiff
102-
{...images}
103-
type={this.state.type}
104-
value={this.state.value}
93+
<h1>react-image-diff</h1>
94+
<select onChange={this.handleImageSelect}>
95+
<option value='monocle'>Monocle</option>
96+
<option value='background'>Background</option>
97+
<option value='aralSea'>Aral Sea 1970-2014</option>
98+
<option value='spotTheDifference'>Spot the Difference 1</option>
99+
<option value='spotTheDifference2'>Spot the Difference 2</option>
100+
<option value='yellowstone'>Yellowstone Fire 1988</option>
101+
</select>
102+
<div>
103+
<ImageDiff
104+
{...images}
105+
type={this.state.type}
106+
value={this.state.value}
107+
/>
108+
</div>
109+
<input
110+
type='range'
111+
defaultValue={this.state.value}
112+
min={0}
113+
max={1}
114+
step={.01}
115+
onChange={this.handleInputChange}
116+
disabled={this.state.type === 'difference' ? true : false}
105117
/>
118+
<br/>
119+
<label>
120+
<input name='type' type='radio' value='swipe' onChange={this.handleRadioChange} />
121+
swipe
122+
</label>
123+
<label>
124+
<input name='type' type='radio' value='fade' onChange={this.handleRadioChange} defaultChecked />
125+
fade
126+
</label>
127+
<label>
128+
<input name='type' type='radio' value='difference' onChange={this.handleRadioChange} />
129+
difference
130+
</label>
106131
</div>
107-
<input
108-
type='range'
109-
defaultValue={this.state.value}
110-
min={0}
111-
max={1}
112-
step={.01}
113-
onChange={this.handleInputChange}
114-
disabled={this.state.type === 'difference' ? true : false}
115-
/>
116-
<br/>
117-
<label>
118-
<input name='type' type='radio' value='swipe' onChange={this.handleRadioChange} />
119-
swipe
120-
</label>
121-
<label>
122-
<input name='type' type='radio' value='fade' onChange={this.handleRadioChange} defaultChecked />
123-
fade
124-
</label>
125-
<label>
126-
<input name='type' type='radio' value='difference' onChange={this.handleRadioChange} />
127-
difference
128-
</label>
129-
</div>
130-
);
131-
}
132-
});
132+
);
133+
}
134+
});
133135

134-
React.render(<App/>, document.body);
135-
</script>
136+
ReactDOM.render(<App/>, document.getElementById('root'));
137+
</script>
136138
</body>
137139
</html>
138140

0 commit comments

Comments
 (0)