Skip to content

Commit

Permalink
Printer mode
Browse files Browse the repository at this point in the history
  • Loading branch information
kenwheeler committed Jul 2, 2015
1 parent 520eeab commit 9e75539
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 12 deletions.
2 changes: 2 additions & 0 deletions README.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ Exporting a totally sweet looking PDF from your totally sweet looking Spectacle

![http://i.imgur.com/t6GL5Oc.png](http://i.imgur.com/t6GL5Oc.png)

If you want to print your slides, and want a printer friendly version, simply repeat the above process but instead print from [http://localhost:3000/#/?export&print](http://localhost:3000/#/?export&print)

## Basic Concepts

### Main file
Expand Down
2 changes: 1 addition & 1 deletion index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Presentation.contextTypes = {
router: React.PropTypes.object
}

Presentation = Context(Presentation, {styles: config.theme, flux: flux});
Presentation = Context(Presentation, {styles: config.theme, print: config.print, flux: flux});

React.render(
<Router history={new HashHistory}>
Expand Down
1 change: 1 addition & 0 deletions presentation/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ module.exports = {
width: 1000,
margin: 40,
theme: require('../themes/default/index'),
print: require('../themes/default/print'),
html: require('../themes/default/html')
}
16 changes: 8 additions & 8 deletions presentation/deck.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default class extends React.Component {
<Heading size={2} fit caps textColor="black">
Where You Can Write Your Decks In JSX
</Heading>
<Link href="https://github.com/FormidableLabs/spectacle"><Text bold caps textColor="white">View on Github</Text></Link>
<Link href="https://github.com/FormidableLabs/spectacle"><Text bold caps textColor="tertiary">View on Github</Text></Link>
<Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
</Slide>
<Slide transition={['slide']} bgColor="black">
Expand Down Expand Up @@ -67,12 +67,12 @@ export default class extends React.Component {
<Heading caps fit>Flexible Layouts</Heading>
<Layout>
<Fill>
<Heading size={4} caps textColor="black" bgColor="white" margin={10}>
<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
Left
</Heading>
</Fill>
<Fill>
<Heading size={4} caps textColor="black" bgColor="white" margin={10}>
<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
Right
</Heading>
</Fill>
Expand All @@ -85,14 +85,14 @@ export default class extends React.Component {
</BlockQuote>
</Slide>
<Slide transition={['slide', 'spin']} bgColor="primary">
<Heading caps fit size={1} textColor="white">
<Heading caps fit size={1} textColor="tertiary">
Smooth
</Heading>
<Heading caps fit size={1} textColor="black">
<Heading caps fit size={1} textColor="secondary">
Combinable Transitions
</Heading>
</Slide>
<Slide transition={['fade']} bgColor="black" textColor="primary" align="center middle">
<Slide transition={['fade']} bgColor="secondary" textColor="primary" align="center middle">
<List>
<ListItem><Appear>Inline style based theme system</Appear></ListItem>
<ListItem><Appear>Autofit text</Appear></ListItem>
Expand All @@ -103,12 +103,12 @@ export default class extends React.Component {
</List>
</Slide>
<Slide transition={['slide']} bgColor="primary">
<Heading size={1} caps fit textColor="white">
<Heading size={1} caps fit textColor="tertiary">
Your presentations are interactive
</Heading>
<Interactive/>
</Slide>
<Slide transition={['spin','slide']} bgColor="white">
<Slide transition={['spin','slide']} bgColor="tertiary">
<Heading size={1} caps fit textColor="primary">
Made with love in Seattle by
</Heading>
Expand Down
10 changes: 9 additions & 1 deletion src/slide.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,18 @@ const Slide = React.createClass({
},
render() {
let exportMode = false;
let printMode = false;
if (this.context.router.state.location.query &&
'export' in this.context.router.state.location.query) {
exportMode = true;
if ('print' in this.context.router.state.location.query) {
printMode = true;
}
}
let printStyles = printMode ? {
backgroundColor: 'white',
backgroundImage: 'none'
} : {};
let styles = {
outer: {
position: exportMode ? 'relative' : 'absolute',
Expand All @@ -60,7 +68,7 @@ const Slide = React.createClass({
};
return (
<div className="spectacle-slide"
style={[styles.outer, this.getStyles(), this.getTransitionStyles()]}>
style={[styles.outer, this.getStyles(), this.getTransitionStyles(), printStyles]}>
<div style={[styles.inner]}>
<div ref="content"
style={[styles.content, this.context.styles.components.content]}>
Expand Down
11 changes: 10 additions & 1 deletion src/utils/context.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,16 @@ function context(Component, params) {
},

getChildContext() {
return params;
let styles = {};
if (this.props.location.query && 'print' in this.props.location.query) {
styles = params.print;
} else {
styles = params.styles;
}
return {
styles: styles,
flux: params.flux
};
},

render: function render() {
Expand Down
2 changes: 1 addition & 1 deletion themes/default/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ module.exports = {
display: 'inline-block'
},
quote: {
borderLeft: '1px solid #f9c300',
borderLeft: '1px solid ' + colors.primary,
paddingLeft: 40,
display: 'block',
color: colors.primary,
Expand Down
156 changes: 156 additions & 0 deletions themes/default/print.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
var colors = {
primary: 'black',
secondary: 'black',
tertiary: 'black'
};

var fonts = {
primary: 'Open Sans Condensed',
secondary: 'Lobster Two',
tertiary: 'monospace'
}

module.exports = {
colors: colors,
fonts: fonts,
global: {
body: {
background: 'white',
fontFamily: fonts.primary,
fontWeight: 'normal',
fontSize: '2em',
color: 'black',
overflow: 'hidden'
},
'.hljs': {
background: 'white',
color: 'black'
},
'.hljs span': {
color: 'black !important'
}
},
components: {
blockquote: {
textAlign: 'left',
position: 'relative',
display: 'inline-block'
},
quote: {
borderLeft: '1px solid ' + colors.primary,
paddingLeft: 40,
display: 'block',
color: 'black',
fontSize: '4.9em',
lineHeight: 1,
fontWeight: 'bold',
},
cite: {
color: 'black',
display: 'block',
clear: 'left',
fontSize: '2em',
marginTop: '1em'
},
content: {
margin: 'auto'
},
codePane: {
pre: {
maxWidth: 800,
margin: 'auto',
fontSize: '1.5em',
fontWeight: 'normal',
fontFamily: fonts.tertiary
},
code: {
textAlign: 'left',
padding: 20,
fontWeight: 'normal'
}
},
code: {
color: 'black',
fontSize: '2.66em',
fontFamily: fonts.tertiary,
margin: '0.25em auto',
backgroundColor: 'rgba(0,0,0,0.15)',
padding: "0 10px",
borderRadius: 3
},
heading: {
h1: {
color: 'black',
fontSize: '7.05em',
fontFamily: fonts.primary,
lineHeight: 1,
fontWeight: 'bold',
margin: 0
},
h2: {
color: 'black',
fontSize: '5.88em',
fontFamily: fonts.primary,
lineHeight: 1,
fontWeight: 'bold',
margin: 0
},
h3: {
color: 'black',
fontSize: '4.9em',
fontFamily: fonts.secondary,
lineHeight: 1,
fontWeight: 'bold',
margin: '0.5em auto'
},
h4: {
color: 'black',
fontSize: '3.82em',
fontFamily: fonts.primary,
lineHeight: 1,
fontWeight: 'bold',
margin: '0.5em auto'
},
h5: {
color: 'black',
fontSize: '3.19em',
fontFamily: fonts.primary,
lineHeight: 1,
fontWeight: 'bold',
margin: '0.5em auto'
},
h6: {
color: 'black',
fontSize: '2.66em',
fontFamily: fonts.primary,
lineHeight: 1,
fontWeight: 'bold',
margin: '0.5em auto'
}
},
image: {
display: 'block',
margin: '0.5em auto'
},
link: {
textDecoration: 'none'
},
listItem: {
fontSize: '2.66em'
},
list: {
textAlign: 'left',
listStylePosition: 'inside',
padding: 0
},
s: {
strikethrough: {}
},
text: {
color: 'black',
fontSize: '2.66em',
fontFamily: fonts.primary,
margin: '0.25em auto'
}
}
}

0 comments on commit 9e75539

Please sign in to comment.