pixelfed/resources/assets/components/partials/post/ReadMore.vue

100 lines
2.7 KiB
Vue
Raw Normal View History

2023-06-11 21:16:20 +00:00
<template>
<div class="read-more-component" style="word-break: break-word;">
<div v-html="content"></div>
<!-- <div v-if="status.content.length < 200" v-html="content"></div>
<div v-else>
<span v-html="content"></span>
<a
v-if="cursor == 200 || fullContent.length > cursor"
class="font-weight-bold text-muted" href="#"
style="display: block;white-space: nowrap;"
@click.prevent="readMore">
<i class="d-none fas fa-caret-down"></i> {{ $t('common.readMore') }}...
</a>
</div> -->
</div>
</template>
<script type="text/javascript">
export default {
props: {
status: {
type: Object
},
cursorLimit: {
type: Number,
default: 200
}
},
data() {
return {
preRender: undefined,
fullContent: null,
content: null,
cursor: 200
}
},
mounted() {
this.rewriteLinks();
},
methods: {
readMore() {
this.cursor = this.cursor + 200;
this.content = this.fullContent.substr(0, this.cursor);
},
rewriteLinks() {
let content = this.status.content;
let el = document.createElement('div');
el.innerHTML = content;
el.querySelectorAll('a[class*="hashtag"]')
.forEach(elr => {
let tag = elr.innerText;
if(tag.substr(0, 1) == '#') {
tag = tag.substr(1);
}
elr.removeAttribute('target');
elr.setAttribute('href', '/i/web/hashtag/' + tag);
})
el.querySelectorAll('a:not(.hashtag)[class*="mention"], a:not(.hashtag)[class*="list-slug"]')
.forEach(elr => {
let name = elr.innerText;
if(name.substr(0, 1) == '@') {
name = name.substr(1);
}
if(this.status.account.local == false && !name.includes('@')) {
let domain = document.createElement('a');
domain.href = elr.getAttribute('href');
name = name + '@' + domain.hostname;
}
elr.removeAttribute('target');
elr.setAttribute('href', '/i/web/username/' + name);
})
this.content = el.outerHTML;
this.injectCustomEmoji();
},
injectCustomEmoji() {
// console.log('inecting custom emoji');
// let re = /:\w{1,100}:/g;
// let matches = this.status.content.match(re);
// console.log(matches);
// if(this.status.emojis.length == 0) {
// return;
// }
let self = this;
this.status.emojis.forEach(function(emoji) {
let img = `<img draggable="false" class="emojione custom-emoji" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.url}" data-original="${emoji.url}" data-static="${emoji.static_url}" width="18" height="18" onerror="this.onerror=null;this.src='/storage/emoji/missing.png';" />`;
self.content = self.content.replace(`:${emoji.shortcode}:`, img);
});
// this.content = this.content.replace(':fediverse:', '😅');
}
}
}
</script>