pixelfed/pixelfed

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