merge master

Author: mathieudutour

README.markdown

@@ -181,6 +181,7 @@ The deck tag is the top level tag and there should only be one of them. It suppo
 |---|---|---|
 |transition|React.PropTypes.array|Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets global slide transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.**|
 |transitionDuration| React.PropTypes.number| Accepts integer value in milliseconds for global transition duration.
+|progress| React.PropTypes.string|Accepts `pacman`, `bar`, `number` or `none`.
 
 ####\<Slide /> (Base)
 
@@ -191,6 +192,7 @@ The slide tag represents each slide in the presentation. It supports the followi
 |align| React.PropTypes.string | Accepts a space delimited value for positioning interior content. The first value can be `flex-start` (left), `center` (middle), or `flex-end` (bottom). The second value can be `flex-start` (top) , `center` (middle), or `flex-end` (bottom). You would provide this prop like `align="center middle"`, which is it's default.
 |transition|React.PropTypes.array|Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets the slide transition. **Note: If you use the 'scale' transition, fitted text won't work in Safari.**|
 |transitionDuration| React.PropTypes.number| Accepts integer value in milliseconds for slide transition duration.
+|notes| React.PropTypes.stings| Text which will appear in the presenter mode. Can be HTML.
 
 ###Layout Tags
 

presentation/deck.jsx

@@ -36,13 +36,13 @@ export default class extends React.Component {
           </Link>
           <Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
         </Slide>
-        <Slide transition={["slide"]} bgColor="black">
-          <Image src={images.kat.replace("/", "")} margin="0px auto 40px" height="293px"/>
+        <Slide transition={['slide']} bgColor="black" notes="You can even put notes on your slide. How awesome is that?">
+          <Image src={images.kat.replace('/','')} margin="0px auto 40px" height="293px"/>
           <Heading size={1} fit textColor="primary" textFont="secondary">
             Wait what?
           </Heading>
         </Slide>
-        <Slide transition={["zoom", "fade"]} bgColor="primary">
+        <Slide transition={['zoom', 'fade']} bgColor="primary" notes="<ul><li>talk about that</li><li>and that</li></ul>">
           <CodePane
             lang="javascript"
             source={require("raw!./deck.example")}

src/appear.jsx

@@ -57,7 +57,7 @@ const Appear = React.createClass({
       opacity: this.getTweeningValue("opacity")
     };
     return (
-      <div style={styles} className="appear">
+      <div style={styles} className="fragment">
         {this.props.children}
       </div>
     );

src/base.jsx

@@ -52,11 +52,16 @@ const getStyles = function getStyles() {
     styles.backgroundColor = color;
   }
   if (this.props.bgImage) {
-    styles.backgroundImage =
+    if (this.props.bgDarken) {
+      styles.backgroundImage =
       "linear-gradient( rgba(0, 0, 0, " + this.props.bgDarken +
         "), rgba(0, 0, 0, " + this.props.bgDarken +
         ") ), url(" + this.props.bgImage + ")";
+    } else {
+      styles.backgroundImage = "url(" + this.props.bgImage + ")";
+    }
     styles.backgroundSize = "cover";
+    styles.backgroundPosition = "center center";
   }
   return styles;
 };

src/deck.jsx

@@ -6,7 +6,6 @@ import assign from "object-assign";
 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";
@@ -15,6 +14,7 @@ React.initializeTouchEvents(true);
 
 const Style = Radium.Style;
 
+import Progress from "./progress";
 const TransitionGroup = Radium(React.addons.TransitionGroup);
 
 @Radium
@@ -50,10 +50,12 @@ class Deck extends React.Component {
   }
   _handleKeyPress(e) {
     const event = window.event ? window.event : e;
-    if (event.keyCode === 37) { // left arrow
+    // left, page down
+    if (event.keyCode === 37 || event.keyCode === 33) {
       this._prevSlide();
     }
-    if (event.keyCode === 39) { // right arrow
+    // right, page up
+    if (event.keyCode === 39 || event.keyCode === 34) {
       this._nextSlide();
     }
     if (event.keyCode === 79) { // o
@@ -131,7 +133,7 @@ class Deck extends React.Component {
     if (this.context.presenter || this.context.overview) {
       const main = document.querySelector(".spectacle-presenter-main");
       if (main) {
-        const frags = main.querySelectorAll(".appear");
+        const frags = main.querySelectorAll(".fragment");
         if (!frags.length) {
           return true;
         }
@@ -281,13 +283,13 @@ class Deck extends React.Component {
         top: 0,
         left: 0,
         width: "100%",
-        height: "100%",
-        perspective: 1000,
-        transformStyle: "preserve-3d"
+        height: "100%"
       },
       transition: {
         height: "100%",
-        width: "100%"
+        width: "100%",
+        perspective: 1000,
+        transformStyle: "flat"
       }
     };
 
@@ -312,6 +314,10 @@ class Deck extends React.Component {
         onClick={this._handleClick}
         {...this._getTouchEvents()}>
         {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>
     );
@@ -321,13 +327,15 @@ class Deck extends React.Component {
 Deck.displayName = "Deck";
 
 Deck.defaultProps = {
-  transitionDuration: 500
+  transitionDuration: 500,
+  progress: "pacman"
 };
 
 Deck.propTypes = {
   children: React.PropTypes.node,
   transition: React.PropTypes.array,
-  transitionDuration: React.PropTypes.number
+  transitionDuration: React.PropTypes.number,
+  progress: React.PropTypes.oneOf(["pacman", "bar", "number", "none"])
 };
 
 Deck.contextTypes = {

src/presenter.jsx

@@ -1,4 +1,4 @@
-/*global setInterval*/
+/*global setInterval clearInterval*/
 
 import React from "react/addons";
 import cloneWithProps from "react/lib/cloneWithProps";
@@ -41,12 +41,15 @@ class Presenter extends Base {
     });
   }
   componentDidMount() {
-    setInterval(()=> {
+    this.time = setInterval(()=> {
       this.setState({
         time: startTime(new Date())
       });
     }, 1000);
   }
+  componentWillUnmount() {
+    clearInterval(this.time);
+  }
   _renderNextSlide() {
     const presenterStyle = {
       position: "relative"
@@ -69,6 +72,11 @@ class Presenter extends Base {
       appearOff: true
     }) : <h1 style={[endStyle]}>END</h1>;
   }
+  _renderNotes() {
+    const child = this.props.slides[this.props.slide];
+    if (!child.props.notes) { return false; }
+    return <div dangerouslySetInnerHTML={{__html: child.props.notes}} />;
+  }
   render() {
     const styles = {
       presenter: {
@@ -133,6 +141,18 @@ class Presenter extends Base {
         margin: 20,
         position: "relative",
         color: "white"
+      },
+      notes: {
+        position: "absolute",
+        display: "block",
+        color: "white",
+        width: "100%",
+        height: "20%",
+        bottom: "0px",
+        textAlign: "left",
+        padding: "20px 50px",
+        columnCount: "2",
+        fontSize: "0.8em"
       }
     };
     return (
@@ -151,6 +171,9 @@ class Presenter extends Base {
             {this._renderNextSlide()}
           </div>
         </div>
+        <div className="spectacle-presenter-notes" style={[styles.notes]}>
+          {this._renderNotes()}
+        </div>
       </div>
     );
   }

src/progress.jsx

@@ -0,0 +1,112 @@
+import React from "react/addons";
+import Base from "./base";
+import Radium from "radium";
+
+const animations = {
+  pacmanTopFrames: Radium.keyframes({
+    "0%": {transform: "rotateZ(0deg)"},
+    "100%": {transform: "rotateZ(-30deg)"}
+  }),
+  pacmanBottomFrames: Radium.keyframes({
+    "0%": {transform: "rotateZ(0deg)"},
+    "100%": {transform: "rotateZ(30deg)"}
+  }),
+  pacmanTopFramesBis: Radium.keyframes({
+    "0%": {transform: "rotateZ(0deg)"},
+    "100%": {transform: "rotateZ(-30deg)"}
+  }),
+  pacmanBottomFramesBis: Radium.keyframes({
+    "0%": {transform: "rotateZ(0deg)"},
+    "100%": {transform: "rotateZ(30deg)"}
+  })
+};
+
+@Radium
+class Progress extends Base {
+  render() {
+    let style = this.context.styles.progress;
+    let markup;
+    switch (this.props.type) {
+      case "none":
+        return false;
+      case "pacman":
+        style = style.pacman;
+        markup = (
+          <div>
+            <div style={[style.pacman, this.getPointPosition(this.props.currentSlide)]} >
+              <div style={[style.pacmanTop, this.getPacmanStyle("Top")]} />
+              <div style={[style.pacmanBottom, this.getPacmanStyle("Bottom")]} />
+            </div>
+            {this.props.items.map((item, i) => {
+              return (<div style={[style.point, this.getPointStyle(i)]}
+                        key={"presentation-progress-" + i} />);
+            })}
+          </div>
+        );
+        break;
+      case "number":
+        style = style.number;
+        markup = (
+          <div>{this.props.currentSlide + 1} / {this.props.items.length}</div>
+        );
+        break;
+      case "bar":
+        style = style.bar;
+        markup = (
+          <div style={[style.bar, this.getWidth()]} />
+        );
+        break;
+      default:
+        return false;
+    }
+    return (
+      <div style={[this.getStyles()]}>
+        <div style={[style.container]}>
+          {markup}
+        </div>
+      </div>
+    );
+  }
+
+  getWidth() {
+    return {
+      width: (100 * this.props.currentSlide / (this.props.items.length - 1)) + "%"
+    };
+  }
+
+  getPacmanStyle(side) {
+    const animationName = "pacman" + side + "Frames" + (this.props.currentSlide % 2 ? "" : "Bis");
+    return {
+      animation: animations[animationName] + " 0.12s linear 10 alternate both"
+    };
+  }
+
+  getPointPosition(i) {
+    return {
+      top: "-20px",
+      left: (5 + 20 * (i - this.props.items.length / 2)) + "px"
+    };
+  }
+
+  getPointStyle(i) {
+    const style = this.getPointPosition(i);
+    if (this.props.currentSlide >= i) {
+      style.opacity = 0;
+    }
+
+    return style;
+  }
+
+}
+
+Progress.propTypes = {
+  items: React.PropTypes.array,
+  currentSlide: React.PropTypes.number,
+  type: React.PropTypes.oneOf(["pacman", "bar", "number", "none"])
+};
+
+Progress.contextTypes = {
+  styles: React.PropTypes.object
+};
+
+export default Progress;

src/slide.jsx

@@ -19,7 +19,8 @@ const Slide = React.createClass({
   propTypes: {
     align: React.PropTypes.string,
     presenterStyle: React.PropTypes.object,
-    children: React.PropTypes.node
+    children: React.PropTypes.node,
+    notes: React.PropTypes.string
   },
   contextTypes: {
     styles: React.PropTypes.object,

src/transitions.jsx

@@ -169,7 +169,7 @@ export default {
   getTransitionStyles() {
     let transformValue = "";
     let styles = {
-      zIndex: this.state.z || ""
+      zIndex: this.state.z
     };
     if (this.props.transition.indexOf("fade") !== -1) {
       styles = assign(styles, {
@@ -181,6 +181,8 @@ export default {
     }
     if (this.props.transition.indexOf("slide") !== -1) {
       transformValue += " translate3d(" + this.getTweeningValue("left") + "%, 0, 0)";
+    } else {
+      transformValue += " translate3d(0px, 0px, 0px)";
     }
     if (this.props.transition.indexOf("spin") !== -1) {
       transformValue += " rotateY(" + this.getTweeningValue("x") + "deg)";

themes/default/index.css

@@ -1,15 +1,12 @@
 .spectacle-slide {
   -webkit-transform-origin: center center;
           transform-origin: center center;
-
-  -webkit-transform-style: preserve-3d;
-          transform-style: preserve-3d;
 }
 
 /* Firefox */
 
 _:-moz-tree-row(hover), .spectacle-deck {
-  transform: perspective(1000px);
+  perspective: 1000px;
 }
 
 _:-moz-tree-row(hover), ul .appear {