diff --git a/src/assets/css/join.scss b/src/assets/css/join.scss index 4ded415..a52ebc6 100644 --- a/src/assets/css/join.scss +++ b/src/assets/css/join.scss @@ -42,7 +42,7 @@ .join-user-info { display: flex; flex-wrap: nowrap; - max-width: 300px; + max-width: 500px; } } diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 3563d7c..4c6ba0a 100644 --- a/src/components/Chat.vue +++ b/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, diff --git a/src/plugins/utils.js b/src/plugins/utils.js index 65e9f61..23ab97c 100644 --- a/src/plugins/utils.js +++ b/src/plugins/utils.js @@ -349,27 +349,59 @@ class Util { } getFirstVisibleElement(parentNode) { - const y = parentNode.scrollTop; - return this.getElementAtY(parentNode, y); + const visible = this.findVisibleElements(parentNode); + if (visible && visible.length > 0) { + return visible[0]; + } + return null; } getLastVisibleElement(parentNode) { - const y = parentNode.scrollTop + parentNode.clientHeight; - return this.getElementAtY(parentNode, y); + const visible = this.findVisibleElements(parentNode); + 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; - const yMiddleBottom = yMiddleTop + parentNode.children[middle].clientHeight; - if (yMiddleTop <= y && yMiddleBottom >= y) { + let childNode = parentNode.children[middle]; + if (this.isChildVisible(parentNode, childNode)) { // found the key - return parentNode.children[middle]; - } else if (yMiddleBottom < y) { + return middle; + } else if (childNode.offsetTop < top) { // continue searching to the right start = middle + 1; } else {