|
|
@ -40,6 +40,7 @@ class Item extends React.PureComponent { |
|
|
|
size: PropTypes.number.isRequired, |
|
|
|
size: PropTypes.number.isRequired, |
|
|
|
letterbox: PropTypes.bool, |
|
|
|
letterbox: PropTypes.bool, |
|
|
|
onClick: PropTypes.func.isRequired, |
|
|
|
onClick: PropTypes.func.isRequired, |
|
|
|
|
|
|
|
displayWidth: PropTypes.number, |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
static defaultProps = { |
|
|
|
static defaultProps = { |
|
|
@ -78,7 +79,7 @@ class Item extends React.PureComponent { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
render () { |
|
|
|
const { attachment, index, size, standalone, letterbox } = this.props; |
|
|
|
const { attachment, index, size, standalone, letterbox, displayWidth } = this.props; |
|
|
|
|
|
|
|
|
|
|
|
let width = 50; |
|
|
|
let width = 50; |
|
|
|
let height = 100; |
|
|
|
let height = 100; |
|
|
@ -141,7 +142,7 @@ class Item extends React.PureComponent { |
|
|
|
const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; |
|
|
|
const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; |
|
|
|
|
|
|
|
|
|
|
|
const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; |
|
|
|
const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; |
|
|
|
const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; |
|
|
|
const sizes = hasSize ? `${displayWidth * (width / 100)}px` : null; |
|
|
|
|
|
|
|
|
|
|
|
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; |
|
|
|
const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; |
|
|
|
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; |
|
|
|
const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; |
|
|
@ -235,7 +236,7 @@ export default class MediaGallery extends React.PureComponent { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
handleRef = (node) => { |
|
|
|
handleRef = (node) => { |
|
|
|
if (node && this.isStandaloneEligible()) { |
|
|
|
if (node /*&& this.isStandaloneEligible()*/) { |
|
|
|
// offsetWidth triggers a layout, so only calculate when we need to
|
|
|
|
// offsetWidth triggers a layout, so only calculate when we need to
|
|
|
|
this.setState({ |
|
|
|
this.setState({ |
|
|
|
width: node.offsetWidth, |
|
|
|
width: node.offsetWidth, |
|
|
@ -272,9 +273,9 @@ export default class MediaGallery extends React.PureComponent { |
|
|
|
); |
|
|
|
); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if (this.isStandaloneEligible()) { |
|
|
|
if (this.isStandaloneEligible()) { |
|
|
|
children = <Item standalone attachment={media.get(0)} onClick={this.handleClick} />; |
|
|
|
children = <Item standalone attachment={media.get(0)} onClick={this.handleClick} displayWidth={width} />; |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} />); |
|
|
|
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} displayWidth={width} />); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|