imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix up scroll behaviour when loading widgets

Browse source
This commit is contained in:
Matthew Hodgson 2016-04-02 00:36:19 +01:00
parent 62d04c38ef
commit 4388334e30
8 changed files with 55 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/views/messages/MImageBody.js
View file

@ -20,6 +20,7 @@ var React = require('react');
var filesize = require('filesize');
var MatrixClientPeg = require('../../../MatrixClientPeg');
var ImageUtils = require('../../../ImageUtils');
var Modal = require('../../../Modal');
var sdk = require('../../../index');
var dis = require("../../../dispatcher");
@ -32,29 +33,7 @@ module.exports = React.createClass({
mxEvent: React.PropTypes.object.isRequired,
/* callback called when images in events are loaded */
onImageLoad: React.PropTypes.func,
},
thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
if (!fullWidth || !fullHeight) {
// Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
// log this because it's spammy
return undefined;
}
if (fullWidth < thumbWidth && fullHeight < thumbHeight) {
// no scaling needs to be applied
return fullHeight;
}
var widthMulti = thumbWidth / fullWidth;
var heightMulti = thumbHeight / fullHeight;
if (widthMulti < heightMulti) {
// width is the dominant dimension so scaling will be fixed on that
return Math.floor(widthMulti * fullHeight);
}
else {
// height is the dominant dimension so scaling will be fixed on that
return Math.floor(heightMulti * fullHeight);
}
onWidgetLoad: React.PropTypes.func,
},
onClick: function onClick(ev) {
@ -134,7 +113,9 @@ module.exports = React.createClass({
// the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
//console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
if (content.info) thumbHeight = this.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
if (content.info) {
thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
}
this.refs.image.style.height = thumbHeight + "px";
// console.log("Image height now", thumbHeight);
},
@ -152,8 +133,7 @@ module.exports = React.createClass({
<img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
alt={content.body}
onMouseEnter={this.onImageEnter}
onMouseLeave={this.onImageLeave}
onLoad={this.props.onImageLoad} />
onMouseLeave={this.onImageLeave} />
</a>
<div className="mx_MImageBody_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">

4
src/components/views/messages/MessageEvent.js
View file

@ -39,7 +39,7 @@ module.exports = React.createClass({
highlightLink: React.PropTypes.string,
/* callback called when images in events are loaded */
onImageLoad: React.PropTypes.func,
onWidgetLoad: React.PropTypes.func,
},
@ -64,6 +64,6 @@ module.exports = React.createClass({
return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
onImageLoad={this.props.onImageLoad} />;
onWidgetLoad={this.props.onWidgetLoad} />;
},
});

5
src/components/views/messages/TextualBody.js
View file

@ -38,6 +38,9 @@ module.exports = React.createClass({
/* link URL for the highlights */
highlightLink: React.PropTypes.string,
/* callback for when our widget has loaded */
onWidgetLoad: React.PropTypes.func,
},
getInitialState: function() {
@ -88,7 +91,7 @@ module.exports = React.createClass({
var widget;
if (this.state.link) {
var LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
widget = <LinkPreviewWidget link={ this.state.link }/>;
widget = <LinkPreviewWidget link={ this.state.link } onWidgetLoad={ this.props.onWidgetLoad }/>;
}
switch (content.msgtype) {