logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

status_content.js (4092B)


  1. import Attachment from '../attachment/attachment.vue'
  2. import Poll from '../poll/poll.vue'
  3. import Gallery from '../gallery/gallery.vue'
  4. import StatusBody from 'src/components/status_body/status_body.vue'
  5. import LinkPreview from '../link-preview/link-preview.vue'
  6. import { mapGetters, mapState } from 'vuex'
  7. import { library } from '@fortawesome/fontawesome-svg-core'
  8. import {
  9. faCircleNotch,
  10. faFile,
  11. faMusic,
  12. faImage,
  13. faLink,
  14. faPollH
  15. } from '@fortawesome/free-solid-svg-icons'
  16. library.add(
  17. faCircleNotch,
  18. faFile,
  19. faMusic,
  20. faImage,
  21. faLink,
  22. faPollH
  23. )
  24. const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
  25. const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
  26. const camelized = camelCase(name)
  27. const toggle = `controlledToggle${camelized}`
  28. const controlledName = `controlled${camelized}`
  29. const uncontrolledName = `uncontrolled${camelized}`
  30. res[name] = function () {
  31. return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
  32. }
  33. return res
  34. }, {})
  35. const controlledOrUncontrolledToggle = (obj, name) => {
  36. const camelized = camelCase(name)
  37. const toggle = `controlledToggle${camelized}`
  38. const uncontrolledName = `uncontrolled${camelized}`
  39. if (obj[toggle]) {
  40. obj[toggle]()
  41. } else {
  42. obj[uncontrolledName] = !obj[uncontrolledName]
  43. }
  44. }
  45. const StatusContent = {
  46. name: 'StatusContent',
  47. props: [
  48. 'status',
  49. 'compact',
  50. 'focused',
  51. 'noHeading',
  52. 'fullContent',
  53. 'singleLine',
  54. 'controlledShowingTall',
  55. 'controlledExpandingSubject',
  56. 'controlledToggleShowingTall',
  57. 'controlledToggleExpandingSubject',
  58. 'controlledShowingLongSubject',
  59. 'controlledToggleShowingLongSubject'
  60. ],
  61. data () {
  62. return {
  63. uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),
  64. uncontrolledShowingLongSubject: false,
  65. // not as computed because it sets the initial state which will be changed later
  66. uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
  67. }
  68. },
  69. computed: {
  70. ...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
  71. statusCard () {
  72. if (!this.status.card) return null
  73. return this.status.card.url === this.status.quote_url ? null : this.status.card
  74. },
  75. hideAttachments () {
  76. return (this.mergedConfig.hideAttachments && !this.inConversation) ||
  77. (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
  78. },
  79. nsfwClickthrough () {
  80. if (!this.status.nsfw) {
  81. return false
  82. }
  83. if (this.status.summary && this.localCollapseSubjectDefault) {
  84. return false
  85. }
  86. return true
  87. },
  88. localCollapseSubjectDefault () {
  89. return this.mergedConfig.collapseMessageWithSubject
  90. },
  91. attachmentSize () {
  92. if (this.compact) {
  93. return 'small'
  94. } else if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
  95. (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
  96. (this.status.attachments.length > this.maxThumbnails)) {
  97. return 'hide'
  98. }
  99. return 'normal'
  100. },
  101. maxThumbnails () {
  102. return this.mergedConfig.maxThumbnails
  103. },
  104. ...mapGetters(['mergedConfig']),
  105. ...mapState({
  106. currentUser: state => state.users.currentUser
  107. })
  108. },
  109. components: {
  110. Attachment,
  111. Poll,
  112. Gallery,
  113. LinkPreview,
  114. StatusBody
  115. },
  116. methods: {
  117. toggleShowingTall () {
  118. controlledOrUncontrolledToggle(this, 'showingTall')
  119. },
  120. toggleExpandingSubject () {
  121. controlledOrUncontrolledToggle(this, 'expandingSubject')
  122. },
  123. toggleShowingLongSubject () {
  124. controlledOrUncontrolledToggle(this, 'showingLongSubject')
  125. },
  126. setMedia () {
  127. const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
  128. return () => this.$store.dispatch('setMedia', attachments)
  129. }
  130. }
  131. }
  132. export default StatusContent