Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
Already on GitHub? Sign in to your account
Image Block: Adding image resizing handles #2213
Merged
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
ff5c623
Image Block: Adding image resizing handles
youknowriad 0793a71
ImageBlock: Avoid the Image as a global and use window.Image
youknowriad d88fba1
Image Block: Fix image-size unmounting behaviour and small tweaks
youknowriad 829d986
Image Block: disable resizing images if alignement is full or wide
youknowriad d5a408e
Handle resized images without forcing a max-width when floated.
mtias 73347fe
Image Block: Change the width calculation mechanism to retrigger when…
youknowriad 12a26e1
Image Block: Resizing is limited from 20px to the actual width/height…
youknowriad 548e13f
Image Block: Hide the resizing handle if the block is not selected
youknowriad 06b88c3
Image Block: Changing the resizing library to allow adding more resiz…
youknowriad 76798e8
Image Block: Fix empty caption image
youknowriad 1c30f9a
Image Block: Constraint resizing within the editor canvas
youknowriad
Jump to file or symbol
Failed to load files and symbols.
| @@ -0,0 +1,82 @@ | ||
| +/** | ||
| + * External dependencies | ||
| + */ | ||
| +import { noop } from 'lodash'; | ||
| + | ||
| +/** | ||
| + * WordPress dependencies | ||
| + */ | ||
| +import { Component } from 'element'; | ||
| + | ||
| +class ImageSize extends Component { | ||
| + constructor() { | ||
| + super( ...arguments ); | ||
| + this.state = { | ||
| + width: undefined, | ||
| + height: undefined, | ||
| + }; | ||
| + this.bindContainer = this.bindContainer.bind( this ); | ||
| + this.calculateSize = this.calculateSize.bind( this ); | ||
| + } | ||
| + | ||
| + bindContainer( ref ) { | ||
| + this.container = ref; | ||
| + } | ||
| + | ||
| + componentDidUpdate( prevProps ) { | ||
| + if ( this.props.src !== prevProps.src ) { | ||
| + this.setState( { | ||
| + width: undefined, | ||
| + height: undefined, | ||
| + } ); | ||
| + this.fetchImageSize(); | ||
| + } | ||
| + | ||
| + if ( this.props.dirtynessTrigger !== prevProps.dirtynessTrigger ) { | ||
| + this.calculateSize(); | ||
| + } | ||
| + } | ||
| + | ||
| + componentDidMount() { | ||
| + this.fetchImageSize(); | ||
| + } | ||
| + | ||
| + componentWillUnmount() { | ||
| + if ( this.image ) { | ||
| + this.image.onload = noop; | ||
| + } | ||
| + } | ||
| + | ||
| + fetchImageSize() { | ||
| + this.image = new window.Image(); | ||
| + this.image.onload = this.calculateSize; | ||
| + this.image.src = this.props.src; | ||
| + } | ||
| + | ||
| + calculateSize() { | ||
| + const maxWidth = this.container.clientWidth; | ||
| + const exceedMaxWidth = this.image.width > maxWidth; | ||
| + const ratio = this.image.height / this.image.width; | ||
| + const width = exceedMaxWidth ? maxWidth : this.image.width; | ||
| + const height = exceedMaxWidth ? maxWidth * ratio : this.image.height; | ||
| + this.setState( { width, height } ); | ||
| + } | ||
| + | ||
| + render() { | ||
| + const sizes = { | ||
| + imageWidth: this.image && this.image.width, | ||
| + imageHeight: this.image && this.image.height, | ||
| + containerWidth: this.container && this.container.clientWidth, | ||
| + containerHeight: this.container && this.container.clientHeight, | ||
| + imageWidthWithinContainer: this.state.width, | ||
| + imageHeightWithinContainer: this.state.height, | ||
| + }; | ||
| + return ( | ||
| + <div ref={ this.bindContainer }> | ||
| + { this.props.children( sizes ) } | ||
| + </div> | ||
| + ); | ||
| + } | ||
| +} | ||
| + | ||
| +export default ImageSize; |