Only show more button on link previews when needed.

This commit is contained in:
Richard Lewis 2018-08-31 21:15:46 +03:00 committed by Pavel Djundik
parent 26dc37033c
commit 8dff4a9478
3 changed files with 31 additions and 10 deletions

View File

@ -93,6 +93,8 @@
</template> </template>
<script> <script>
import {throttle} from "lodash";
import NetworkList from "./NetworkList.vue"; import NetworkList from "./NetworkList.vue";
import Chat from "./Chat.vue"; import Chat from "./Chat.vue";
@ -110,5 +112,16 @@ export default {
methods: { methods: {
isPublic: () => document.body.classList.contains("public"), isPublic: () => document.body.classList.contains("public"),
}, },
mounted() {
// Make a single throttled resize listener available to all components
this.debouncedResize = throttle(() => {
this.$root.$emit('resize');
}, 100);
window.addEventListener("resize", this.debouncedResize, {passive: true});
},
beforeDestroy() {
window.removeEventListener("resize", this.debouncedResize);
},
}; };
</script> </script>

View File

@ -147,12 +147,16 @@ export default {
return; return;
} }
this.resizeListener = () => {this.handleResize()};
this.$root.$on('resize', this.resizeListener);
this.onPreviewUpdate(); this.onPreviewUpdate();
}, },
destroyed() { destroyed() {
// Let this preview go through load/canplay events again, // Let this preview go through load/canplay events again,
// Otherwise the browser can cause a resize on video elements // Otherwise the browser can cause a resize on video elements
this.link.canDisplay = false; this.link.canDisplay = false;
this.$root.$off('resize', this.resizeListener);
}, },
methods: { methods: {
onPreviewUpdate() { onPreviewUpdate() {
@ -176,13 +180,7 @@ export default {
return; return;
} }
this.$nextTick(() => { this.handleResize();
if (!this.$refs.content) {
return;
}
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
});
}, },
onThumbnailError() { onThumbnailError() {
// If thumbnail fails to load, hide it and show the preview without it // If thumbnail fails to load, hide it and show the preview without it
@ -193,6 +191,15 @@ export default {
this.isContentShown = !this.isContentShown; this.isContentShown = !this.isContentShown;
this.keepScrollPosition(); this.keepScrollPosition();
}, },
handleResize() {
this.$nextTick(() => {
if (!this.$refs.content) {
return;
}
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
});
},
}, },
}; };
</script> </script>

View File

@ -183,12 +183,13 @@ export default {
}); });
}, },
mounted() { mounted() {
this.debouncedResize = throttle(this.handleResize, 100);
this.debouncedScroll = throttle(this.handleScroll, 100); this.debouncedScroll = throttle(this.handleScroll, 100);
window.addEventListener("resize", this.debouncedResize, {passive: true});
this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true}); this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true});
this.resizeListener = () => {this.handleResize()}
this.$root.$on('resize', this.resizeListener);
this.$nextTick(() => { this.$nextTick(() => {
if (this.historyObserver) { if (this.historyObserver) {
this.historyObserver.observe(this.$refs.loadMoreButton); this.historyObserver.observe(this.$refs.loadMoreButton);
@ -196,7 +197,7 @@ export default {
}); });
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.debouncedResize); this.$root.$off('resize', this.resizeListener);
this.$refs.chat.removeEventListener("scroll", this.debouncedScroll); this.$refs.chat.removeEventListener("scroll", this.debouncedScroll);
}, },
destroyed() { destroyed() {