Some fixes with IntersectionObserver
This commit is contained in:
parent
595915fefd
commit
207ab28b92
@ -116,7 +116,11 @@ export default {
|
|||||||
"channel.messages"() {
|
"channel.messages"() {
|
||||||
const el = this.$refs.chat;
|
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;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -126,6 +130,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.$nextTick(() => {
|
||||||
if (!this.$refs.chat) {
|
if (!this.$refs.chat) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -136,14 +141,15 @@ export default {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
|
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
if (this.historyObserver) {
|
if (this.historyObserver) {
|
||||||
this.historyObserver.observe(this.$refs.loadMoreButton);
|
this.historyObserver.observe(this.$refs.loadMoreButton);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
if (this.historyObserver) {
|
if (this.historyObserver) {
|
||||||
|
@ -2,65 +2,104 @@
|
|||||||
<div class="preview">
|
<div class="preview">
|
||||||
<div :class="['toggle-content', 'toggle-type-' + link.type, {show: link.shown}]">
|
<div :class="['toggle-content', 'toggle-type-' + link.type, {show: link.shown}]">
|
||||||
<template v-if="link.type === 'link'">
|
<template v-if="link.type === 'link'">
|
||||||
<a v-if="link.thumb" class="toggle-thumbnail" :href="link.link" target="_blank" rel="noopener">
|
<a
|
||||||
<img :src="link.thumb" decoding="async" alt="" class="thumb">
|
v-if="link.thumb"
|
||||||
|
:href="link.link"
|
||||||
|
class="toggle-thumbnail"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener">
|
||||||
|
<img
|
||||||
|
:src="link.thumb"
|
||||||
|
decoding="async"
|
||||||
|
alt=""
|
||||||
|
class="thumb">
|
||||||
</a>
|
</a>
|
||||||
<div class="toggle-text">
|
<div class="toggle-text">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="overflowable">
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="more"
|
<button
|
||||||
|
class="more"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-label="More"
|
aria-label="More"
|
||||||
data-closed-text="More"
|
data-closed-text="More"
|
||||||
data-opened-text="Less"
|
data-opened-text="Less"
|
||||||
>
|
>
|
||||||
<span class="more-caret"></span>
|
<span class="more-caret"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="body overflowable">
|
<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>
|
</div>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="link.type === 'image'">
|
<template v-else-if="link.type === 'image'">
|
||||||
<a class="toggle-thumbnail" :href="link.link" target="_blank" rel="noopener">
|
<a
|
||||||
<img :src="link.thumb" decoding="async" alt="">
|
:href="link.link"
|
||||||
|
class="toggle-thumbnail"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener">
|
||||||
|
<img
|
||||||
|
:src="link.thumb"
|
||||||
|
decoding="async"
|
||||||
|
alt="">
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="link.type === 'video'">
|
<template v-else-if="link.type === 'video'">
|
||||||
<video preload="metadata" controls>
|
<video
|
||||||
<source :src="link.media" :type="link.mediaType">
|
preload="metadata"
|
||||||
|
controls>
|
||||||
|
<source
|
||||||
|
:src="link.media"
|
||||||
|
:type="link.mediaType">
|
||||||
</video>
|
</video>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="link.type === 'audio'">
|
<template v-else-if="link.type === 'audio'">
|
||||||
<audio controls preload="metadata">
|
<audio
|
||||||
<source :src="link.media" :type="link.mediaType">
|
controls
|
||||||
|
preload="metadata">
|
||||||
|
<source
|
||||||
|
:src="link.media"
|
||||||
|
:type="link.mediaType">
|
||||||
</audio>
|
</audio>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="link.type === 'error'">
|
<template v-else-if="link.type === 'error'">
|
||||||
<em v-if="link.error === 'image-too-big'">
|
<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.
|
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.
|
to open it in a new window.
|
||||||
</em>
|
</em>
|
||||||
<template v-else-if="link.error === 'message'">
|
<template v-else-if="link.error === 'message'">
|
||||||
<div>
|
<div>
|
||||||
<em>
|
<em>
|
||||||
A preview could not be loaded.
|
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.
|
to open it in a new window.
|
||||||
</em>
|
</em>
|
||||||
<br>
|
<br>
|
||||||
<pre class="prefetch-error">{{link.message}}</pre>
|
<pre class="prefetch-error">{{ link.message }}</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="more"
|
<button
|
||||||
|
class="more"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
aria-label="More"
|
aria-label="More"
|
||||||
data-closed-text="More"
|
data-closed-text="More"
|
||||||
|
Loading…
Reference in New Issue
Block a user