From d5dbd194886ff3a86ed91197a82120b69104bf3b Mon Sep 17 00:00:00 2001 From: supertiger1234 Date: Mon, 19 Aug 2019 10:20:50 +0100 Subject: [PATCH] scroll up to unload messages --- package-lock.json | 52 ++++++++--- src/components/app/MessageLogs.vue | 100 +++++++++++++++++----- src/components/app/MessagePanel.vue | 7 +- src/components/app/Tabs/DirectMessage.vue | 2 +- src/components/app/Tabs/Servers.vue | 2 +- src/services/messagesService.js | 4 +- src/store/modules/messageModule.js | 16 +++- src/utils/changelog.js | 12 ++- 8 files changed, 152 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 01485d4..b562de0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2792,7 +2792,8 @@ "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=", - "dev": true + "dev": true, + "optional": true }, "coa": { "version": "2.0.2", @@ -5026,7 +5027,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5047,12 +5049,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5067,17 +5071,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5194,7 +5201,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5206,6 +5214,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5220,6 +5229,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5227,12 +5237,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5251,6 +5263,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5331,7 +5344,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5343,6 +5357,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5428,7 +5443,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5464,6 +5480,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5483,6 +5500,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5526,12 +5544,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -6934,6 +6954,7 @@ "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", "dev": true, + "optional": true, "requires": { "prelude-ls": "~1.1.2", "type-check": "~0.3.2" @@ -9064,7 +9085,8 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", - "dev": true + "dev": true, + "optional": true }, "prepend-http": { "version": "2.0.0", @@ -9783,7 +9805,8 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz", "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=", - "dev": true + "dev": true, + "optional": true }, "rx-lite-aggregates": { "version": "4.0.8", @@ -11336,6 +11359,7 @@ "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", "dev": true, + "optional": true, "requires": { "prelude-ls": "~1.1.2" } diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue index ee7174b..b47d783 100644 --- a/src/components/app/MessageLogs.vue +++ b/src/components/app/MessageLogs.vue @@ -1,9 +1,9 @@ @@ -51,9 +54,14 @@ export default { scrolledDown: true, scrolledTop: false, - //load more messages - loadingMore: false, - noMoreLoadMore: false, + loadMoreTop: { + show: true, + loading: false + }, + loadMoreBottom: { + show: false, + loading: false, + }, selectedChannelID: null, currentScrollTopPos: null }; @@ -73,40 +81,89 @@ export default { if (!element) return; element.scrollTop = pos || element.scrollHeight; }, + unloadTopMessages(){ + if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100) + this.$store.dispatch('unloadTopMessages', {channelID: this.selectedChannelID}); + }, + unloadBottomMessages(){ + if (this.selectedChannelMessages && this.selectedChannelMessages.length >= 100) + this.$store.dispatch('unloadBottomMessages', {channelID: this.selectedChannelID}); + }, onResize(dimentions) { this.scrollDown(); }, async loadMoreMessages() { + if (this.loadMoreTop.loading) return; const msgLogs = this.$refs['msg-logs']; const scrollTop = msgLogs.scrollTop; const scrollHeight = msgLogs.scrollHeight; const continueMessageID = this.selectedChannelMessages[0].messageID; - this.loadingMore = true + this.$set(this.loadMoreTop, 'loading', true); const {ok, result, error} = await messagesService.get(this.selectedChannelID, continueMessageID) if (ok) { if (!result.data.messages.length) { - this.loadingMore = false; - this.noMoreLoadMore = true; + this.$set(this.loadMoreTop, 'loading', false); + this.$set(this.loadMoreTop, 'show', false); return; } this.$store.dispatch('addMessages', result.data.messages) this.$nextTick(_ => { - this.loadingMore = false; + this.$set(this.loadMoreTop, 'loading', false); msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight; }) } }, + async loadBottomMessages() { + + if (this.loadMoreBottom.loading) return; + const msgLogs = this.$refs['msg-logs']; + const scrollTop = msgLogs.scrollTop; + const scrollHeight = msgLogs.scrollHeight; + + + const beforeMessageID = this.selectedChannelMessages[this.selectedChannelMessages.length - 1].messageID; + + this.$set(this.loadMoreBottom, 'loading', true); + const {ok, result, error} = await messagesService.get(this.selectedChannelID, null, beforeMessageID) + if (ok) { + if (!result.data.messages.length) { + this.$set(this.loadMoreBottom, 'loading', false); + this.$set(this.loadMoreBottom, 'show', false); + return; + } + this.$store.dispatch('addMessagesBefore', result.data.messages) + + this.$nextTick(_ => { + + this.$set(this.loadMoreBottom, 'loading', false); + this.scrolledDown = false; + msgLogs.scrollTop = scrollTop + this.$set(this.loadMoreBottom, 'show', true); + }) + } + }, scrolledUpEvent() { - this.loadMoreMessages(); + const msgLogs = this.$refs['msg-logs']; + const scrollTop = msgLogs.scrollTop; + const scrollHeight = msgLogs.scrollHeight; + + this.unloadBottomMessages(); + this.$set(this.loadMoreBottom, 'show', true); + + this.$nextTick(_ => { + msgLogs.scrollTop = msgLogs.scrollHeight - scrollHeight; + if (this.loadMoreTop.show) + this.loadMoreMessages(); + }) }, scrolledDownEvent(){ - this.noMoreLoadMore = false; this.unloadTopMessages() - }, - unloadTopMessages(){ - if (this.selectedChannelMessages && this.selectedChannelMessages.length) - this.$store.dispatch('unloadTopMessages', {channelID: this.selectedChannelID}); + this.$nextTick(_ => { + if (this.loadMoreBottom.show) + this.loadBottomMessages(); + this.$set(this.loadMoreTop, 'show', true); + }) }, backToBottomEvent() { this.scrollDown({force: true}); @@ -130,14 +187,17 @@ export default { beforeDestroy() { this.$store.dispatch("setEditMessage", null); - this.$store.dispatch('changeScrollPosition',{ channelID: this.selectedChannelID, pos: this.currentScrollTopPos }); + this.$store.dispatch('changeScrollPosition',{ + channelID: this.selectedChannelID, + pos: !this.scrolledDown ? this.currentScrollTopPos : null + }); bus.$off('backToBottom', this.backToBottomEvent); bus.$off('scrollDown', this.scrollDown) }, watch: { selectedChannelMessages(newMessages, oldMessages){ - this.noMoreLoadMore = false; + this.$set(this.loadMoreTop, 'show', true); const msgLogs = this.$refs['msg-logs']; this.$nextTick(function () { this.scrollDown(); diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue index ac4e718..bdc55a3 100644 --- a/src/components/app/MessagePanel.vue +++ b/src/components/app/MessagePanel.vue @@ -9,9 +9,9 @@ -
-
chat
-
Select a person to message!
+
+
{{type === 0 ? 'chat' : type === 1 ? 'forum' : 'question'}}
+
{{type === 0 ? 'Select a person to message!' : type === 1 ?'Selected a server!' : "wot"}}
@@ -86,6 +86,7 @@ const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue"); const EditPanel = () => import("@/components/app/EditPanel.vue"); export default { + props: ['type'], // type 0: dm; type 1: server components: { Spinner, TypingStatus, diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue index 76fc2f4..1470868 100644 --- a/src/components/app/Tabs/DirectMessage.vue +++ b/src/components/app/Tabs/DirectMessage.vue @@ -7,7 +7,7 @@ class="left-panel" /> - +
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue index 23f6929..1353a7d 100644 --- a/src/components/app/Tabs/Servers.vue +++ b/src/components/app/Tabs/Servers.vue @@ -7,7 +7,7 @@ class="left-panel" /> - +