From cb996566c7c53d21a8ebc983e92f81cf0d31d439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 2 Jul 2015 14:42:04 +0200
Subject: [PATCH] couple slides container to url state

---
 .../slides_container.js                       | 32 +++++++++++++++----
 js/components/register_piece.js               |  2 +-
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js
index fd67fef6..363d94ce 100644
--- a/js/components/ascribe_slides_container/slides_container.js
+++ b/js/components/ascribe_slides_container/slides_container.js
@@ -1,17 +1,33 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
 import ReactAddons from 'react/addons';
 
+let State = Router.State;
+let Navigation = Router.Navigation;
+
 let SlidesContainer = React.createClass({
     propTypes: {
         children: React.PropTypes.arrayOf(React.PropTypes.element)
     },
 
+    mixins: [State, Navigation],
+
     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 {
             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,
-    // 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)) {
+    // though only if the slideNum is actually in the range of our children-list.
+    setSlideNum(slideNum) {
+        if(slideNum > 0 && slideNum < React.Children.count(this.props.children)) {
+
+            this.transitionTo(this.getPathname(), null, {slide_num: slideNum});
             this.setState({
-                pageNum: pageNum
+                slideNum: slideNum
             });
+
         } 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
@@ -70,7 +88,7 @@ let SlidesContainer = React.createClass({
                     className="container ascribe-sliding-container"
                     style={{
                         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">
                             {this.renderChildren()}
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index d43c2063..b7d5aca4 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -132,7 +132,7 @@ let RegisterPiece = React.createClass( {
     },
 
     changePage() {
-        this.refs.slidesContainer.setPageNum(1);
+        this.refs.slidesContainer.setSlideNum(1);
     },
 
     render() {