PDF export

Author: kenwheeler

README.markdown

@@ -15,6 +15,18 @@ Building the dist version of the project is as easy as running `npm run build`
 
 If you want to deploy the slideshow to surge, run `npm run deploy`
 
+## PDF Export
+
+Exporting a totally sweet looking PDF from your totally sweet looking Spectacle presentation is asburdly easy.
+
+- Run `npm start`
+- Hit [http://localhost:3000/#/?export](http://localhost:3000/#/?export)
+- Bring up the print dialog `(ctrl or cmd + p)`
+- Check "Background Graphics" to on if you are about that life
+- Change destination to "Save as PDF", as shown below:
+
+![http://i.imgur.com/t6GL5Oc.png](http://i.imgur.com/t6GL5Oc.png)
+
 ## Basic Concepts
 
 ### Main file
@@ -268,7 +280,7 @@ Every component above that has `(Base)` after it has been extended from a common
 | bold | React.PropTypes.boolean | Set `fontWeight` to `bold ` |
 | caps | React.PropTypes.boolean | Set `textTransform` to `uppercase ` |
 | margin | React.PropTypes.number or string | Set `margin` value|
-| padding | React.PropTypes.number or string | Set `padding` value| 
+| padding | React.PropTypes.number or string | Set `padding` value|
 | textColor | React.PropTypes.string | Set `color` value|
 | textSize | React.PropTypes.string | Set `fontSize` value|
 | textAlign | React.PropTypes.string | Set `textAlign` value|

dist/spectacle.0.0.1.css

@@ -40,10 +40,15 @@ const Appear = React.createClass({
       this.setState({
         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) {
+          endVal = 1;
+        }
         this.tweenState('opacity', {
           easing: tweenState.easingTypes.easeInOutQuad,
           duration: 300,
-          endValue: this.state.active ? 1 : 0
+          endValue: endVal
         });
       });
     }

dist/spectacle.0.0.1.js

@@ -186,9 +186,23 @@ class Deck extends React.Component {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
     let child = this.props.children[slide];
-    return cloneWithProps(
-      child,
-      {
+    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 {
+      return cloneWithProps(child, {
         key: slide,
         slideIndex: slide,
         lastSlide: this.state.lastSlide,
@@ -199,8 +213,24 @@ class Deck extends React.Component {
           child.props.transitionDuration :
           this.props.transitionDuration
       });
+    }
   }
   render() {
+    let exportMode = false;
+
+    if (this.context.router.state.location.query &&
+        'export' in this.context.router.state.location.query) {
+      exportMode = true;
+    }
+
+    let globals = exportMode ? {
+      body: {
+        minWidth: 1100,
+        minHeight: 850,
+        overflow: 'auto'
+      }
+    } : {};
+
     let styles = {
       position: 'absolute',
       top: 0,
@@ -210,16 +240,17 @@ class Deck extends React.Component {
       perspective: 1000,
       transformStyle: 'preserve-3d'
     };
+
     return (
       <div
         className="spectacle-deck"
         style={[styles]}
         onClick={this._handleClick}
         {...this._getTouchEvents()}>
-        <TransitionGroup component="div">
+        <TransitionGroup component="div" style={{height: '100%'}}>
           {this._renderSlide()}
         </TransitionGroup>
-        <Style rules={this.context.styles.global} />
+        <Style rules={assign(this.context.styles.global, globals)} />
       </div>
     )
   }

src/appear.jsx

@@ -32,9 +32,14 @@ const Slide = React.createClass({
     window.removeEventListener('resize', this.setZoom);
   },
   render() {
+    let exportMode = false;
+    if (this.context.router.state.location.query &&
+        'export' in this.context.router.state.location.query) {
+      exportMode = true;
+    }
     let styles = {
       outer: {
-        position: 'absolute',
+        position: exportMode ? 'relative' : 'absolute',
         top: 0,
         left: 0,
         width: '100%',