1
0
mirror of https://github.com/ascribe/onion.git synced 2024-11-15 09:35:10 +01:00

add slide functionality

This commit is contained in:
Tim Daubenschütz 2015-07-02 13:56:24 +02:00
parent 4b87d21259
commit 3adcbe0f8d
2 changed files with 23 additions and 5 deletions

View File

@ -34,11 +34,25 @@ let SlidesContainer = React.createClass({
});
},
// We let every one from the outsite set the page number of the slider,
// though only if the pageNum is actually in the range of our children-list.
setPageNum(pageNum) {
if(pageNum > 0 && pageNum < React.Children.count(this.props.children)) {
this.setState({
pageNum: pageNum
});
} else {
throw new Error('You\'re calling a page number that is out of range.');
}
console.log(this.state);
},
// Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps
// Also, a key is nice to have!
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child, i) => {
return ReactAddons.addons.cloneWithProps(child, {
className: 'ascribe-slide',
style: {
width: this.state.containerWidth
},
@ -56,7 +70,7 @@ let SlidesContainer = React.createClass({
className="container ascribe-sliding-container"
style={{
width: this.state.containerWidth * React.Children.count(this.props.children),
transform: this.state.containerWidth * this.state.pageNum
transform: 'translateX(' + (-1) * this.state.containerWidth * this.state.pageNum + 'px)'
}}>
<div className="row">
{this.renderChildren()}

View File

@ -131,11 +131,15 @@ let RegisterPiece = React.createClass( {
return null;
},
changePage() {
this.refs.slidesContainer.setPageNum(1);
},
render() {
return (
<SlidesContainer>
<div className={'ascribe-slide'}>
<h3 style={{'marginTop': 0}}>Lock down title</h3>
<SlidesContainer ref="slidesContainer">
<div>
<h3 style={{'marginTop': 0}} onClick={this.changePage}>Lock down title</h3>
<Form
ref='form'
url={apiUrls.pieces_list}
@ -196,7 +200,7 @@ let RegisterPiece = React.createClass( {
<hr />
</Form>
</div>
<div className={'ascribe-slide'}>
<div>
chellas
</div>
</SlidesContainer>