frontend/marko/components/background/component.js

module.exports = class {
  onCreate(input) {
    this.state = {
      src: input.src,
      orientation: "portrait",
      style: {
        filter: `opacity(${input.opacity || 0.20})`
      }
    }
  }

  onInput(input) {
    if (input.src != this.state.src) {
      this.updateOrientation()
    }

    if (input.opacity != this.state.opacity) {
      this.state.style.filter = `opacity(${input.opacity || 0.20})`
    }
  }

  onMount() {
    this.updateOrientation()
  }

  updateOrientation() {
    const image = this.getEl("image", 0)

    if (image.complete && typeof(image.naturalHeight) !== 'undefined' && image.naturalHeight !== 0) {
      const width = image.naturalWidth
      const height = image.naturalHeight
  
      this.setLandscape(width > (height * 1.50))
    } else {
      image.onload = () => {
        const width = image.naturalWidth
        const height = image.naturalHeight
  
        this.setLandscape(width > (height * 1.50))
      }
    }
  }

  setLandscape(value) {
    const orientation = value ? "landscape" : "portrait"

    if (orientation !== this.state.orientation) {
      this.state.orientation = orientation
    }
  }
}