diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 927449750c..e35a39a107 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -123,6 +123,7 @@ const FilePanel = React.createClass({
timelineSet={this.state.timelineSet}
showUrlPreview = {false}
tileShape="file_grid"
+ resizeNotifier={this.props.resizeNotifier}
empty={_t('There are no visible files in this room')}
/>
);
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index c6c1be67ec..5267dba715 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -173,6 +173,7 @@ const LoggedInView = React.createClass({
},
onResized: (size) => {
window.localStorage.setItem("mx_lhs_size", '' + size);
+ this.props.resizeNotifier.notifyLeftHandleResized();
},
};
const resizer = new Resizer(
@@ -448,6 +449,7 @@ const LoggedInView = React.createClass({
disabled={this.props.middleDisabled}
collapsedRhs={this.props.collapsedRhs}
ConferenceHandler={this.props.ConferenceHandler}
+ resizeNotifier={this.props.resizeNotifier}
/>;
break;
diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.js
index 0427130eea..c0bf74d02c 100644
--- a/src/components/structures/MainSplit.js
+++ b/src/components/structures/MainSplit.js
@@ -27,6 +27,7 @@ export default class MainSplit extends React.Component {
_onResized(size) {
window.localStorage.setItem("mx_rhs_size", size);
+ this.props.resizeNotifier.notifyRightHandleResized();
}
_createResizer() {
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 2622a6bf93..a9b34c9058 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -48,6 +48,7 @@ import { _t, getCurrentLanguage } from '../../languageHandler';
import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
import { startAnyRegistrationFlow } from "../../Registration.js";
import { messageForSyncError } from '../../utils/ErrorUtils';
+import ResizeNotifier from "../../utils/ResizeNotifier";
const AutoDiscovery = Matrix.AutoDiscovery;
@@ -194,6 +195,7 @@ export default React.createClass({
hideToSRUsers: false,
syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
+ resizeNotifier: new ResizeNotifier(),
};
return s;
},
@@ -1661,6 +1663,7 @@ export default React.createClass({
dis.dispatch({ action: 'show_right_panel' });
}
+ this.state.resizeNotifier.notifyWindowResized();
this._windowWidth = window.innerWidth;
},
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index b1f88a6221..aec2f8cbe1 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -703,7 +703,8 @@ module.exports = React.createClass({
onFillRequest={this.props.onFillRequest}
onUnfillRequest={this.props.onUnfillRequest}
style={style}
- stickyBottom={this.props.stickyBottom}>
+ stickyBottom={this.props.stickyBottom}
+ resizeNotifier={this.props.resizeNotifier}>
{ topSpinner }
{ this._getEventTiles() }
{ whoIsTyping }
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 5c745b04cc..93cbff3233 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -193,7 +193,7 @@ export default class RightPanel extends React.Component {
} else if (this.state.phase === RightPanel.Phase.NotificationPanel) {
panel = <NotificationPanel />;
} else if (this.state.phase === RightPanel.Phase.FilePanel) {
- panel = <FilePanel roomId={this.props.roomId} />;
+ panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
}
const classes = classNames("mx_RightPanel", "mx_fadable", {
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index ae3a4b2bac..bb2c322b0a 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -392,7 +392,7 @@ module.exports = React.createClass({
this._updateConfCallNotification();
window.addEventListener('beforeunload', this.onPageUnload);
- window.addEventListener('resize', this.onResize);
+ this.props.resizeNotifier.on("middlePanelResized", this.onResize);
this.onResize();
document.addEventListener("keydown", this.onKeyDown);
@@ -472,7 +472,7 @@ module.exports = React.createClass({
}
window.removeEventListener('beforeunload', this.onPageUnload);
- window.removeEventListener('resize', this.onResize);
+ this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
document.removeEventListener("keydown", this.onKeyDown);
@@ -1838,6 +1838,7 @@ module.exports = React.createClass({
className="mx_RoomView_messagePanel"
membersLoaded={this.state.membersLoaded}
permalinkCreator={this.state.permalinkCreator}
+ resizeNotifier={this.props.resizeNotifier}
/>);
let topUnreadMessagesBar = null;
@@ -1870,7 +1871,7 @@ module.exports = React.createClass({
},
);
- const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} /> : undefined;
+ const rightPanel = this.state.room ? <RightPanel roomId={this.state.room.roomId} resizeNotifier={this.props.resizeNotifier} /> : undefined;
return (
<main className={"mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "")} ref="roomView">
@@ -1886,7 +1887,11 @@ module.exports = React.createClass({
onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
e2eStatus={this.state.e2eStatus}
/>
- <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
+ <MainSplit
+ panel={rightPanel}
+ collapsedRhs={this.props.collapsedRhs}
+ resizeNotifier={this.props.resizeNotifier}
+ >
<div className={fadableSectionClasses}>
{ auxPanel }
<div className="mx_RoomView_timeline">
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index cdb79686ad..799c88140e 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -149,6 +149,8 @@ module.exports = React.createClass({
componentWillMount: function() {
this._pendingFillRequests = {b: null, f: null};
+ this.props.resizeNotifier.on("middlePanelResized", this.onResize);
+
this.resetScrollState();
},
@@ -171,6 +173,7 @@ module.exports = React.createClass({
//
// (We could use isMounted(), but facebook have deprecated that.)
this.unmounted = true;
+ this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
},
onScroll: function(ev) {
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index f0feaf94c5..c983f904a0 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -1228,6 +1228,7 @@ var TimelinePanel = React.createClass({
alwaysShowTimestamps={this.state.alwaysShowTimestamps}
className={this.props.className}
tileShape={this.props.tileShape}
+ resizeNotifier={this.props.resizeNotifier}
/>
);
},
diff --git a/src/utils/ResizeNotifier.js b/src/utils/ResizeNotifier.js
new file mode 100644
index 0000000000..43578ebcaa
--- /dev/null
+++ b/src/utils/ResizeNotifier.js
@@ -0,0 +1,52 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+ * Fires when the middle panel has been resized.
+ * @event module:utils~ResizeNotifier#"middlePanelResized"
+ */
+import { EventEmitter } from "events";
+import { throttle } from "lodash";
+
+export default class ResizeNotifier extends EventEmitter {
+
+ constructor() {
+ super();
+ // with default options, will call fn once at first call, and then every x ms
+ // if there was another call in that timespan
+ this._throttledMiddlePanel = throttle(() => this.emit("middlePanelResized"), 200);
+ }
+
+ notifyBannersChanged() {
+ this.emit("middlePanelResized");
+ }
+
+ // can be called in quick succession
+ notifyLeftHandleResized() {
+ this._throttledMiddlePanel();
+ }
+
+ // can be called in quick succession
+ notifyRightHandleResized() {
+ this._throttledMiddlePanel();
+ }
+
+ // can be called in quick succession
+ notifyWindowResized() {
+ this._throttledMiddlePanel();
+ }
+}
+