-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
executable file
·86 lines (82 loc) · 2.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html>
<head>
<title>react-pacman-progress example (without JSX)</title>
<link rel="stylesheet" href="../react-pacman-progress.css">
<style>
* {
margin: 0;
padding: 0;
border: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body, #pacman-progress, .container, .slide {
height: 100%;
}
.container {
width: 100%;
overflow: hidden;
}
.slide {
width: 100%;
position: absolute;
transition: all 0.3s ease-out;
color: #FFF;
font-family: sans-serif;
text-align: center;
padding-top: 30%;
font-size: 3em;
}
</style>
</head>
<body>
<div id="pacman-progress"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.min.js"></script>
<script src="../react-pacman-progress.js"></script>
<script>
var SliderContainer = React.createClass({
displayName: "SliderContainer",
getInitialState: function() {
return {currentIndex: 0};
},
render: function() {
var slides = [
{color: '#37BFB7'},
{color: '#F48B7E'},
{color: '#94CC70'}
]
return (
React.createElement("div", {className:"container", onClick:this.handleClick},
slides.map(function(slide, i) {
return React.createElement(Slide, {index: i, currentIndex: this.state.currentIndex, color: slide.color});
}.bind(this)),
React.createElement(PacmanProgress, {items: slides.length, currentIndex: this.state.currentIndex, onClick: this.handleClickPacman})
)
);
},
handleClick: function(e) {
if (!e.defaultPrevented) {
this.setState({currentIndex: this.state.currentIndex + 1});
}
},
handleClickPacman: function(index, isPacman, e) {
e.preventDefault();
this.setState({currentIndex: index});
}
});
var Slide = React.createClass({
displayName: "Slide",
render: function() {
return (
React.createElement("div", {className:"slide", style:{
backgroundColor: this.props.color,
transform: "translate(" + (this.props.index - this.props.currentIndex) * 100 + "%, 0)"
}},"Click")
);
}
});
React.render(React.createElement(SliderContainer, null), document.getElementById("pacman-progress"));
</script>
</body>
</html>