1
0

PostMenu.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <div>
  3. <div v-if="modal != 'true'" class="dropdown">
  4. <button class="btn btn-link text-dark no-caret dropdown-toggle py-0" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
  5. <span v-bind:class="[size =='lg' ? 'fas fa-ellipsis-v fa-lg text-muted' : 'fas fa-ellipsis-v fa-sm text-lighter']"></span>
  6. </button>
  7. <div class="dropdown-menu dropdown-menu-right">
  8. <a class="dropdown-item font-weight-bold" :href="status.url">Go to post</a>
  9. <a class="dropdown-item font-weight-bold" href="#">Share</a>
  10. <a class="dropdown-item font-weight-bold" href="#">Embed</a>
  11. <span v-if="statusOwner(status) == false">
  12. <a class="dropdown-item font-weight-bold" :href="reportUrl(status)">Report</a>
  13. </span>
  14. <span v-if="statusOwner(status) == true">
  15. <a class="dropdown-item font-weight-bold" v-on:click="muteProfile(status)">Mute Profile</a>
  16. <a class="dropdown-item font-weight-bold" v-on:click="blockProfile(status)">Block Profile</a>
  17. </span>
  18. <span v-if="profile.is_admin == true">
  19. <div class="dropdown-divider"></div>
  20. <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  21. <div class="dropdown-divider"></div>
  22. <h6 class="dropdown-header">Mod Tools</h6>
  23. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'autocw')">
  24. <p class="mb-0">Enforce CW</p>
  25. <p class="mb-0 small text-muted">Adds a CW to every post <br> made by this account.</p>
  26. </a>
  27. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'noautolink')">
  28. <p class="mb-0">No Autolinking</p>
  29. <p class="mb-0 small text-muted">Do not transform mentions, <br> hashtags or urls into HTML.</p>
  30. </a>
  31. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'unlisted')">
  32. <p class="mb-0">Unlisted Posts</p>
  33. <p class="mb-0 small text-muted">Removes account from <br> public/network timelines.</p>
  34. </a>
  35. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'disable')">
  36. <p class="mb-0">Disable Account</p>
  37. <p class="mb-0 small text-muted">Temporarily disable account <br> until next time user log in.</p>
  38. </a>
  39. <a class="dropdown-item font-weight-bold" v-on:click="moderatePost(status, 'suspend')">
  40. <p class="mb-0">Suspend Account</p>
  41. <p class="mb-0 small text-muted">This prevents any new interactions, <br> without deleting existing data.</p>
  42. </a>
  43. </span>
  44. </div>
  45. </div>
  46. <div v-if="modal == 'true'">
  47. <span data-toggle="modal" :data-target="'#mt_pid_'+status.id">
  48. <span v-bind:class="[size =='lg' ? 'fas fa-ellipsis-v fa-lg text-muted' : 'fas fa-ellipsis-v fa-sm text-lighter']"></span>
  49. </span>
  50. <div class="modal" tabindex="-1" role="dialog" :id="'mt_pid_'+status.id">
  51. <div class="modal-dialog modal-sm" role="document">
  52. <div class="modal-content">
  53. <div class="modal-body">
  54. <div class="list-group">
  55. <a class="list-group-item font-weight-bold" :href="status.url">Go to post</a>
  56. <a class="list-group-item font-weight-bold" :href="status.url">Share</a>
  57. <a class="list-group-item font-weight-bold" :href="status.url">Embed</a>
  58. <span v-if="statusOwner(status) == false">
  59. <a class="list-group-item font-weight-bold" :href="reportUrl(status)">Report</a>
  60. <a class="list-group-item font-weight-bold" v-on:click="muteProfile(status)" href="#">Mute Profile</a>
  61. <a class="list-group-item font-weight-bold" v-on:click="blockProfile(status)" href="#">Block Profile</a>
  62. </span>
  63. <span v-if="statusOwner(status) == true || profile.is_admin == true">
  64. <a class="list-group-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
  65. </span>
  66. <span v-if="profile.is_admin == true">
  67. <a class="list-group-item font-weight-bold" v-on:click="moderatePost(status, 'autocw')" href="#">
  68. <p class="mb-0">Enforce CW</p>
  69. <p class="mb-0 small text-muted">Adds a CW to every post <br> made by this account.</p>
  70. </a>
  71. <a class="list-group-item font-weight-bold" v-on:click="moderatePost(status, 'noautolink')" href="#">
  72. <p class="mb-0">No Autolinking</p>
  73. <p class="mb-0 small text-muted">Do not transform mentions, <br> hashtags or urls into HTML.</p>
  74. </a>
  75. <a class="list-group-item font-weight-bold" v-on:click="moderatePost(status, 'unlisted')" href="#">
  76. <p class="mb-0">Unlisted Posts</p>
  77. <p class="mb-0 small text-muted">Removes account from <br> public/network timelines.</p>
  78. </a>
  79. <a class="list-group-item font-weight-bold" v-on:click="moderatePost(status, 'disable')" href="#">
  80. <p class="mb-0">Disable Account</p>
  81. <p class="mb-0 small text-muted">Temporarily disable account <br> until next time user log in.</p>
  82. </a>
  83. <a class="list-group-item font-weight-bold" v-on:click="moderatePost(status, 'suspend')" href="#">
  84. <p class="mb-0">Suspend Account</p>
  85. <p class="mb-0 small text-muted">This prevents any new interactions, <br> without deleting existing data.</p>
  86. </a>
  87. </span>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </template>
  96. <style type="text/css" scoped>
  97. .text-lighter {
  98. color:#B8C2CC !important;
  99. }
  100. </style>
  101. <script type="text/javascript">
  102. export default {
  103. props: ['status', 'profile', 'size', 'modal'],
  104. methods: {
  105. reportUrl(status) {
  106. let type = status.in_reply_to ? 'comment' : 'post';
  107. let id = status.id;
  108. return '/i/report?type=' + type + '&id=' + id;
  109. },
  110. timestampFormat(timestamp) {
  111. let ts = new Date(timestamp);
  112. return ts.toDateString() + ' ' + ts.toLocaleTimeString();
  113. },
  114. editUrl(status) {
  115. return status.url + '/edit';
  116. },
  117. redirect(url) {
  118. window.location.href = url;
  119. return;
  120. },
  121. replyUrl(status) {
  122. let username = this.profile.username;
  123. let id = status.account.id == this.profile.id ? status.id : status.in_reply_to_id;
  124. return '/p/' + username + '/' + id;
  125. },
  126. mentionUrl(status) {
  127. let username = status.account.username;
  128. let id = status.id;
  129. return '/p/' + username + '/' + id;
  130. },
  131. statusOwner(status) {
  132. let sid = parseInt(status.account.id);
  133. let uid = parseInt(this.profile.id);
  134. if(sid == uid) {
  135. return true;
  136. } else {
  137. return false;
  138. }
  139. },
  140. deletePost(status, index) {
  141. if($('body').hasClass('loggedIn') == false || status.account.id !== this.profile.id) {
  142. return;
  143. }
  144. axios.post('/i/delete', {
  145. type: 'status',
  146. item: status.id
  147. }).then(res => {
  148. this.feed.splice(index,1);
  149. swal('Success', 'You have successfully deleted this post', 'success');
  150. }).catch(err => {
  151. swal('Error', 'Something went wrong. Please try again later.', 'error');
  152. });
  153. },
  154. commentSubmit(status, $event) {
  155. let id = status.id;
  156. let form = $event.target;
  157. let input = $(form).find('input[name="comment"]');
  158. let comment = input.val();
  159. let comments = form.parentElement.parentElement.getElementsByClassName('comments')[0];
  160. axios.post('/i/comment', {
  161. item: id,
  162. comment: comment
  163. }).then(res => {
  164. form.reset();
  165. form.blur();
  166. this.replies.unshift(res.data.entity);
  167. });
  168. },
  169. moderatePost(status, action, $event) {
  170. let username = status.account.username;
  171. switch(action) {
  172. case 'autocw':
  173. let msg = 'Are you sure you want to enforce CW for ' + username + ' ?';
  174. swal({
  175. title: 'Confirm',
  176. text: msg,
  177. icon: 'warning',
  178. buttons: true,
  179. dangerMode: true
  180. });
  181. break;
  182. case 'suspend':
  183. msg = 'Are you sure you want to suspend the account of ' + username + ' ?';
  184. swal({
  185. title: 'Confirm',
  186. text: msg,
  187. icon: 'warning',
  188. buttons: true,
  189. dangerMode: true
  190. });
  191. break;
  192. }
  193. }
  194. }
  195. }
  196. </script>