diff --git a/rpdata-ui/src/common/Background.js b/rpdata-ui/src/common/Background.js
index 7425e76..abf09e3 100644
--- a/rpdata-ui/src/common/Background.js
+++ b/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.
*/
export default class Background extends Component {
+ constructor(props, ctx) {
+ super(props, ctx)
+
+ this.state = {
+ landscape: false,
+ }
+ }
+
/**
* @param {HTMLImageElement} img
*/
@@ -15,28 +23,41 @@ export default class Background extends Component {
}
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 {
- 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() {
+ console.log(this.state)
+
const src = this.props.src || "/assets/images/bg.png"
const opacity = this.props.opacity || 0.25
+ const className = "Background" + (this.state.landscape ? " landscape" : "")
- return
+ return
}
}
\ No newline at end of file