Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
183 lines (157 sloc) 5.27 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic CSS Spinner Example with JSX</title>
<!-- Spinner CSS Created by Luke Haas
https://twitter.com/lukehaas
http://projects.lukehaas.me/css-loaders/
-->
<style type="text/css">
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
color: #000000;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
</style>
</head>
<body>
<h1>SAM Implementation of the Basic Spinner Example with JSX</h1>
<div id="container" style="height: 300px;">
<p>
To install React, follow the instructions on
<a href="https://github.com/facebook/react/">GitHub</a>.
</p>
<p>
If you can see this, React is <strong>not</strong> working right.
If you checked out the source from GitHub make sure to run <code>grunt</code>.
</p>
</div>
<br><br>
<h4>Example Details</h4>
<p>This is written with with React, using JSX and transformed in the browser.</p>
<p>This example has been implemented following the SAM pattern which makes the view components stateless.</p>
<p>
Learn more about SAM at
<a href="https://sam.js.org/" target="_blank">sam.js.org</a>.<br>
Learn more about React at
<a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
// modified by Jean-Jacques Dubray jdubray@xgen.io
// SAM Implementation
// Theme (View components)
var theme = { }
theme.spinner = (a) => <Spinner action={a}/>
theme.display = (m) => ReactDOM.render(
<SAMContainer model={m}/>,
document.getElementById('container')
)
var Spinner = ({action}) => (
<div id="spinner-component">
<button onClick={() => {
action({spinner: "spinner"})
document.getElementById("spinner").className = "loader"
}
}>
Start spinning!
</button>
<div id="spinner" className=""></div>
</div>
)
// App Container
// With React, we have to implement SAM in a "container" class
// model, actions and state are in the same container
var SAMContainer = React.createClass({
// Model -------------------------------------------------------
getInitialState: function() {
return this.props.model
},
present: function(data) {
if (data.spinning) {
this.setState( {spinner: data.spinner} )
}
},
// Actions -----------------------------------------------------
click: function(data) {
// spin for 5 second
setTimeout(() => {
console.log('ready to stop spinning') ;
this.present({spinning:true, spinner: data.spinner})
}, 5000);
},
// State -------------------------------------------------------
nap: function() {
// there are no automatic action in this example
},
render: function() {
// stop spinning
if (this.state.spinner !== undefined) {
document.getElementById(this.state.spinner).className = ""
}
this.nap()
return theme.spinner(this.click)
}
})
// init
theme.display({ })
</script>
</body>
</html>