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.$data[toggle] !== undefined ||
+ this.$props[toggle] !== undefined) &&
+ this[toggle]
+ ? this[controlledName]
+ : this[uncontrolledName]
+ }
+ return res
+ }, {})
+
+const controlledOrUncontrolledToggle = (obj, name) => {
+ const camelized = camelCase(name)
+ const toggle = `controlledToggle${camelized}`
+ const uncontrolledName = `uncontrolled${camelized}`
+ if (obj[toggle]) {
+ obj[toggle]()
+ } else {
+ obj[uncontrolledName] = !obj[uncontrolledName]
+ }
+}
+
+const controlledOrUncontrolledSet = (obj, name, val) => {
+ const camelized = camelCase(name)
+ const set = `controlledSet${camelized}`
+ const uncontrolledName = `uncontrolled${camelized}`
+ if (obj[set]) {
+ obj[set](val)
+ } else {
+ obj[uncontrolledName] = val
+ }
+}
+
const Status = {
name: 'Status',
components: {
@@ -108,33 +146,40 @@ const Status = {
inProfile: Boolean,
inConversation: Boolean,
inQuote: Boolean,
- canDive: Boolean,
profileUserId: String,
simpleTree: Boolean,
showOtherRepliesAsButton: Boolean,
- canDive: Boolean,
+ dive: Function,
ignoreMute: Boolean,
- threadDisplayStatus: String,
+ controlledThreadDisplayStatus: String,
+ controlledToggleThreadDisplay: Function,
+ controlledShowingTall: Boolean,
+ controlledToggleShowingTall: Function,
+ controlledExpandingSubject: Boolean,
+ controlledToggleExpandingSubject: Function,
+ controlledShowingLongSubject: Boolean,
+ controlledToggleShowingLongSubject: Function,
+ controlledReplying: Boolean,
+ controlledToggleReplying: Function,
+ controlledMediaPlaying: Boolean,
+ controlledSetMediaPlaying: Function,
},
- emits: [
- 'goto',
- 'dive',
- 'toggleExpanded',
- 'suspendableStateChange'
- ],
+ emits: ['goto', 'toggleExpanded'],
data() {
return {
- replying: false,
+ uncontrolledReplying: false,
unmuted: false,
userExpanded: false,
- mediaPlaying: new Set(),
+ uncontrolledMediaPlaying: [],
+ suspendable: true,
error: null,
headTailLinks: null,
}
},
computed: {
+ ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
showReasonMutedThread() {
return (
(this.status.thread_muted ||
@@ -444,13 +489,13 @@ const Status = {
return useMergedConfigStore().mergedConfig
},
isSuspendable() {
- return !this.replying && this.mediaPlaying.size === 0
+ return !this.replying && this.mediaPlaying.length === 0
},
inThreadForest() {
- return !!this.threadDisplayStatus
+ return !!this.controlledThreadDisplayStatus
},
threadShowing() {
- return this.threadDisplayStatus === 'showing'
+ return this.controlledThreadDisplayStatus === 'showing'
},
visibilityLocalized() {
return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
@@ -521,17 +566,15 @@ const Status = {
clearError() {
this.error = undefined
},
- toggleReplyForm() {
+ toggleReplying() {
if (this.replying) {
- // This emits 'close-accepted' if successful
- // which in turn callse closeReply()
this.$refs.postStatusForm.requestClose()
} else {
- this.replying = true
+ this.doToggleReplying()
}
},
- closeReplyForm() {
- this.replying = false
+ doToggleReplying() {
+ controlledOrUncontrolledToggle(this, 'replying')
},
gotoOriginal(id) {
if (this.inConversation) {
@@ -555,10 +598,18 @@ const Status = {
)
},
addMediaPlaying(id) {
- this.mediaPlaying.add(id)
+ controlledOrUncontrolledSet(
+ this,
+ 'mediaPlaying',
+ this.mediaPlaying.concat(id),
+ )
},
removeMediaPlaying(id) {
- this.mediaPlaying.delete(id)
+ controlledOrUncontrolledSet(
+ this,
+ 'mediaPlaying',
+ this.mediaPlaying.filter((mediaId) => mediaId !== id),
+ )
},
setHeadTailLinks(headTailLinks) {
this.headTailLinks = headTailLinks
@@ -608,8 +659,8 @@ const Status = {
this.$store.dispatch('fetchFavs', this.status.id)
}
},
- isSuspendable: function (suspend) {
- this.$emit('suspendableStateChange', { id: this.statusoid.id, suspend })
+ isSuspendable: function (val) {
+ this.suspendable = val
},
},
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f301ad890..5cd2de3ab 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -236,10 +236,10 @@
/>
@@ -515,7 +521,7 @@
v-if="!noHeading && !isPreview"
:status="status"
:replying="replying"
- @toggle-replying="toggleReplyForm"
+ @toggle-replying="toggleReplying"
/>