From 989e6c9eed2e4bb22a448faf6f3bc9cb7ca82e29 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Fri, 3 Jan 2025 09:43:00 +0000
Subject: [PATCH] attach event handler only if posts are present and fix layout
bug, fixes #5063
Closes #5063
Merge request studip/studip!3786
---
resources/vue/components/blubber/Thread.vue | 56 ++++++++++++++-------
1 file changed, 37 insertions(+), 19 deletions(-)
diff --git a/resources/vue/components/blubber/Thread.vue b/resources/vue/components/blubber/Thread.vue
index 87bb13f2fe9..fc3e75bc3d5 100644
--- a/resources/vue/components/blubber/Thread.vue
+++ b/resources/vue/components/blubber/Thread.vue
@@ -213,33 +213,46 @@ export default {
},
mounted() {
this.handleDebouncedScroll = _.debounce(this.handleScroll, 100);
- this.$refs.scrollable.addEventListener('scroll', this.handleDebouncedScroll);
-
- // when everything is initialized
- this.$nextTick(() => {
- if (this.comments.length > 0) {
- this.scrollDown();
- }
-
- const memory = getBlubberMemory(this.thread);
- if (memory) {
- this.composerText = memory;
- }
- });
},
beforeUnmount() {
this.$refs.scrollable.removeEventListener('scroll', this.handleDebouncedScroll);
},
beforeUpdate() {
- const { scrollHeight, scrollTop } = this.$refs.scrollable;
- this.scrollPosition = { scrollHeight, scrollTop };
+ if (!this.emptyBlubber) {
+ const { scrollHeight, scrollTop } = this.$refs.scrollable;
+ this.scrollPosition = { scrollHeight, scrollTop };
+ }
},
updated() {
- // maintain scroll position when loading older comments
- const newScrollTop =
- this.$refs.scrollable.scrollHeight - this.scrollPosition.scrollHeight + this.scrollPosition.scrollTop;
- this.$refs.scrollable.scrollTo(0, newScrollTop);
+ if (!this.emptyBlubber) {
+ // maintain scroll position when loading older comments
+ const newScrollTop =
+ this.$refs.scrollable.scrollHeight - this.scrollPosition.scrollHeight + this.scrollPosition.scrollTop;
+ this.$refs.scrollable.scrollTo(0, newScrollTop);
+ }
},
+ watch: {
+ emptyBlubber: {
+ handler(isEmpty) {
+ if (!isEmpty) {
+ this.$refs.scrollable.addEventListener('scroll', this.handleDebouncedScroll);
+
+ // when everything is initialized
+ this.$nextTick(() => {
+ if (this.comments.length > 0) {
+ this.scrollDown();
+ }
+
+ const memory = getBlubberMemory(this.thread);
+ if (memory) {
+ this.composerText = memory;
+ }
+ });
+ }
+ },
+ immediate: true,
+ }
+ }
};
function clearBlubberMemory(thread) {
@@ -258,3 +271,8 @@ function setBlubberMemory(thread, memory) {
}
}
</script>
+<style lang="scss" scoped>
+.empty_blubber_background {
+ flex: 1;
+}
+</style>
--
GitLab