Browse Source

Fixed Background landscape detection always returning the intiial result, reacitified the Background class

1.0
Gisle Aune 6 years ago
parent
commit
b9f0fef966
  1. 45
      rpdata-ui/src/common/Background.js

45
rpdata-ui/src/common/Background.js

@ -6,6 +6,14 @@ import './css/Background.css';
* landscape or portrait. It's a react-ification of AiteStory's background. * landscape or portrait. It's a react-ification of AiteStory's background.
*/ */
export default class Background extends Component { export default class Background extends Component {
constructor(props, ctx) {
super(props, ctx)
this.state = {
landscape: false,
}
}
/** /**
* @param {HTMLImageElement} img * @param {HTMLImageElement} img
*/ */
@ -15,28 +23,41 @@ export default class Background extends Component {
} }
if (img.complete && typeof(img.naturalHeight) !== 'undefined' && img.naturalHeight !== 0) { if (img.complete && typeof(img.naturalHeight) !== 'undefined' && img.naturalHeight !== 0) {
const width = img.clientWidth
const height = img.clientHeight
const width = img.naturalWidth
const height = img.naturalHeight
if(width > (height * 1.50)) {
img.className += ' landscape'
}
this.setLandscape(width > (height * 1.50))
} else { } else {
img.onload = function () {
const width = img.clientWidth
const height = img.clientHeight
img.onload = () => {
const width = img.naturalWidth
const height = img.naturalHeight
if(width > (height * 1.50)) {
img.className += ' landscape'
}
this.setLandscape(width > (height * 1.50))
} }
} }
} }
/**
* Change the landscape setting of the image.
*
* @param {boolean} value Whether the image is landscape
*/
setLandscape(value) {
console.log(this.state.landscape, value)
if (value !== this.state.landscape) {
console.log("CHANGED!!")
this.setState({landscape: value})
}
}
render() { render() {
console.log(this.state)
const src = this.props.src || "/assets/images/bg.png" const src = this.props.src || "/assets/images/bg.png"
const opacity = this.props.opacity || 0.25 const opacity = this.props.opacity || 0.25
const className = "Background" + (this.state.landscape ? " landscape" : "")
return <img style={{filter: `brightness(${(Number(opacity)) * 100}%)`}} ref={this.onRef.bind(this)} className="Background" src={src} />
return <img style={{filter: `brightness(${(Number(opacity)) * 100}%)`}} ref={this.onRef.bind(this)} className={className} src={src} />
} }
} }
Loading…
Cancel
Save