You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.5 KiB
58 lines
1.5 KiB
import React, { Component } from "react"
|
|
import "./css/Background.css"
|
|
|
|
/**
|
|
* Background renders a full-size image that detects whether the source is
|
|
* 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
|
|
*/
|
|
onRef(img) {
|
|
if (img == null) {
|
|
return
|
|
}
|
|
|
|
if (img.complete && typeof(img.naturalHeight) !== 'undefined' && img.naturalHeight !== 0) {
|
|
const width = img.naturalWidth
|
|
const height = img.naturalHeight
|
|
|
|
this.setLandscape(width > (height * 1.50))
|
|
} else {
|
|
img.onload = () => {
|
|
const width = img.naturalWidth
|
|
const height = img.naturalHeight
|
|
|
|
this.setLandscape(width > (height * 1.50))
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Change the landscape setting of the image.
|
|
*
|
|
* @param {boolean} value Whether the image is landscape
|
|
*/
|
|
setLandscape(value) {
|
|
if (value !== this.state.landscape) {
|
|
this.setState({landscape: value})
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const src = this.props.src || "/assets/images/bg.png"
|
|
const opacity = this.props.opacity || 0.20
|
|
const className = "Background" + (this.state.landscape ? " landscape" : "")
|
|
|
|
return <img alt="Background" style={{filter: `brightness(${(Number(opacity)) * 100}%)`}} ref={this.onRef.bind(this)} className={className} src={src} />
|
|
}
|
|
}
|