mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-02 11:13:16 +00:00
100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
|
<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>
|