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

Some fixes with IntersectionObserver

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"() { "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,24 +130,26 @@ export default {
}, },
}, },
created() { created() {
if (!this.$refs.chat) {
return;
}
if (window.IntersectionObserver) {
this.historyObserver = new window.IntersectionObserver(loadMoreHistory, {
root: this.$refs.chat,
});
}
this.$nextTick(() => { 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; this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
}); });
}, },
mounted() { mounted() {
if (this.historyObserver) { this.$nextTick(() => {
this.historyObserver.observe(this.$refs.loadMoreButton); if (this.historyObserver) {
} this.historyObserver.observe(this.$refs.loadMoreButton);
}
});
}, },
destroyed() { destroyed() {
if (this.historyObserver) { if (this.historyObserver) {

75
client/components/LinkPreview.vue
View File

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