ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
Code Issues Releases Wiki Activity

add font rendering logic

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-22 16:12:52 +02:00
parent c58227b443
commit 370a3b43dd
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/components/react_flow_type/react_flow_type.js
View File

@ -25,8 +25,6 @@ let FlowType = React.createClass({
children: React.PropTypes.element.isRequired // only supporting one child element at once right now
},
// Establish default settings/variables
// ====================================
getDefaultProps() {
return {
maximum: 9999,
@ -39,18 +37,33 @@ let FlowType = React.createClass({
getInitialState() {
return {
fontSize: 1
// 32 because that's the default font display size
// doesn't really matter though
fontSize: 32
};
},
componentDidMount() {
// Make changes upon resize, calculate changes and rerender
window.addEventListener('resize', this.handleResize);
},
componentWillUnmount() {
// stop listening to window once the component was unmounted
window.removeEventListener('resize', this.handleResize);
},
handleResize() {
let elemWidth = this.refs.flowTypeElement.getDOMNode().offsetWidth;
let width = elemWidth > this.props.maximum ? this.props.maximum : elemWidth < this.props.minimum ? this.props.minimum : elemWidth;
let fontBase = width / this.props.fontRatio;
let fontSize = fontBase > this.props.maxFont ? this.props.maxFont : fontBase < this.props.minFont ? this.props.minFont : fontBase;
this.setState({ fontSize });
},
// The child the user passes to this component needs to have it's
// style.fontSize property to be updated
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
@ -63,7 +76,7 @@ let FlowType = React.createClass({
render() {
return (
<span>
<span ref="flowTypeElement">
{this.renderChildren()}
</span>
);