editor.scss
7 years ago
font-typography.js
7 years ago
fontloader.js
7 years ago
index.js
7 years ago
inline-styles.js
7 years ago
fontloader.js
89 lines
| 1 | if ( googlefonts === undefined ) { |
| 2 | var googlefonts = [] |
| 3 | } |
| 4 | const { |
| 5 | Component, |
| 6 | } = wp.element |
| 7 | import PropTypes from "prop-types" |
| 8 | import WebFont from "webfontloader" |
| 9 | const statuses = { |
| 10 | inactive: "inactive", |
| 11 | active: "active", |
| 12 | loading: "loading", |
| 13 | } |
| 14 | |
| 15 | const noop = () => {} |
| 16 | |
| 17 | class WebfontLoader extends Component { |
| 18 | |
| 19 | constructor(props) { |
| 20 | super(props) |
| 21 | |
| 22 | this.state = { |
| 23 | status: undefined, |
| 24 | } |
| 25 | |
| 26 | this.handleLoading = () => { |
| 27 | this.setState( { status: statuses.loading } ) |
| 28 | } |
| 29 | |
| 30 | this.addFont = ( font ) => { |
| 31 | if ( ! googlefonts.includes( font ) ) { |
| 32 | googlefonts.push( font ) |
| 33 | } |
| 34 | } |
| 35 | |
| 36 | this.handleActive = () => { |
| 37 | this.setState( { status: statuses.active } ) |
| 38 | } |
| 39 | |
| 40 | this.handleInactive = () => { |
| 41 | this.setState( { status: statuses.inactive } ) |
| 42 | } |
| 43 | |
| 44 | this.loadFonts = () => { |
| 45 | //if ( ! this.state.fonts.includes( this.props.config.google.families[ 0 ] ) ) { |
| 46 | if ( ! googlefonts.includes( this.props.config.google.families[ 0 ] ) ) { |
| 47 | WebFont.load( { |
| 48 | ...this.props.config, |
| 49 | loading: this.handleLoading, |
| 50 | active: this.handleActive, |
| 51 | inactive: this.handleInactive, |
| 52 | } ) |
| 53 | this.addFont( this.props.config.google.families[ 0 ] ) |
| 54 | } |
| 55 | } |
| 56 | } |
| 57 | |
| 58 | componentDidMount() { |
| 59 | this.loadFonts() |
| 60 | } |
| 61 | |
| 62 | componentDidUpdate( prevProps, prevState ) { |
| 63 | const { onStatus, config } = this.props |
| 64 | |
| 65 | if ( prevState.status !== this.state.status ) { |
| 66 | onStatus( this.state.status ) |
| 67 | } |
| 68 | if ( prevProps.config !== config ) { |
| 69 | this.loadFonts() |
| 70 | } |
| 71 | } |
| 72 | |
| 73 | render() { |
| 74 | const { children } = this.props |
| 75 | return children || null |
| 76 | } |
| 77 | } |
| 78 | |
| 79 | WebfontLoader.propTypes = { |
| 80 | config: PropTypes.object.isRequired, |
| 81 | children: PropTypes.element, |
| 82 | onStatus: PropTypes.func.isRequired, |
| 83 | } |
| 84 | |
| 85 | WebfontLoader.defaultProps = { |
| 86 | onStatus: noop, |
| 87 | } |
| 88 | |
| 89 | export default WebfontLoader |