From b9f0fef966d908d667fca44c860ba4e780060b00 Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Sun, 15 Jul 2018 19:57:28 +0200
Subject: [PATCH] Fixed Background landscape detection always returning the
 intiial result, reacitified the Background class

---
 rpdata-ui/src/common/Background.js | 45 ++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 12 deletions(-)

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 <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} />
   }
 }
\ No newline at end of file