From 207ab28b926923d8cc765b8a0d686709dcf3cb6c Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Tue, 10 Jul 2018 15:04:25 +0300
Subject: [PATCH] Some fixes with IntersectionObserver

---
 client/components/Chat.vue        | 34 ++++++++------
 client/components/LinkPreview.vue | 75 +++++++++++++++++++++++--------
 2 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 09332682..10c586dc 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -116,7 +116,11 @@ export default {
 		"channel.messages"() {
 			const el = this.$refs.chat;
 
-			if (!el || el.scrollHeight - el.scrollTop - el.offsetHeight > 30) {
+			if (!el) {
+				return;
+			}
+
+			if (el.scrollHeight - el.scrollTop - el.offsetHeight > 30) {
 				return;
 			}
 
@@ -126,24 +130,26 @@ export default {
 		},
 	},
 	created() {
-		if (!this.$refs.chat) {
-			return;
-		}
-
-		if (window.IntersectionObserver) {
-			this.historyObserver = new window.IntersectionObserver(loadMoreHistory, {
-				root: this.$refs.chat,
-			});
-		}
-
 		this.$nextTick(() => {
+			if (!this.$refs.chat) {
+				return;
+			}
+
+			if (window.IntersectionObserver) {
+				this.historyObserver = new window.IntersectionObserver(loadMoreHistory, {
+					root: this.$refs.chat,
+				});
+			}
+
 			this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
 		});
 	},
 	mounted() {
-		if (this.historyObserver) {
-			this.historyObserver.observe(this.$refs.loadMoreButton);
-		}
+		this.$nextTick(() => {
+			if (this.historyObserver) {
+				this.historyObserver.observe(this.$refs.loadMoreButton);
+			}
+		});
 	},
 	destroyed() {
 		if (this.historyObserver) {
diff --git a/client/components/LinkPreview.vue b/client/components/LinkPreview.vue
index 9281cb66..9beaa47d 100644
--- a/client/components/LinkPreview.vue
+++ b/client/components/LinkPreview.vue
@@ -2,65 +2,104 @@
 	<div class="preview">
 		<div :class="['toggle-content', 'toggle-type-' + link.type, {show: link.shown}]">
 			<template v-if="link.type === 'link'">
-				<a v-if="link.thumb" class="toggle-thumbnail" :href="link.link" target="_blank" rel="noopener">
-					<img :src="link.thumb" decoding="async" alt="" class="thumb">
+				<a
+					v-if="link.thumb"
+					:href="link.link"
+					class="toggle-thumbnail"
+					target="_blank"
+					rel="noopener">
+					<img
+						:src="link.thumb"
+						decoding="async"
+						alt=""
+						class="thumb">
 				</a>
 				<div class="toggle-text">
 					<div class="head">
 						<div class="overflowable">
-							<a :href="link.link" target="_blank" rel="noopener" :title="link.head">{{link.head}}</a>
+							<a
+								:href="link.link"
+								:title="link.head"
+								target="_blank"
+								rel="noopener">{{ link.head }}</a>
 						</div>
 
-						<button class="more"
+						<button
+							class="more"
 							aria-expanded="false"
 							aria-label="More"
 							data-closed-text="More"
 							data-opened-text="Less"
 						>
-							<span class="more-caret"></span>
+							<span class="more-caret"/>
 						</button>
 					</div>
 
 					<div class="body overflowable">
-						<a :href="link.link" target="_blank" rel="noopener" :title="link.body">{{link.body}}</a>
+						<a
+							:href="link.link"
+							:title="link.body"
+							target="_blank"
+							rel="noopener">{{ link.body }}</a>
 					</div>
-					</a>
 				</div>
 			</template>
 			<template v-else-if="link.type === 'image'">
-				<a class="toggle-thumbnail" :href="link.link" target="_blank" rel="noopener">
-					<img :src="link.thumb" decoding="async" alt="">
+				<a
+					:href="link.link"
+					class="toggle-thumbnail"
+					target="_blank"
+					rel="noopener">
+					<img
+						:src="link.thumb"
+						decoding="async"
+						alt="">
 				</a>
 			</template>
 			<template v-else-if="link.type === 'video'">
-				<video preload="metadata" controls>
-					<source :src="link.media" :type="link.mediaType">
+				<video
+					preload="metadata"
+					controls>
+					<source
+						:src="link.media"
+						:type="link.mediaType">
 				</video>
 			</template>
 			<template v-else-if="link.type === 'audio'">
-				<audio controls preload="metadata">
-					<source :src="link.media" :type="link.mediaType">
+				<audio
+					controls
+					preload="metadata">
+					<source
+						:src="link.media"
+						:type="link.mediaType">
 				</audio>
 			</template>
 			<template v-else-if="link.type === 'error'">
 				<em v-if="link.error === 'image-too-big'">
-					This image is larger than {{maxSize | friendlysize}} and cannot be
+					This image is larger than {{ link.maxSize | friendlysize }} and cannot be
 					previewed.
-					<a :href="link.link" target="_blank" rel="noopener">Click here</a>
+					<a
+						:href="link.link"
+						target="_blank"
+						rel="noopener">Click here</a>
 					to open it in a new window.
 				</em>
 				<template v-else-if="link.error === 'message'">
 					<div>
 						<em>
 							A preview could not be loaded.
-							<a :href="link.link" target="_blank" rel="noopener">Click here</a>
+							<a
+								:href="link.link"
+								target="_blank"
+								rel="noopener">Click here</a>
 							to open it in a new window.
 						</em>
 						<br>
-						<pre class="prefetch-error">{{link.message}}</pre>
+						<pre class="prefetch-error">{{ link.message }}</pre>
 					</div>
 
-					<button class="more"
+					<button
+						class="more"
 						aria-expanded="false"
 						aria-label="More"
 						data-closed-text="More"