Make status display controlled

This commit is contained in:
Tusooa Zhu 2021-08-07 10:28:45 -04:00
parent cd0f6a4f78
commit ace1f5067c
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
7 changed files with 130 additions and 5 deletions

View file

@ -2,7 +2,8 @@ import { reduce, filter, findIndex, clone, get } from 'lodash'
import Status from '../status/status.vue' import Status from '../status/status.vue'
import ThreadTree from '../thread_tree/thread_tree.vue' import ThreadTree from '../thread_tree/thread_tree.vue'
const debug = console.log // const debug = console.log
const debug = () => {}
const sortById = (a, b) => { const sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@ -39,7 +40,8 @@ const conversation = {
return { return {
highlight: null, highlight: null,
expanded: false, expanded: false,
threadDisplayStatusObject: {} // id => 'showing' | 'hidden' threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
statusContentPropertiesObject: {}
} }
}, },
props: [ props: [
@ -236,6 +238,25 @@ const conversation = {
a[id] = status a[id] = status
return a 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: { components: {
@ -326,6 +347,18 @@ const conversation = {
}, },
showThreadRecursively (id) { showThreadRecursively (id) {
this.setThreadDisplayRecursively(id, 'showing') 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])
} }
} }
} }

View file

@ -44,6 +44,9 @@
:show-thread-recursively="showThreadRecursively" :show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount" :total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth" :total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
/> />
</div> </div>
<div v-if="isLinearView"> <div v-if="isLinearView">

View file

@ -96,7 +96,14 @@ const Status = {
'profileUserId', 'profileUserId',
'controlledThreadDisplayStatus', 'controlledThreadDisplayStatus',
'controlledToggleThreadDisplay' 'controlledToggleThreadDisplay',
'controlledShowingTall',
'controlledToggleShowingTall',
'controlledExpandingSubject',
'controlledToggleExpandingSubject',
'controlledShowingLongSubject',
'controlledToggleShowingLongSubject'
], ],
data () { data () {
return { return {

View file

@ -319,6 +319,12 @@
:no-heading="noHeading" :no-heading="noHeading"
:highlight="highlight" :highlight="highlight"
:focused="isFocused" :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)" @mediaplay="addMediaPlaying($event)"
@mediapause="removeMediaPlaying($event)" @mediapause="removeMediaPlaying($event)"
@parseReady="setHeadTailLinks" @parseReady="setHeadTailLinks"

View file

@ -23,6 +23,31 @@ library.add(
faPollH 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 = { const StatusContent = {
name: 'StatusContent', name: 'StatusContent',
props: [ props: [
@ -31,9 +56,22 @@ const StatusContent = {
'focused', 'focused',
'noHeading', 'noHeading',
'fullContent', '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: { computed: {
...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
hideAttachments () { hideAttachments () {
return (this.mergedConfig.hideAttachments && !this.inConversation) || return (this.mergedConfig.hideAttachments && !this.inConversation) ||
(this.mergedConfig.hideAttachmentsInConv && this.inConversation) (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
@ -71,6 +109,25 @@ const StatusContent = {
Gallery, Gallery,
LinkPreview, LinkPreview,
StatusBody 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)
}
} }
} }

View file

@ -28,7 +28,10 @@ const ThreadTree = {
threadDisplayStatus: Object, threadDisplayStatus: Object,
showThreadRecursively: Function, showThreadRecursively: Function,
totalReplyCount: Object, totalReplyCount: Object,
totalReplyDepth: Object totalReplyDepth: Object,
statusContentProperties: Object,
setStatusContentProperty: Function,
toggleStatusContentProperty: Function
}, },
computed: { computed: {
reverseLookupTable () { reverseLookupTable () {
@ -44,6 +47,9 @@ const ThreadTree = {
}, },
threadShowing () { threadShowing () {
return this.threadDisplayStatus[this.status.id] === 'showing' return this.threadDisplayStatus[this.status.id] === 'showing'
},
currentProp () {
return this.statusContentProperties[this.status.id]
} }
}, },
methods: { methods: {
@ -55,6 +61,9 @@ const ThreadTree = {
showThread () { showThread () {
}, },
showAllSubthreads () { showAllSubthreads () {
},
toggleCurrentProp (name) {
this.toggleStatusContentProperty(this.status.id, name)
} }
} }
} }

View file

@ -18,6 +18,13 @@
:controlled-thread-display-status="threadDisplayStatus[status.id]" :controlled-thread-display-status="threadDisplayStatus[status.id]"
:controlled-toggle-thread-display="() => toggleThreadDisplay(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" @goto="setHighlight"
@toggleExpanded="toggleExpanded" @toggleExpanded="toggleExpanded"
/> />
@ -50,6 +57,9 @@
:show-thread-recursively="showThreadRecursively" :show-thread-recursively="showThreadRecursively"
:total-reply-count="totalReplyCount" :total-reply-count="totalReplyCount"
:total-reply-depth="totalReplyDepth" :total-reply-depth="totalReplyDepth"
:status-content-properties="statusContentProperties"
:set-status-content-property="setStatusContentProperty"
:toggle-status-content-property="toggleStatusContentProperty"
/> />
</div> </div>
<div <div