Skip to content

Commit 24c5762

Browse files
kenwheelerkenwheeler
committed
Refactoring how text works
1 parent 2ac8fc3 commit 24c5762

File tree

4 files changed

+82
-84
lines changed

4 files changed

+82
-84
lines changed

‎presentation/deck.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ export default class extends React.Component {
2222
return (
2323
<Deck transition={["zoom", "slide"]} transitionDuration={800}>
2424
<Slide transition={["zoom"]} bgColor="primary">
25-
<Heading size={1} fit caps textColor="black">
25+
<Heading size={1} fit caps lineHeight={1} textColor="black">
2626
Spectacle
2727
</Heading>
28-
<Heading size={1} fit caps margin="-20px 0px">
28+
<Heading size={1} fit caps>
2929
A ReactJS Presentation Library
3030
</Heading>
31-
<Heading size={2} fit caps textColor="black">
31+
<Heading size={1} fit caps textColor="black">
3232
Where You Can Write Your Decks In JSX
3333
</Heading>
3434
<Link href="https://github.com/FormidableLabs/spectacle">
@@ -111,7 +111,7 @@ export default class extends React.Component {
111111
<Interactive/>
112112
</Slide>
113113
<Slide transition={["spin", "slide"]} bgColor="tertiary">
114-
<Heading size={1} caps fit textColor="primary">
114+
<Heading size={1} caps fit lineHeight={1.5} textColor="primary">
115115
Made with love in Seattle by
116116
</Heading>
117117
<Link href="http://www.formidablelabs.com"><Image width="100%" src={images.logo}/></Link>

‎src/heading.jsx‎

Lines changed: 34 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ class Heading extends Base {
1010
super(props);
1111
this.resize = this.resize.bind(this);
1212
this.state = {
13-
width: 256,
14-
height: 24
13+
scale: 1,
14+
height: 16
1515
};
1616
}
1717
componentDidMount() {
@@ -23,55 +23,47 @@ class Heading extends Base {
2323
}
2424
resize() {
2525
if (this.props.fit) {
26-
const el = React.findDOMNode(this.refs.text);
27-
const state = this.state;
28-
const width = el.offsetWidth || el.getComputedTextLength();
29-
const height = el.offsetHeight || 24;
30-
if (state.width !== width || state.height !== height) {
31-
this.setState({
32-
width,
33-
height
34-
});
35-
}
26+
const text = React.findDOMNode(this.refs.text);
27+
const container = React.findDOMNode(this.refs.container);
28+
text.style.display = "inline-block";
29+
const scale = (container.offsetWidth / text.offsetWidth);
30+
const height = text.offsetHeight * scale;
31+
text.style.display = "block";
32+
this.setState({
33+
scale,
34+
height
35+
});
3636
}
3737
}
3838
render() {
3939
const Tag = "H" + this.props.size;
40-
const viewBox = [
41-
0, 0,
42-
this.state.width,
43-
this.state.height - 8
44-
].join(" ");
4540
const styles = {
46-
svg: {
47-
width: "100%",
48-
maxHeight: "100%",
49-
fill: "currentcolor",
50-
overflow: "visible"
41+
container: {
42+
display: 'block',
43+
width: '100%',
44+
height: this.state.height
5145
},
5246
text: {
53-
fontFamily: "inherit",
54-
fontSize: "1rem",
55-
fontWeight: "inherit",
56-
textAnchor: "middle"
47+
fontSize: 16,
48+
display: 'block',
49+
margin: "0",
50+
padding: "0",
51+
lineHeight: this.props.lineHeight,
52+
transform: "scale(" + this.state.scale + ")",
53+
transformOrigin: 'center top'
5754
}
5855
};
5956
return this.props.fit
6057
? <div
58+
ref="container"
6159
style={[
6260
this.context.styles.components.heading["h" + this.props.size],
63-
this.getStyles(), this.props.style]}>
64-
<svg {...this.props}
65-
viewBox={viewBox}
66-
style={styles.svg}>
67-
<text
68-
ref="text"
69-
x="50%"
70-
y="13"
71-
style={styles.text}>
72-
{this.props.children}
73-
</text>
74-
</svg>
61+
this.getStyles(), styles.container]}>
62+
<span
63+
ref="text"
64+
style={[styles.text, this.props.style]}>
65+
{this.props.children}
66+
</span>
7567
</div>
7668
: React.createElement(Tag, {
7769
style: [this.context.styles.components.heading["h" + this.props.size], this.getStyles(), this.props.style]
@@ -80,12 +72,14 @@ class Heading extends Base {
8072
}
8173

8274
Heading.defaultProps = {
83-
size: 1
75+
size: 1,
76+
lineHeight: 1
8477
};
8578

8679
Heading.propTypes = {
8780
children: React.PropTypes.node,
88-
size: React.PropTypes.number
81+
size: React.PropTypes.number,
82+
lineHeight: React.PropTypes.number
8983
};
9084

9185
Heading.contextTypes = {

‎src/text.jsx‎

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ class Text extends Base {
1010
super(props);
1111
this.resize = this.resize.bind(this);
1212
this.state = {
13-
width: 256,
14-
height: 24
13+
scale: 1,
14+
height: 16
1515
};
1616
}
1717
componentDidMount() {
@@ -23,58 +23,62 @@ class Text extends Base {
2323
}
2424
resize() {
2525
if (this.props.fit) {
26-
const el = React.findDOMNode(this.refs.text);
27-
const state = this.state;
28-
const width = el.offsetWidth || el.getComputedTextLength();
29-
const height = el.offsetHeight || 24;
30-
if (state.width !== width || state.height !== height) {
31-
this.setState({
32-
width,
33-
height
34-
});
35-
}
26+
const text = React.findDOMNode(this.refs.text);
27+
const container = React.findDOMNode(this.refs.container);
28+
text.style.display = "inline-block";
29+
const scale = (container.offsetWidth / text.offsetWidth);
30+
const height = text.offsetHeight * scale;
31+
text.style.display = "block";
32+
this.setState({
33+
scale,
34+
height
35+
});
3636
}
3737
}
3838
render() {
39-
const viewBox = [
40-
0, 0,
41-
this.state.width,
42-
this.state.height - 8
43-
].join(" ");
4439
const styles = {
45-
svg: {
46-
width: "100%",
47-
maxHeight: "100%",
48-
fill: "currentcolor",
49-
overflow: "visible"
40+
container: {
41+
display: 'block',
42+
width: '100%',
43+
height: this.state.height
5044
},
5145
text: {
52-
fontFamily: "inherit",
53-
fontSize: "1rem",
54-
fontWeight: "inherit",
55-
textAnchor: "middle"
46+
fontSize: 16,
47+
display: 'block',
48+
margin: "0",
49+
padding: "0",
50+
lineHeight: this.props.lineHeight,
51+
transform: "scale(" + this.state.scale + ")",
52+
transformOrigin: 'center top'
5653
}
5754
};
5855
return this.props.fit
59-
? <span style={[this.context.styles.components.text, this.getStyles(), this.props.style]}>
60-
<svg {...this.props}
61-
viewBox={viewBox}
62-
style={styles.svg}>
63-
<text
64-
ref='text'
65-
x='50%'
66-
y='13'
67-
style={styles.text}>
68-
{this.props.children}
69-
</text>
70-
</svg>
71-
</span>
56+
? <div
57+
ref="container"
58+
style={[
59+
this.context.styles.components.text,
60+
this.getStyles(), styles.container]}>
61+
<span
62+
ref="text"
63+
style={[styles.text, this.props.style]}>
64+
{this.props.children}
65+
</span>
66+
</div>
7267
: <p style={[this.context.styles.components.text, this.getStyles(), this.props.style]}>
7368
{this.props.children}
7469
</p>;
7570
}
7671
}
7772

73+
Text.defaultProps = {
74+
lineHeight: 1
75+
};
76+
77+
Text.propTypes = {
78+
children: React.PropTypes.node,
79+
lineHeight: React.PropTypes.number
80+
};
81+
7882
Text.contextTypes = {
7983
styles: React.PropTypes.object
8084
};

‎themes/default/print.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ module.exports = {
6060
pre: {
6161
maxWidth: 800,
6262
margin: "auto",
63-
fontSize: "1.5em",
63+
fontSize: "1em",
6464
fontWeight: "normal",
6565
fontFamily: fonts.tertiary
6666
},

0 commit comments

Comments
 (0)