Skip to content

Commit

Permalink
Adds webfontloader & 30 google fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamraffe
iamraffe committed Apr 5, 2016
1 parent e2485f3 commit 34f0d9f
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 16 deletions.
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1",
"react": "^0.14.7",
"react-dom": "^0.14.7"
"react-dom": "^0.14.7",
"webfontloader": "^1.6.24",
"react-autocomplete": "1.0.0-rc1"
},
"peerDependencies": {
},
Expand Down
8 changes: 7 additions & 1 deletion src/objects/Text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Icon from '../Icon';
import _ from 'lodash';

import Vector from './Vector';
import WebFont from 'webfontloader';

export default class Text extends Vector {
static meta = {
Expand Down Expand Up @@ -39,6 +40,11 @@ export default class Text extends Vector {

render() {
let {object, index} = this.props;
WebFont.load({
google: {
families: [object.fontFamily]
}
});
return (
<text style={this.getStyle()}
{...this.getObjectAttributes()}
Expand All @@ -49,4 +55,4 @@ export default class Text extends Vector {
</text>
);
}
}
}
133 changes: 121 additions & 12 deletions src/panels/TextPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,115 @@ import Button from './Button';
import SwitchState from './SwitchState';
import Columns from './Columns';
import Column from './Column';
import WebFont from 'webfontloader';
import Autocomplete from 'react-autocomplete';

export default class TextPanel extends Panel {
constructor(props){
super()
// console.log(props)
this.state = { value: props.object.fontFamily }
}

fontFamilies = [
['Helvetica', 'Helvetica, Arial, sans-serif'],
['Helvetica Neue', '"Helvetica Neue", Arial, sans-serif'],
['Georgia', 'Georgia, serif'],
['American Typewriter', 'AmericanTypewriter, Georgia, serif'],
['Monaco', 'Monaco, consolas, monospace'],
['Times New Roman', 'Times New Roman, serif'],
// {name: 'PT Serif', family: 'PT Serif, Arial, serif'},
// {name: 'Arvo', family: '"Arvo", Arial, serif'},
// {name: 'Bitter', family: 'Bitter, serif'},
// {name: 'Cardo', family: 'Cardo, serif'},
// {name: 'Domine', family: 'Domine, Arial, serif'},
// {name: 'Old Standard TT', family: '"Old Standard TT", Arial, serif'},
// {name: 'Varela Round', family:'Varela Round, serif'},
// {name: 'Chivo', family: 'Chivo, sans-serif'},
// {name: 'Roboto', family: 'Roboto, sans-serif'},
// {name: 'Roboto Slab', family: 'Roboto Slab, serif'},
// {name: 'Crimson Text', family: 'Crimson Text, serif'},
// {name: 'Libre Bakersville', family: 'Libre Bakersville, serif'},
// {name: 'Montserrat', family:'Montserrat, sans-serif'},
// {name: 'Archivo Narrow', family: 'Archivo Narrow, sans-serif'},
// {name: 'Lato', family: 'Lato, sans-serif'},
// {name: 'Anonymous Pro', family: 'Anonymous Pro, monospace'},
// {name: 'Merriweather', family: 'Merriweather, serif'},
// {name: 'Neuton', family:'Neuton, serif'},
// {name: 'Open Sans', family: 'Open Sans, sans-serif'},
// {name: 'Poppins', family: 'Poppins, sans-serif'},
// {name: 'Lora', family: 'Lora, serif'},
// {name: 'Source Serif Pro', family: 'Source Serif Pro, serif'},
// {name: 'Karla', family: 'Karla, sans-serif'},
// {name: 'Montserrat', family:'Montserrat, serif'},
// {name: 'Source Sans Pro', family: 'Source Sans Pro, sans-serif'},
// {name: 'Inconsolata', family: 'Inconsolata, monospace'},
// {name: 'Playfair Display', family: 'Playfair Display, serif'},
// {name: 'Work Sans', family: 'Work Sans, serif'},
// {name: 'Alegreya', family: 'Alegreya, serif'},
// {name: 'Alegreya Sans', family: 'Alegreya Sans, sans-serif'},
// {name: 'Fira Sans', family: 'Fira Sans, sans-serif'},
{name: 'PT Serif', family: 'PT Serif'},
{name: 'Arvo', family: '"Arvo"'},
{name: 'Bitter', family: 'Bitter'},
{name: 'Cardo', family: 'Cardo'},
{name: 'Domine', family: 'Domine'},
{name: 'Old Standard TT', family: '"Old Standard TT"'},
{name: 'Varela Round', family:'Varela Round'},
{name: 'Chivo', family: 'Chivo'},
{name: 'Roboto', family: 'Roboto'},
{name: 'Roboto Slab', family: 'Roboto Slab'},
{name: 'Crimson Text', family: 'Crimson Text'},
{name: 'Libre Bakersville', family: 'Libre Bakersville'},
{name: 'Montserrat', family:'Montserrat'},
{name: 'Archivo Narrow', family: 'Archivo Narrow'},
{name: 'Lato', family: 'Lato'},
{name: 'Anonymous Pro', family: 'Anonymous Pro'},
{name: 'Merriweather', family: 'Merriweather'},
{name: 'Neuton', family:'Neuton'},
{name: 'Open Sans', family: 'Open Sans'},
{name: 'Poppins', family: 'Poppins'},
{name: 'Lora', family: 'Lora'},
{name: 'Sourc Pro', family: 'Sourc Pro'},
{name: 'Karla', family: 'Karla'},
{name: 'Source Sans Pro', family: 'Source Sans Pro'},
{name: 'Inconsolata', family: 'Inconsolata'},
{name: 'Playfair Display', family: 'Playfair Display'},
{name: 'Work Sans', family: 'Work Sans'},
{name: 'Alegreya', family: 'Alegreya'},
{name: 'Alegreya Sans', family: 'Alegreya Sans'},
{name: 'Fira Sans', family: 'Fira Sans'},
];

handleFontFamilyChange(value){
// console.log(e, this, this.props)
this.setState({ value })
WebFont.load({
google: {
families: [value]
}
});
this.props.onChange('fontFamily', value)
// console.log(this, e.target.options[e.target.selectedIndex].text)
// this.props.onChange('fontFamily', e.target.value)
// (e) => this.props.onChange('fontFamily', e.target.value)
}

matchStateToTerm (state, value) {
return (
state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
state.family.toLowerCase().indexOf(value.toLowerCase()) !== -1
)
}

sortStates (a, b, value) {
return (
a.name.toLowerCase().indexOf(value.toLowerCase()) >
b.name.toLowerCase().indexOf(value.toLowerCase()) ? 1 : -1
)
}

// <select style={styles.select}
// value={object.fontFamily}
// onChange={this.handleFontFamilyChange.bind(this)} >
// {this.fontFamilies.map(([name, value]) =>
// <option key={value} value={value}>{name}</option>)}
// </select>

render() {
let {object} = this.props;
return (
Expand Down Expand Up @@ -54,12 +152,23 @@ export default class TextPanel extends Panel {
onChange={(e) => this.props.onChange('fontSize', e.target.value)} />}
</Column>
<Column style={{"float": "right", marginRight: 10}}>
<select style={styles.select}
value={object.fontFamily}
onChange={(e) => this.props.onChange('fontFamily', e.target.value)} >
{this.fontFamilies.map(([name, value]) =>
<option key={value} value={value}>{name}</option>)}
</select>
<Autocomplete
value={this.state.value}
style={[styles.textInput]}
labelText="Choose a font"
items={this.fontFamilies}
getItemValue={(item) => item.name}
shouldItemRender={this.matchStateToTerm}
sortItems={this.sortStates}
onChange={(event, value) => this.setState({ value })}
onSelect={this.handleFontFamilyChange.bind(this)}
renderItem={(item, isHighlighted) => (
<div
style={isHighlighted ? styles.highlightedItem : styles.item}
key={item.family}
>{item.name}</div>
)}
/>
</Column>
<div style={[styles.row, {paddingTop: 25, paddingRight: 10}]}>
<input style={[styles.input, styles.textInput]}
Expand Down
15 changes: 13 additions & 2 deletions src/panels/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,5 +94,16 @@ export default {
textDecoration: 'none',
display: 'block',
padding: '2px 0',
}
};
},
item: {
padding: '2px 6px',
cursor: 'default'
},

highlightedItem: {
color: 'white',
background: 'hsl(200, 50%, 50%)',
padding: '2px 6px',
cursor: 'default'
},
};

0 comments on commit 34f0d9f

Please sign in to comment.