PostComments.vue 5.0 KB

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