keeping scroll position on vertical resize works now

src/version.js

@@ -1,3 +1,3 @@
 // This is a generated file. Don't edit.
 
-export const PACKAGE_VERSION = "0.15.9";
+export const PACKAGE_VERSION = "0.15.10-rc1";

src/views/messages-view.jsx

@@ -55,7 +55,7 @@ class MessagesView extends React.Component {
     this.propsChange = this.propsChange.bind(this);
     this.leave = this.leave.bind(this);
     this.handleScrollReference = this.handleScrollReference.bind(this);
-    this.fetchMoreMessages = this.fetchMoreMessages.bind(this);
+    this.handleScrollEvent = this.handleScrollEvent.bind(this);
     this.handleDescChange = this.handleDescChange.bind(this);
     this.handleSubsUpdated = this.handleSubsUpdated.bind(this);
     this.handleNewMessage = this.handleNewMessage.bind(this);
@@ -69,26 +69,29 @@ class MessagesView extends React.Component {
     this.handleBackNavigation = this.handleBackNavigation.bind(this);
   }
 
-  // Scroll last message into view on component update e.g. on message received.
+  // Scroll last message into view on component update e.g. on message received
+  // or vertical shrinking.
   componentDidUpdate(prevProps, prevState) {
-    if (this.messagesScroller &&
-      (prevState.title != this.state.title ||
-        prevState.messages.length != this.state.messages.length)) {
-      this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
+    if (this.messagesScroller) {
+      if (prevState.title != this.state.title || prevState.messages.length != this.state.messages.length) {
+        this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
+      } else if (prevProps.viewportHeight > this.props.viewportHeight) {
+        this.messagesScroller.scrollTop += prevProps.viewportHeight - this.props.viewportHeight;
+      }
     }
   }
 
   componentDidMount() {
     this.propsChange(this.props);
     if (this.messagesScroller) {
-      this.messagesScroller.addEventListener('scroll', this.fetchMoreMessages);
+      this.messagesScroller.addEventListener('scroll', this.handleScrollEvent);
     }
   }
 
   componentWillUnmount() {
     this.leave(this.state.topic);
     if (this.messagesScroller) {
-      this.messagesScroller.removeEventListener('scroll', this.fetchMoreMessages);
+      this.messagesScroller.removeEventListener('scroll', this.handleScrollEvent);
     }
   }
 
@@ -156,10 +159,6 @@ class MessagesView extends React.Component {
       // The user switched to the new topic before the timer for
       // the previous topic has triggered, kill it.
       this.props.readTimerHandler(null);
-    } else if (props.viewportHeight < this.props.viewportHeight) {
-      console.log("Viewport shrunk vertically by", -props.viewportHeight + this.props.viewportHeight);
-      let scrollPosition = Math.max(0, this.state.scrollPosition - props.viewportHeight + this.props.viewportHeight);
-      this.setState({scrollPosition: scrollPosition});
     }
 
     this.setState({
@@ -231,18 +230,19 @@ class MessagesView extends React.Component {
 
   handleScrollReference(node) {
     if (node) {
-      node.addEventListener('scroll', this.fetchMoreMessages);
+      node.addEventListener('scroll', this.handleScrollEvent);
       this.messagesScroller = node;
     }
   }
 
   // Get older messages
-  fetchMoreMessages(event) {
+  handleScrollEvent(event) {
+    this.setState({scrollPosition: event.target.scrollHeight - event.target.scrollTop});
     if (event.target.scrollTop <= 0) {
-      let newState = {scrollPosition: event.target.scrollHeight - event.target.scrollTop};
       this.setState((prevState, props) => {
+        let newState = {};
         if (!prevState.fetchingMessages) {
-          var topic = this.props.tinode.getTopic(this.state.topic);
+          let topic = this.props.tinode.getTopic(this.state.topic);
           if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) {
             newState.fetchingMessages = true;
             topic.getMessagesPage(MESSAGES_PAGE).catch((err) => {

umd/index.dev.js

@@ -809,7 +809,7 @@ module.exports = {"en":{"contacts_not_found":"You have no chats<br />¯∖_(ツ)
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PACKAGE_VERSION", function() { return PACKAGE_VERSION; });
-var PACKAGE_VERSION = "0.15.9";
+var PACKAGE_VERSION = "0.15.10-rc1";
 
 /***/ }),
 
@@ -2563,7 +2563,7 @@ var MessagesView = function (_React$Component) {
     _this.propsChange = _this.propsChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.leave = _this.leave.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.handleScrollReference = _this.handleScrollReference.bind(_assertThisInitialized(_assertThisInitialized(_this)));
-    _this.fetchMoreMessages = _this.fetchMoreMessages.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleScrollEvent = _this.handleScrollEvent.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.handleDescChange = _this.handleDescChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.handleSubsUpdated = _this.handleSubsUpdated.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.handleNewMessage = _this.handleNewMessage.bind(_assertThisInitialized(_assertThisInitialized(_this)));
@@ -2581,8 +2581,12 @@ var MessagesView = function (_React$Component) {
   _createClass(MessagesView, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (this.messagesScroller && (prevState.title != this.state.title || prevState.messages.length != this.state.messages.length)) {
-        this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
+      if (this.messagesScroller) {
+        if (prevState.title != this.state.title || prevState.messages.length != this.state.messages.length) {
+          this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
+        } else if (prevProps.viewportHeight > this.props.viewportHeight) {
+          this.messagesScroller.scrollTop += prevProps.viewportHeight - this.props.viewportHeight;
+        }
       }
     }
   }, {
@@ -2591,7 +2595,7 @@ var MessagesView = function (_React$Component) {
       this.propsChange(this.props);
 
       if (this.messagesScroller) {
-        this.messagesScroller.addEventListener('scroll', this.fetchMoreMessages);
+        this.messagesScroller.addEventListener('scroll', this.handleScrollEvent);
       }
     }
   }, {
@@ -2600,7 +2604,7 @@ var MessagesView = function (_React$Component) {
       this.leave(this.state.topic);
 
       if (this.messagesScroller) {
-        this.messagesScroller.removeEventListener('scroll', this.fetchMoreMessages);
+        this.messagesScroller.removeEventListener('scroll', this.handleScrollEvent);
       }
     }
   }, {
@@ -2743,20 +2747,23 @@ var MessagesView = function (_React$Component) {
     key: "handleScrollReference",
     value: function handleScrollReference(node) {
       if (node) {
-        node.addEventListener('scroll', this.fetchMoreMessages);
+        node.addEventListener('scroll', this.handleScrollEvent);
         this.messagesScroller = node;
       }
     }
   }, {
-    key: "fetchMoreMessages",
-    value: function fetchMoreMessages(event) {
+    key: "handleScrollEvent",
+    value: function handleScrollEvent(event) {
       var _this4 = this;
 
+      this.setState({
+        scrollPosition: event.target.scrollHeight - event.target.scrollTop
+      });
+
       if (event.target.scrollTop <= 0) {
-        var newState = {
-          scrollPosition: event.target.scrollHeight - event.target.scrollTop
-        };
         this.setState(function (prevState, props) {
+          var newState = {};
+
           if (!prevState.fetchingMessages) {
             var topic = _this4.props.tinode.getTopic(_this4.state.topic);
 
@@ -4016,7 +4023,8 @@ var TinodeWeb = function (_React$Component) {
       window.addEventListener('hashchange', this.handleHashRoute);
       document.addEventListener('visibilitychange', this.handleVisibilityEvent);
       this.setState({
-        viewportWidth: document.documentElement.clientWidth
+        viewportWidth: document.documentElement.clientWidth,
+        viewportHeight: document.documentElement.clientHeight
       });
       this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport);
       this.tinode.onConnect = this.handleConnected;
@@ -4085,7 +4093,8 @@ var TinodeWeb = function (_React$Component) {
     value: function handleResize() {
       var mobile = document.documentElement.clientWidth <= _config_js__WEBPACK_IMPORTED_MODULE_10__["MEDIA_BREAKPOINT"];
       this.setState({
-        viewportWidth: document.documentElement.clientWidth
+        viewportWidth: document.documentElement.clientWidth,
+        viewportHeight: document.documentElement.clientHeight
       });
 
       if (this.state.displayMobile != mobile) {
@@ -5114,6 +5123,7 @@ var TinodeWeb = function (_React$Component) {
         acs: this.state.topicSelectedAcs,
         displayMobile: this.state.displayMobile,
         viewportWidth: this.state.viewportWidth,
+        viewportHeight: this.state.viewportHeight,
         hideSelf: this.state.displayMobile && (this.state.mobilePanel !== 'topic-view' || this.state.showInfoPanel),
         topic: this.state.topicSelected,
         myUserId: this.state.myUserId,