commit: ace1f5067c90be2fa0b8da22d39b0e2c88f590fb
parent cd0f6a4f7820b27e3d776e598c842328ad64ab18
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 7 Aug 2021 10:28:45 -0400
Make status display controlled
Diffstat:
7 files changed, 130 insertions(+), 5 deletions(-)
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
@@ -2,7 +2,8 @@ import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue'
import ThreadTree from '../thread_tree/thread_tree.vue'
-const debug = console.log
+// const debug = console.log
+const debug = () => {}
const sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -39,7 +40,8 @@ const conversation = {
return {
highlight: null,
expanded: false,
- threadDisplayStatusObject: {} // id => 'showing' | 'hidden'
+ threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
+ statusContentPropertiesObject: {}
}
},
props: [
@@ -236,6 +238,25 @@ const conversation = {
a[id] = status
return a
}, {})
+ },
+ statusContentProperties () {
+ return this.conversation.reduce((a, k) => {
+ const id = k.id
+ const depth = this.depths[id]
+ const props = (() => {
+ if (this.statusContentPropertiesObject[id]) {
+ return this.statusContentPropertiesObject[id]
+ }
+ return {
+ showingTall: false,
+ expandingSubject: false,
+ showingLongSubject: false,
+ }
+ })()
+
+ a[id] = props
+ return a
+ }, {})
}
},
components: {
@@ -326,6 +347,18 @@ const conversation = {
},
showThreadRecursively (id) {
this.setThreadDisplayRecursively(id, 'showing')
+ },
+ setStatusContentProperty (id, name, value) {
+ this.statusContentPropertiesObject = {
+ ...this.statusContentPropertiesObject,
+ [id]: {
+ ...this.statusContentPropertiesObject[id],
+ [name]: value
+ }
+ }
+ },
+ toggleStatusContentProperty (id, name) {
+ this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
}
}
}
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -44,6 +44,9 @@
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
+ :status-content-properties="statusContentProperties"
+ :set-status-content-property="setStatusContentProperty"
+ :toggle-status-content-property="toggleStatusContentProperty"
/>
</div>
<div v-if="isLinearView">
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -96,7 +96,14 @@ const Status = {
'profileUserId',
'controlledThreadDisplayStatus',
- 'controlledToggleThreadDisplay'
+ 'controlledToggleThreadDisplay',
+
+ 'controlledShowingTall',
+ 'controlledToggleShowingTall',
+ 'controlledExpandingSubject',
+ 'controlledToggleExpandingSubject',
+ 'controlledShowingLongSubject',
+ 'controlledToggleShowingLongSubject'
],
data () {
return {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -319,6 +319,12 @@
:no-heading="noHeading"
:highlight="highlight"
:focused="isFocused"
+ :controlled-showing-tall="controlledShowingTall"
+ :controlled-expanding-subject="controlledExpandingSubject"
+ :controlled-showing-long-subject="controlledShowingLongSubject"
+ :controlled-toggle-showing-tall="controlledToggleShowingTall"
+ :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
+ :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
@mediaplay="addMediaPlaying($event)"
@mediapause="removeMediaPlaying($event)"
@parseReady="setHeadTailLinks"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
@@ -23,6 +23,31 @@ library.add(
faPollH
)
+const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+
+const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
+ const camelized = camelCase(name)
+ const toggle = `controlledToggle${camelized}`
+ const controlledName = `controlled${camelized}`
+ const uncontrolledName = `uncontrolled${camelized}`
+ res[name] = function () {
+ return this[toggle] ? this[controlledName] : this[uncontrolledName]
+ }
+ return res
+}, {})
+
+const controlledOrUncontrolledToggle = (obj, name) => {
+ const camelized = camelCase(name)
+ const toggle = `controlledToggle${camelized}`
+ const controlledName = `controlled${camelized}`
+ const uncontrolledName = `uncontrolled${camelized}`
+ if (obj[toggle]) {
+ obj[toggle]()
+ } else {
+ obj[uncontrolledName] = !obj[uncontrolledName]
+ }
+}
+
const StatusContent = {
name: 'StatusContent',
props: [
@@ -31,9 +56,22 @@ const StatusContent = {
'focused',
'noHeading',
'fullContent',
- 'singleLine'
+ 'singleLine',
+ 'controlledShowingTall',
+ 'controlledExpandingSubject',
+ 'controlledToggleShowingTall',
+ 'controlledToggleExpandingSubject'
],
+ data () {
+ return {
+ uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),
+ uncontrolledShowingLongSubject: false,
+ // not as computed because it sets the initial state which will be changed later
+ uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+ }
+ },
computed: {
+ ...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
hideAttachments () {
return (this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.mergedConfig.hideAttachmentsInConv && this.inConversation)
@@ -71,6 +109,25 @@ const StatusContent = {
Gallery,
LinkPreview,
StatusBody
+ },
+ methods: {
+ toggleShowingTall () {
+ controlledOrUncontrolledToggle(this, 'showingTall')
+ },
+ toggleExpandingSubject () {
+ controlledOrUncontrolledToggle(this, 'expandingSubject')
+ },
+ toggleShowMore () {
+ if (this.mightHideBecauseTall) {
+ this.toggleShowingTall()
+ } else if (this.mightHideBecauseSubject) {
+ this.toggleExpandingSubject()
+ }
+ },
+ setMedia () {
+ const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
+ return () => this.$store.dispatch('setMedia', attachments)
+ }
}
}
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
@@ -28,7 +28,10 @@ const ThreadTree = {
threadDisplayStatus: Object,
showThreadRecursively: Function,
totalReplyCount: Object,
- totalReplyDepth: Object
+ totalReplyDepth: Object,
+ statusContentProperties: Object,
+ setStatusContentProperty: Function,
+ toggleStatusContentProperty: Function
},
computed: {
reverseLookupTable () {
@@ -44,6 +47,9 @@ const ThreadTree = {
},
threadShowing () {
return this.threadDisplayStatus[this.status.id] === 'showing'
+ },
+ currentProp () {
+ return this.statusContentProperties[this.status.id]
}
},
methods: {
@@ -55,6 +61,9 @@ const ThreadTree = {
showThread () {
},
showAllSubthreads () {
+ },
+ toggleCurrentProp (name) {
+ this.toggleStatusContentProperty(this.status.id, name)
}
}
}
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
@@ -18,6 +18,13 @@
:controlled-thread-display-status="threadDisplayStatus[status.id]"
:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
+ :controlled-showing-tall="currentProp.showingTall"
+ :controlled-expanding-subject="currentProp.expandingSubject"
+ :controlled-showing-long-subject="currentProp.showingLongSubject"
+ :controlled-toggle-showing-tall="() => toggleCurrentProp('ShowingTall')"
+ :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
+ :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
+
@goto="setHighlight"
@toggleExpanded="toggleExpanded"
/>
@@ -50,6 +57,9 @@
:show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth"
+ :status-content-properties="statusContentProperties"
+ :set-status-content-property="setStatusContentProperty"
+ :toggle-status-content-property="toggleStatusContentProperty"
/>
</div>
<div
