Update the scroll offset when images load

In order to deal with image-loading reshaping the DOM, wire up
ScrollPanel.checkScroll to the image load events.

Fixes https://github.com/vector-im/vector-web/issues/984

src/components/views/messages/MImageBody.js

@@ -27,6 +27,14 @@ var dis = require("../../../dispatcher");
 module.exports = React.createClass({
     displayName: 'MImageBody',
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        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
@@ -116,7 +124,8 @@ module.exports = React.createClass({
                         <img className="mx_MImageBody_thumbnail" src={thumbUrl}
                             alt={content.body} style={imgStyle}
                             onMouseEnter={this.onImageEnter}
-                            onMouseLeave={this.onImageLeave} />
+                            onMouseLeave={this.onImageLeave}
+                            onLoad={this.props.onImageLoad} />
                     </a>
                     <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">

src/components/views/messages/MessageEvent.js

@@ -37,6 +37,9 @@ module.exports = React.createClass({
 
         /* link URL for the highlights */
         highlightLink: React.PropTypes.string,
+
+        /* callback called when images in events are loaded */
+        onImageLoad: React.PropTypes.func,
     },
 
 
@@ -60,6 +63,7 @@ module.exports = React.createClass({
         }
 
         return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
-                    highlightLink={this.props.highlightLink} />;
+                    highlightLink={this.props.highlightLink}
+                    onImageLoad={this.props.onImageLoad} />;
     },
 });

src/components/views/rooms/EventTile.js

@@ -102,6 +102,9 @@ module.exports = React.createClass({
 
         /* is this the focussed event */
         isSelectedEvent: React.PropTypes.bool,
+
+        /* callback called when images in events are loaded */
+        onImageLoad: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -323,7 +326,8 @@ module.exports = React.createClass({
                 { sender }
                 <div className="mx_EventTile_line">
                     <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights}
-                          highlightLink={this.props.highlightLink}/>
+                          highlightLink={this.props.highlightLink}
+                          onImageLoad={this.props.onImageLoad} />
                 </div>
             </div>
         );

src/components/views/rooms/SearchResultTile.js

@@ -31,6 +31,8 @@ module.exports = React.createClass({
 
         // href for the highlights in this result
         resultLink: React.PropTypes.string,
+
+        onImageLoad: React.PropTypes.func,
     },
 
     render: function() {
@@ -53,7 +55,8 @@ module.exports = React.createClass({
             }
             if (EventTile.haveTileForEvent(ev)) {
                 ret.push(<EventTile key={eventId+"+"+j} mxEvent={ev} contextual={contextual} highlights={highlights}
-                          highlightLink={this.props.resultLink}/>);
+                          highlightLink={this.props.resultLink}
+                          onImageLoad={this.props.onImageLoad} />);
             }
         }
         return (