TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: make long comments collapsable

Browse source
This commit is contained in:
Bnyro 2023-09-11 19:13:05 +02:00
parent 82d574fcaf
commit 53f5eab757
2 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/CollapsableText.vue
View file

@ -4,9 +4,9 @@
<span v-if="showFullText" v-html="fullText()" />
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-else v-html="colapsedText()" />
<span v-if="text.length > 100 && !showFullText">...</span>
<span v-if="text.length > visibleLimit && !showFullText">...</span>
<button
v-if="text.length > 100"
v-if="text.length > visibleLimit"
class="block whitespace-normal font-semibold text-neutral-500 hover:underline"
@click="showFullText = !showFullText"
>
@ -24,6 +24,10 @@ export default {
type: String,
default: null,
},
visibleLimit: {
type: Number,
default: 100,
},
},
data() {
return {
@ -35,7 +39,7 @@ export default {
return purifyHTML(rewriteDescription(this.text));
},
colapsedText() {
return purifyHTML(rewriteDescription(this.text.slice(0, 100)));
return purifyHTML(rewriteDescription(this.text.slice(0, this.visibleLimit)));
},
},
};

11
src/components/CommentItem.vue
View file

@ -29,7 +29,7 @@
<div class="comment-meta mb-1.5 text-sm" v-text="comment.commentedTime" />
</div>
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="whitespace-pre-wrap" v-html="purifiedText" />
<CollapsableText :text="comment.commentText" :visible-limit="500" />
<div class="comment-footer mt-1 flex items-center">
<div class="i-fa6-solid:thumbs-up" />
<span class="ml-1" v-text="numberFormat(comment.likeCount)" />
@ -61,9 +61,10 @@
</template>
<script>
import { purifyHTML } from "@/utils/HtmlUtils";
import CollapsableText from "./CollapsableText.vue";
export default {
components: { CollapsableText },
props: {
comment: {
type: Object,
@ -82,18 +83,12 @@ export default {
nextpage: null,
};
},
computed: {
purifiedText() {
return purifyHTML(this.comment.commentText);
},
},
methods: {
async loadReplies() {
if (!this.showingReplies && this.loadingReplies) {
this.showingReplies = true;
return;
}
this.loadingReplies = true;
this.showingReplies = true;
this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {