163 lines
3.5 KiB
Vue
163 lines
3.5 KiB
Vue
<template>
|
|
<div
|
|
v-if="link.shown && link.canDisplay"
|
|
ref="container"
|
|
class="preview">
|
|
<div
|
|
ref="content"
|
|
:class="['toggle-content', 'toggle-type-' + link.type, { opened: isContentShown }]">
|
|
<template v-if="link.type === 'link'">
|
|
<a
|
|
v-if="link.thumb"
|
|
:href="link.link"
|
|
class="toggle-thumbnail"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<img
|
|
:src="link.thumb"
|
|
decoding="async"
|
|
alt=""
|
|
class="thumb"
|
|
@load="onPreviewReady">
|
|
</a>
|
|
<div class="toggle-text">
|
|
<div class="head">
|
|
<div class="overflowable">
|
|
<a
|
|
:href="link.link"
|
|
:title="link.head"
|
|
target="_blank"
|
|
rel="noopener">{{ link.head }}</a>
|
|
</div>
|
|
|
|
<button
|
|
v-if="showMoreButton"
|
|
:aria-expanded="isContentShown"
|
|
:aria-label="moreButtonLabel"
|
|
class="more"
|
|
@click="onMoreClick"
|
|
><span class="more-caret"/></button>
|
|
</div>
|
|
|
|
<div class="body overflowable">
|
|
<a
|
|
:href="link.link"
|
|
:title="link.body"
|
|
target="_blank"
|
|
rel="noopener">{{ link.body }}</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="link.type === 'image'">
|
|
<a
|
|
:href="link.link"
|
|
class="toggle-thumbnail"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<img
|
|
:src="link.thumb"
|
|
decoding="async"
|
|
alt=""
|
|
@load="onPreviewReady">
|
|
</a>
|
|
</template>
|
|
<template v-else-if="link.type === 'video'">
|
|
<video
|
|
preload="metadata"
|
|
controls
|
|
@canplay="onPreviewReady">
|
|
<source
|
|
:src="link.media"
|
|
:type="link.mediaType">
|
|
</video>
|
|
</template>
|
|
<template v-else-if="link.type === 'audio'">
|
|
<audio
|
|
controls
|
|
preload="metadata"
|
|
@canplay="onPreviewReady">
|
|
<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 {{ link.maxSize | friendlysize }} and cannot be
|
|
previewed.
|
|
<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>
|
|
to open it in a new window.
|
|
</em>
|
|
<br>
|
|
<pre class="prefetch-error">{{ link.message }}</pre>
|
|
</div>
|
|
|
|
<button
|
|
:aria-expanded="isContentShown"
|
|
:aria-label="moreButtonLabel"
|
|
class="more"
|
|
@click="onMoreClick"
|
|
><span class="more-caret"/></button>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "LinkPreview",
|
|
props: {
|
|
link: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
showMoreButton: false,
|
|
isContentShown: false,
|
|
};
|
|
},
|
|
computed: {
|
|
moreButtonLabel() {
|
|
return this.isContentShown ? "Less" : "More";
|
|
},
|
|
},
|
|
mounted() {
|
|
const options = require("../js/options");
|
|
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
|
|
|
|
if (this.link.type !== "link") {
|
|
return;
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
if (!this.$refs.content) {
|
|
return;
|
|
}
|
|
|
|
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
|
|
});
|
|
},
|
|
methods: {
|
|
onPreviewReady() {
|
|
|
|
},
|
|
onMoreClick() {
|
|
this.isContentShown = !this.isContentShown;
|
|
},
|
|
},
|
|
};
|
|
</script>
|