ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

couple slides container to url state

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-02 14:42:04 +02:00
parent 3adcbe0f8d
commit cb996566c7
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/components/ascribe_slides_container/slides_container.js
View File

@ -1,17 +1,33 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import Router from 'react-router';
import ReactAddons from 'react/addons'; import ReactAddons from 'react/addons';
let State = Router.State;
let Navigation = Router.Navigation;
let SlidesContainer = React.createClass({ let SlidesContainer = React.createClass({
propTypes: { propTypes: {
children: React.PropTypes.arrayOf(React.PropTypes.element) children: React.PropTypes.arrayOf(React.PropTypes.element)
}, },
mixins: [State, Navigation],
getInitialState() { getInitialState() {
// handle queryParameters
let queryParams = this.getQuery();
let slideNum = 0;
if(queryParams && 'slide_num' in queryParams) {
slideNum = parseInt(queryParams.slide_num, 10);
} else {
console.warn('slide_num was\'t included as a queryParam. Defaulting to slide_num = 0');
}
return { return {
containerWidth: 0, containerWidth: 0,
pageNum: 0 slideNum: slideNum
}; };
}, },
@ -35,16 +51,18 @@ let SlidesContainer = React.createClass({
}, },
// We let every one from the outsite set the page number of the slider, // 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. // though only if the slideNum is actually in the range of our children-list.
setPageNum(pageNum) { setSlideNum(slideNum) {
if(pageNum > 0 && pageNum < React.Children.count(this.props.children)) { if(slideNum > 0 && slideNum < React.Children.count(this.props.children)) {
this.transitionTo(this.getPathname(), null, {slide_num: slideNum});
this.setState({ this.setState({
pageNum: pageNum slideNum: slideNum
}); });
} else { } else {
throw new Error('You\'re calling a page number that is out of range.'); 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 // Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps
@ -70,7 +88,7 @@ let SlidesContainer = React.createClass({
className="container ascribe-sliding-container" className="container ascribe-sliding-container"
style={{ style={{
width: this.state.containerWidth * React.Children.count(this.props.children), width: this.state.containerWidth * React.Children.count(this.props.children),
transform: 'translateX(' + (-1) * this.state.containerWidth * this.state.pageNum + 'px)' transform: 'translateX(' + (-1) * this.state.containerWidth * this.state.slideNum + 'px)'
}}> }}>
<div className="row"> <div className="row">
{this.renderChildren()} {this.renderChildren()}

2
js/components/register_piece.js
View File

@ -132,7 +132,7 @@ let RegisterPiece = React.createClass( {
}, },
changePage() { changePage() {
this.refs.slidesContainer.setPageNum(1); this.refs.slidesContainer.setSlideNum(1);
}, },
render() { render() {