Merge pull request #29 from mathieudutour/f/overview

Author: kenwheeler

README.markdown

@@ -35,6 +35,8 @@ Check it out:
 
 ![http://i.imgur.com/H7o2qHI.gif](http://i.imgur.com/H7o2qHI.gif_)
 
+You can toggle the presenter or overview mode by pressing respectively `p` and `o`.
+
 ## PDF Export
 
 Exporting a totally sweet looking PDF from your totally sweet looking Spectacle presentation is asburdly easy.

src/appear.jsx

@@ -9,7 +9,8 @@ const Appear = React.createClass({
   },
   contextTypes: {
     flux: React.PropTypes.object,
-    router: React.PropTypes.object,
+    export: React.PropTypes.bool,
+    overview: React.PropTypes.bool,
     slide: React.PropTypes.number
   },
   getInitialState() {
@@ -20,8 +21,7 @@ const Appear = React.createClass({
   },
   componentDidMount() {
     this.context.flux.stores.SlideStore.listen(this._storeChange);
-    const slide = "slide" in this.context.router.state.params ?
-      this.context.router.state.params.slide : 0;
+    const slide = this.context.slide;
     this.context.flux.actions.SlideActions.addFragment({
       slide,
       id: this._reactInternalInstance._rootNodeID,
@@ -32,8 +32,7 @@ const Appear = React.createClass({
     this.context.flux.stores.SlideStore.unlisten(this._storeChange);
   },
   _storeChange(state) {
-    const slide = "slide" in this.context.router.state.params ?
-      this.context.router.state.params.slide : 0;
+    const slide = this.context.slide;
     const key = _.findKey(state.fragments[slide], {
       "id": this._reactInternalInstance._rootNodeID
     });
@@ -42,8 +41,7 @@ const Appear = React.createClass({
         active: state.fragments[slide][key].visible
       }, () => {
         let endVal = this.state.active ? 1 : 0;
-        if (this.context.router.state.location.query &&
-            "export" in this.context.router.state.location.query) {
+        if (this.context.export || this.context.overview) {
           endVal = 1;
         }
         this.tweenState("opacity", {

src/deck.jsx

@@ -7,6 +7,8 @@ import cloneWithProps from "react/lib/cloneWithProps";
 import Radium from "radium";
 import _ from "lodash";
 import Presenter from "./presenter";
+import Export from "./export";
+import Overview from "./overview";
 
 React.initializeTouchEvents(true);
 
@@ -27,8 +29,7 @@ class Deck extends React.Component {
     };
   }
   componentDidMount() {
-    const slide = "slide" in this.context.router.state.params ?
-      parseInt(this.context.router.state.params.slide) : 0;
+    const slide = this.context.slide;
     this.setState({
       lastSlide: slide
     });
@@ -57,31 +58,50 @@ class Deck extends React.Component {
     if (event.keyCode === 39 || event.keyCode === 34) {
       this._nextSlide();
     }
+    if (event.keyCode === 79) { // o
+      this._toggleOverviewMode();
+    }
+    if (event.keyCode === 80) { // o
+      this._togglePresenterMode();
+    }
+  }
+  _toggleOverviewMode() {
+    const suffix = this.context.overview ? "" : "?overview";
+    this.context.router.replaceWith("/" + (this.context.slide) + suffix);
+  }
+  _togglePresenterMode() {
+    const suffix = this.context.presenter ? "" : "?presenter";
+    this.context.router.replaceWith("/" + (this.context.slide) + suffix);
+  }
+  _getSuffix() {
+    if (this.context.presenter) {
+      return "?presenter";
+    } else if (this.context.overview) {
+      return "?overview";
+    } else {
+      return "";
+    }
   }
   _goToSlide(e) {
     if (e.key === "spectacle-slide") {
       const data = JSON.parse(e.newValue);
-      const presenter = this.context.presenter ? "?presenter" : "";
-      const slide = "slide" in this.context.router.state.params ?
-        parseInt(this.context.router.state.params.slide) : 0;
+      const slide = this.context.slide;
       this.setState({
         lastSlide: slide || 0
       });
       if (this._checkFragments(slide, data.forward)) {
-        this.context.router.replaceWith("/" + (data.slide) + presenter);
+        this.context.router.replaceWith("/" + (data.slide) + this._getSuffix());
       }
     }
   }
   _prevSlide() {
-    const slide = "slide" in this.context.router.state.params ?
-      parseInt(this.context.router.state.params.slide) : 0;
-    const presenter = this.context.presenter ? "?presenter" : "";
+    const slide = this.context.slide;
     this.setState({
       lastSlide: slide
     });
-    if (this._checkFragments(slide, false)) {
+    if (this._checkFragments(slide, false) || this.context.overview) {
       if (slide > 0) {
-        this.context.router.replaceWith("/" + (slide - 1) + presenter);
+        this.context.router.replaceWith("/" + (slide - 1) + this._getSuffix());
         localStorage.setItem("spectacle-slide",
           JSON.stringify({slide: slide - 1, forward: false, time: Date.now()}));
       }
@@ -91,15 +111,13 @@ class Deck extends React.Component {
     }
   }
   _nextSlide() {
-    const slide = "slide" in this.context.router.state.params ?
-      parseInt(this.context.router.state.params.slide) : 0;
-    const presenter = this.context.presenter ? "?presenter" : "";
+    const slide = this.context.slide;
     this.setState({
       lastSlide: slide
     });
-    if (this._checkFragments(slide, true)) {
+    if (this._checkFragments(slide, true) || this.context.overview) {
       if (slide < this.props.children.length - 1) {
-        this.context.router.replaceWith("/" + (slide + 1) + presenter);
+        this.context.router.replaceWith("/" + (slide + 1) + this._getSuffix());
         localStorage.setItem("spectacle-slide",
           JSON.stringify({slide: slide + 1, forward: true, time: Date.now()}));
       }
@@ -235,52 +253,22 @@ class Deck extends React.Component {
     return 0;
   }
   _renderSlide() {
-    const slide = "slide" in this.context.router.state.params ?
-      parseInt(this.context.router.state.params.slide) : 0;
-    if (this.context.router.state.location.query &&
-        "export" in this.context.router.state.location.query) {
-      return this.props.children.map((child, index) => {
-        return cloneWithProps(child, {
-          key: index,
-          slideIndex: slide,
-          lastSlide: this.state.lastSlide,
-          transition: child.props.transition.length ?
-            child.props.transition :
-            this.props.transition,
-          transitionDuration: child.props.transition.transitionDuration ?
-            child.props.transitionDuration :
-            this.props.transitionDuration
-        });
-      });
-    } else {
-      const child = this.props.children[slide];
-      return cloneWithProps(child, {
-        key: slide,
-        slideIndex: slide,
-        lastSlide: this.state.lastSlide,
-        transition: child.props.transition.length ?
-          child.props.transition :
-          this.props.transition,
-        transitionDuration: child.props.transition.transitionDuration ?
-          child.props.transitionDuration :
-          this.props.transitionDuration
-      });
-    }
+    const slide = this.context.slide;
+    const child = this.props.children[slide];
+    return cloneWithProps(child, {
+      key: slide,
+      slideIndex: slide,
+      lastSlide: this.state.lastSlide,
+      transition: child.props.transition.length ?
+        child.props.transition :
+        this.props.transition,
+      transitionDuration: child.props.transition.transitionDuration ?
+        child.props.transitionDuration :
+        this.props.transitionDuration
+    });
   }
   render() {
-    let exportMode = false;
-    let showProgress = true;
-
-    if (this.context.router.state.location.query &&
-        "export" in this.context.router.state.location.query) {
-      exportMode = true;
-      showProgress = false;
-    }
-
-    const slide = "slide" in this.context.router.state.params ?
-      parseInt(this.context.router.state.params.slide) : 0;
-
-    const globals = exportMode ? {
+    const globals = this.context.export ? {
       body: {
         minWidth: 1100,
         minHeight: 850,
@@ -290,7 +278,7 @@ class Deck extends React.Component {
 
     const styles = {
       deck: {
-        backgroundColor: this.context.presenter ? "black" : "",
+        backgroundColor: this.context.presenter || this.context.overview ? "black" : "",
         position: "absolute",
         top: 0,
         left: 0,
@@ -305,26 +293,30 @@ class Deck extends React.Component {
       }
     };
 
-    const currentSlide = "slide" in this.context.router.state.params ?
-      parseInt(this.context.router.state.params.slide) : 0;
-    const slides = this.props.children;
+    let componentToRender;
+    if (this.context.presenter) {
+      componentToRender = (<Presenter slides={this.props.children}
+        slide={this.context.slide} lastSlide={this.state.lastSlide} />);
+    } else if (this.context.export) {
+      componentToRender = <Export slides={this.props.children} />;
+    } else if (this.context.overview) {
+      componentToRender = <Overview slides={this.props.children} slide={this.context.slide} />;
+    } else {
+      componentToRender = (<TransitionGroup component="div" style={[styles.transition]}>
+                            {this._renderSlide()}
+                          </TransitionGroup>);
+    }
 
     return (
       <div
         className="spectacle-deck"
         style={[styles.deck]}
         onClick={this._handleClick}
         {...this._getTouchEvents()}>
-        {this.context.presenter ?
-          <Presenter slides={this.props.children}
-            slide={slide} lastSlide={this.state.lastSlide}/> :
-          <TransitionGroup
-            component="div"
-            className="spectacle-transition"
-            style={[styles.transition]}>
-            {this._renderSlide()}
-          </TransitionGroup>}
-        {showProgress ? <Progress items={slides} currentSlide={currentSlide}
+        {componentToRender}
+        {!this.context.export ? <Progress
+          items={this.props.children}
+          currentSlide={this.context.slide}
           type={this.props.progress}/> : ""}
         <Style rules={assign(this.context.styles.global, globals)} />
       </div>
@@ -350,7 +342,10 @@ Deck.contextTypes = {
   styles: React.PropTypes.object,
   router: React.PropTypes.object,
   flux: React.PropTypes.object,
-  presenter: React.PropTypes.bool
+  presenter: React.PropTypes.bool,
+  export: React.PropTypes.bool,
+  overview: React.PropTypes.bool,
+  slide: React.PropTypes.number
 };
 
 export default Deck;

src/export.jsx

@@ -0,0 +1,43 @@
+import React from "react/addons";
+import cloneWithProps from "react/lib/cloneWithProps";
+import Radium from "radium";
+
+@Radium
+class Export extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  _renderSlides() {
+    return this.props.slides.map((child, index) => {
+      return cloneWithProps(child, {
+        key: index,
+        slideIndex: index,
+        transition: [],
+        transitionDuration: 0
+      });
+    });
+  }
+  render() {
+    const styles = {
+      export: {
+        height: "100%",
+        width: "100%"
+      }
+    };
+    return (
+      <div className="spectacle-export" style={[styles.export]}>
+        {this._renderSlides()}
+      </div>
+    );
+  }
+}
+
+Export.propTypes = {
+  slides: React.PropTypes.array
+};
+
+Export.contextTypes = {
+  styles: React.PropTypes.object
+};
+
+export default Export;

src/overview.jsx

@@ -0,0 +1,66 @@
+/*global setInterval*/
+
+import React from "react/addons";
+import cloneWithProps from "react/lib/cloneWithProps";
+import Base from "./base";
+import Radium from "radium";
+
+@Radium
+class Overview extends Base {
+  constructor(props) {
+    super(props);
+  }
+  _renderSlides() {
+    const slide = this.props.slide;
+    return this.props.slides.map((child, index) => {
+      if (index < slide - 3 || slide + 3 < index) { return false; }
+      const left = (50 + 16.6667 * (index - slide)) + "%";
+      const style = {
+        position: "absolute",
+        width: "15%",
+        height: "15%",
+        top: "50%",
+        left,
+        transform: " translate(-50%,-50%)",
+        border: "1px solid #FFF",
+        opacity: index === slide ? 1 : 0.5
+      };
+      const el = cloneWithProps(child, {
+        key: index,
+        slideIndex: index,
+        transition: [],
+        transitionDuration: 0,
+        appearOff: true
+      });
+      return (
+        <div style={[style]}>
+          {el}
+        </div>
+      );
+    });
+  }
+  render() {
+    const styles = {
+      overview: {
+        height: "100%",
+        width: "100%"
+      }
+    };
+    return (
+      <div className="spectacle-overview" style={[styles.overview]}>
+        {this._renderSlides()}
+      </div>
+    );
+  }
+}
+
+Overview.propTypes = {
+  slides: React.PropTypes.array,
+  slide: React.PropTypes.number
+};
+
+Overview.contextTypes = {
+  styles: React.PropTypes.object
+};
+
+export default Overview;