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.
42 lines
1.1 KiB
42 lines
1.1 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 {
|
|
/**
|
|
* @param {HTMLImageElement} img
|
|
*/
|
|
onRef(img) {
|
|
if (img == null) {
|
|
return
|
|
}
|
|
|
|
if (img.complete && typeof(img.naturalHeight) !== 'undefined' && img.naturalHeight !== 0) {
|
|
const width = img.clientWidth
|
|
const height = img.clientHeight
|
|
|
|
if(width > (height * 1.50)) {
|
|
img.className += ' landscape'
|
|
}
|
|
} else {
|
|
img.onload = function () {
|
|
const width = img.clientWidth
|
|
const height = img.clientHeight
|
|
|
|
if(width > (height * 1.50)) {
|
|
img.className += ' landscape'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const src = this.props.src || "/assets/images/bg.png"
|
|
const opacity = this.props.opacity || 0.25
|
|
|
|
return <img style={{filter: `brightness(${(Number(opacity)) * 100}%)`}} ref={this.onRef.bind(this)} className="Background" src={src} />
|
|
}
|
|
}
|