Fix regression with new message loading

Event listeners never got registered because of timing issue (MatrixClient was not ready yet). Issue #85.

src/assets/css/join.scss

@@ -42,7 +42,7 @@
     .join-user-info {
         display: flex;
         flex-wrap: nowrap;
-        max-width: 300px;
+        max-width: 500px;
     }
 }
 

src/components/Chat.vue

@@ -408,8 +408,6 @@ export default {
   mounted() {
     const container = this.$refs.chatContainer;
     this.scrollPosition = new ScrollPosition(container);
-    this.$matrix.on("Room.timeline", this.onEvent);
-    this.$matrix.on("RoomMember.typing", this.onUserTyping);
     this.chatContainerSize = this.$refs.chatContainerResizer.$el.clientHeight;
   },
 
@@ -513,6 +511,9 @@ export default {
         );
 
         // Clear old events
+        this.$matrix.off("Room.timeline", this.onEvent);
+        this.$matrix.off("RoomMember.typing", this.onUserTyping);
+
         this.events = [];
         this.timelineWindow = null;
         this.typingMembers = [];
@@ -526,7 +527,11 @@ export default {
           // Public room?
           if (this.roomId && this.roomId.startsWith("#")) {
             this.onRoomNotJoined();
+          } else if (this.roomId) {
+            this.onRoomNotJoined(); // Private room we are not joined to. What to do? We redirect to join
+            // screen, maybe the user has an invite already?
           }
+          this.initialLoadDone = true;
           return; // no room
         }
 
@@ -543,9 +548,13 @@ export default {
 
   methods: {
     onRoomJoined(initialEventId) {
+      // Listen to events
+      this.$matrix.on("Room.timeline", this.onEvent);
+      this.$matrix.on("RoomMember.typing", this.onUserTyping);
+
       console.log("Read up to " + initialEventId);
 
-      initialEventId = null;
+      //initialEventId = null;
 
       this.timelineWindow = new TimelineWindow(
         this.$matrix.matrixClient,

src/plugins/utils.js

@@ -349,27 +349,59 @@ class Util {
     }
 
     getFirstVisibleElement(parentNode) {
-        const y = parentNode.scrollTop;
+        const visible = this.findVisibleElements(parentNode);
-        return this.getElementAtY(parentNode, y);
+        if (visible && visible.length > 0) {
+            return visible[0];
+        }
+        return null;
     }
 
     getLastVisibleElement(parentNode) {
-        const y = parentNode.scrollTop + parentNode.clientHeight;
+        const visible = this.findVisibleElements(parentNode);
-        return this.getElementAtY(parentNode, y);
+        if (visible && visible.length > 0) {
+            return visible[visible.length - 1];
+        }
+        return null;
     }
 
-    getElementAtY(parentNode, y) {
+    findVisibleElements(parentNode) {
+        const middle = this.findOneVisibleElement(parentNode);
+        if (middle) {
+            var nodes = [parentNode.children[middle]];
+            var i = middle - 1;
+                while (i >= 0 && this.isChildVisible(parentNode, parentNode.children[i])) {
+                    nodes.splice(0,0,parentNode.children[i]);
+                    i-=1;
+                }
+            i = middle + 1;
+            while (i < parentNode.children.length && this.isChildVisible(parentNode, parentNode.children[i])) {
+                nodes.push(parentNode.children[i]);
+                i+=1;
+            }
+            return nodes;
+        }
+        return null; // No visible found
+    }
+
+    isChildVisible(parentNode, childNode) {
+        let top = parentNode.scrollTop;
+        let bottom = top + parentNode.clientHeight;
+        const childTop = childNode.offsetTop;
+        const childBottom = childTop + childNode.clientHeight;
+        return ((childTop >= top && childTop < bottom) || (childBottom > top && childBottom <= bottom));
+    }
+
+    findOneVisibleElement(parentNode) {
         let start = 0;
         let end = parentNode.children.length - 1;
-
+        let top = parentNode.scrollTop;
         while (start <= end) {
             let middle = Math.floor((start + end) / 2);
-            const yMiddleTop = parentNode.children[middle].offsetTop;
+            let childNode = parentNode.children[middle];
-            const yMiddleBottom = yMiddleTop + parentNode.children[middle].clientHeight;
+            if (this.isChildVisible(parentNode, childNode)) {
-            if (yMiddleTop <= y && yMiddleBottom >= y) {
                 // found the key
-                return parentNode.children[middle];
+                return middle;
-            } else if (yMiddleBottom < y) {
+            } else if (childNode.offsetTop < top) {
                 // continue searching to the right
                 start = middle + 1;
             } else {