|
@@ -40,8 +40,60 @@ export default class OnlineValidatorBadge extends React.Component { |
|
|
|
|
|
|
|
|
return (<span style={{ float: "right"}}> |
|
|
return (<span style={{ float: "right"}}> |
|
|
<a target="_blank" href={`${ this.state.validatorUrl }/debug?url=${ this.state.url }`}> |
|
|
<a target="_blank" href={`${ this.state.validatorUrl }/debug?url=${ this.state.url }`}> |
|
|
<img alt="Online validator badge" src={`${ this.state.validatorUrl }?url=${ this.state.url }`} /> |
|
|
|
|
|
|
|
|
<ValidatorImage src={`${ this.state.validatorUrl }?url=${ this.state.url }`} alt="Online validator badge"/> |
|
|
</a> |
|
|
</a> |
|
|
</span>) |
|
|
</span>) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class ValidatorImage extends React.Component { |
|
|
|
|
|
constructor(props) { |
|
|
|
|
|
super(props); |
|
|
|
|
|
this.state = { |
|
|
|
|
|
loaded: false, |
|
|
|
|
|
error: false |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() { |
|
|
|
|
|
const img = new Image(); |
|
|
|
|
|
img.onload = () => { |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
loaded: true |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
img.onerror = () => { |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
error: true |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
img.src = this.props.src; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) { |
|
|
|
|
|
if (nextProps.src !== this.props.src) { |
|
|
|
|
|
const img = new Image(); |
|
|
|
|
|
img.onload = () => { |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
loaded: true |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
img.onerror = () => { |
|
|
|
|
|
this.setState({ |
|
|
|
|
|
error: true |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
img.src = nextProps.src; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
|
if (this.state.error) { |
|
|
|
|
|
return <img alt={"Error"} /> |
|
|
|
|
|
} else if (!this.state.loaded) { |
|
|
|
|
|
return <img alt= {"Loading..."} /> |
|
|
|
|
|
} |
|
|
|
|
|
return <img src={this.props.src} alt={this.props.alt} /> |
|
|
|
|
|
} |
|
|
|
|
|
} |