/**
* Set the font with the given font list index as the active one
*/
setActiveFont(fontFamily) {
const activeFontIndex = this.fontManager.setActiveFont(fontFamily);
if (activeFontIndex === -1) {
// error trying to change font
this.setState({
activeFont: fontFamily,
errorText: `Cannot update activeFont: The font "${fontFamily}" is not in the font list`,
loadingStatus: 'error'
});
console.error(this.state.errorText);
} else {
// font change successful
this.setState({
activeFont: fontFamily,
errorText: '',
loadingStatus: 'finished'
});
}
}
constructor(props) {
super(props);
this.state = {
activeFont: this.props.activeFont,
errorText: '',
expanded: false,
loadingStatus: 'loading' // possible values: 'loading', 'finished', 'error'
};
// initialize FontManager object and generate the font list
this.fontManager = new FontManager(
this.props.apiKey,
this.props.activeFont,
this.props.options
);
this.fontManager.init()
.then(() => {
// font list has finished loading
this.setState({
errorText: '',
loadingStatus: 'finished'
});
})
.catch((err) => {
// error while loading font list
this.setState({
errorText: 'Error trying to fetch the list of available fonts',
loadingStatus: 'error'
});
console.error(this.state.errorText);
console.error(err);
});
// function bindings
this.setActiveFont = this.setActiveFont.bind(this);
this.onClose = this.onClose.bind(this);
this.onScroll = this.onScroll.bind(this);
this.toggleExpanded = this.toggleExpanded.bind(this);
}
/**
* Before the component unmount, remove the Style tag generated by frontManager instance
*/
componentWillUnmount() {
if (this.props.cleanStylesOnUnmount) {
this.fontManager.removeCustomStyle();
}
}
/**
* Download the font previews for all visible font entries and the five after them
*/
onScroll(e) {
const elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
const downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
this.fontManager.downloadPreviews(downloadIndex + 5);
}