PostComments.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <style>
  2. span {
  3. font-size: 14px;
  4. }
  5. .comment-text {
  6. word-break: break-all;
  7. }
  8. .comment-text p {
  9. display: inline;
  10. }
  11. </style>
  12. <template>
  13. <div>
  14. <div class="postCommentsLoader text-center">
  15. <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  16. </div>
  17. <div class="postCommentsContainer d-none">
  18. <p class="mb-1 text-center load-more-link"><a href="#" class="text-muted" v-on:click="loadMore">Load more comments</a></p>
  19. <div class="comments" data-min-id="0" data-max-id="0">
  20. <p class="mb-1" v-for="(comment, index) in results" :data-id="comment.id" v-bind:key="comment.id">
  21. <span class="d-flex justify-content-between align-items-center">
  22. <span class="pr-3" style="overflow: hidden;">
  23. <div class="font-weight-bold pr-1"><bdi><a class="text-dark" :href="comment.account.url" :title="comment.account.username">{{l(comment.account.username)}}</a></bdi>
  24. </div>
  25. <div class="read-more" style="overflow: hidden;">
  26. <span class="comment-text" v-html="comment.content" style="overflow: hidden;"></span>
  27. </div>
  28. </span>
  29. <b-dropdown :id="comment.uri" variant="link" no-caret class="float-right">
  30. <template slot="button-content">
  31. <i class="fas fa-ellipsis-v text-muted"></i><span class="sr-only">Options</span>
  32. </template>
  33. <b-dropdown-item class="font-weight-bold" v-on:click="reply(comment)">Reply</b-dropdown-item>
  34. <b-dropdown-item class="font-weight-bold" :href="comment.url">Permalink</b-dropdown-item>
  35. <b-dropdown-item class="font-weight-bold" v-on:click="embed(comment)">Embed</b-dropdown-item>
  36. <b-dropdown-item class="font-weight-bold" :href="comment.account.url">Profile</b-dropdown-item>
  37. <b-dropdown-divider></b-dropdown-divider>
  38. <b-dropdown-item class="font-weight-bold" :href="'/i/report?type=post&id='+comment.id">Report</b-dropdown-item>
  39. </b-dropdown>
  40. </span>
  41. </p>
  42. </div>
  43. </div>
  44. </div>
  45. </template>
  46. <script>
  47. export default {
  48. props: ['post-id', 'post-username'],
  49. data() {
  50. return {
  51. results: {},
  52. pagination: {},
  53. min_id: 0,
  54. max_id: 0,
  55. reply_to_profile_id: 0,
  56. }
  57. },
  58. mounted() {
  59. this.fetchData();
  60. },
  61. updated() {
  62. pixelfed.readmore();
  63. },
  64. methods: {
  65. embed(e) {
  66. pixelfed.embed.build(e);
  67. },
  68. l(e) {
  69. let len = e.length;
  70. if(len < 10) { return e; }
  71. return e.substr(0, 10)+'...';
  72. },
  73. reply(e) {
  74. this.reply_to_profile_id = e.account.id;
  75. $('.comment-form input[name=comment]').val('@'+e.account.username+' ');
  76. $('.comment-form input[name=comment]').focus();
  77. },
  78. fetchData() {
  79. let url = '/api/v2/comments/'+this.postUsername+'/status/'+this.postId;
  80. axios.get(url)
  81. .then(response => {
  82. let self = this;
  83. this.results = response.data.data;
  84. this.pagination = response.data.meta.pagination;
  85. $('.postCommentsLoader').addClass('d-none');
  86. $('.postCommentsContainer').removeClass('d-none');
  87. }).catch(error => {
  88. if(!error.response) {
  89. $('.postCommentsLoader .lds-ring')
  90. .attr('style','width:100%')
  91. .addClass('pt-4 font-weight-bold text-muted')
  92. .text('An error occured, cannot fetch comments. Please try again later.');
  93. console.log(error);
  94. } else {
  95. switch(error.response.status) {
  96. case 401:
  97. $('.postCommentsLoader .lds-ring')
  98. .attr('style','width:100%')
  99. .addClass('pt-4 font-weight-bold text-muted')
  100. .text('Please login to view.');
  101. break;
  102. default:
  103. $('.postCommentsLoader .lds-ring')
  104. .attr('style','width:100%')
  105. .addClass('pt-4 font-weight-bold text-muted')
  106. .text('An error occured, cannot fetch comments. Please try again later.');
  107. break;
  108. }
  109. console.log(error.response.status);
  110. }
  111. });
  112. },
  113. loadMore(e) {
  114. e.preventDefault();
  115. if(this.pagination.total_pages == 1 || this.pagination.current_page == this.pagination.total_pages) {
  116. $('.load-more-link').addClass('d-none');
  117. return;
  118. }
  119. $('.postCommentsLoader').removeClass('d-none');
  120. let next = this.pagination.links.next;
  121. axios.get(next)
  122. .then(response => {
  123. let self = this;
  124. let res = response.data.data;
  125. $('.postCommentsLoader').addClass('d-none');
  126. for(let i=0; i < res.length; i++) {
  127. this.results.unshift(res[i]);
  128. }
  129. this.pagination = response.data.meta.pagination;
  130. });
  131. }
  132. }
  133. }
  134. </script>