supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Some fixes with IntersectionObserver

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-10 15:04:25 +03:00 committed by Pavel Djundik
parent 595915fefd
commit 207ab28b92
2 changed files with 77 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/components/Chat.vue
View File

@ -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) {

75
client/components/LinkPreview.vue
View File

@ -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"