refs #3301 Rewrite TimelineSpace/Contents/SideBar/TootDetail with composition API
This commit is contained in:
parent
07ad9dcfed
commit
ad34fb258c
|
@ -49,112 +49,124 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { mapState, mapGetters } from 'vuex'
|
import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount } from 'vue'
|
||||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
import { ElMessage } from 'element-plus'
|
||||||
import { EventEmitter } from '~/src/renderer/components/event'
|
import { Entity } from 'megalodon'
|
||||||
|
import { useStore } from '@/store'
|
||||||
|
import { useI18next } from 'vue3-i18next'
|
||||||
|
import Toot from '@/components/organisms/Toot.vue'
|
||||||
|
import { EventEmitter } from '@/components/event'
|
||||||
|
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/SideBar/TootDetail'
|
||||||
|
|
||||||
export default {
|
export default defineComponent({
|
||||||
name: 'toot-detail',
|
name: 'toot-detail',
|
||||||
components: { Toot },
|
components: { Toot },
|
||||||
data() {
|
setup() {
|
||||||
return {
|
const space = 'TimelineSpace/Contents/SideBar/TootDetail'
|
||||||
focusedId: null
|
const store = useStore()
|
||||||
}
|
const i18n = useI18next()
|
||||||
},
|
|
||||||
computed: {
|
const focusedId = ref<string | null>(null)
|
||||||
...mapState('TimelineSpace/Contents/SideBar/TootDetail', {
|
const original = ref<any>(null)
|
||||||
message: state => state.message,
|
|
||||||
ancestors: state => state.ancestors,
|
const message = computed(() => store.state.TimelineSpace.Contents.SideBar.TootDetail.message)
|
||||||
descendants: state => state.descendants,
|
const ancestors = computed(() => store.state.TimelineSpace.Contents.SideBar.TootDetail.ancestors)
|
||||||
timeline: state => state.ancestors.concat([state.message]).concat(state.descendants)
|
const descendants = computed(() => store.state.TimelineSpace.Contents.SideBar.TootDetail.descendants)
|
||||||
}),
|
const timeline = computed(() => {
|
||||||
...mapGetters('TimelineSpace/Contents/SideBar/TootDetail', ['filters']),
|
const mes = message.value ? [message.value] : []
|
||||||
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
|
return ancestors.value.concat(mes).concat(descendants.value)
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.load()
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
EventEmitter.on('focus-sidebar', () => {
|
|
||||||
this.focusedId = 0
|
|
||||||
this.$nextTick(function () {
|
|
||||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
},
|
const filters = computed(() => store.getters[`${space}/filters`])
|
||||||
watch: {
|
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||||
message: function () {
|
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||||
this.load()
|
const originalMessage = computed(() => (message.value?.reblog !== null ? message.value?.reblog : message.value))
|
||||||
}
|
|
||||||
},
|
onMounted(() => {
|
||||||
beforeUnmount() {
|
load()
|
||||||
EventEmitter.emit('focus-timeline')
|
})
|
||||||
EventEmitter.off('focus-sidebar')
|
watch(message, () => {
|
||||||
},
|
load()
|
||||||
methods: {
|
})
|
||||||
originalMessage(message) {
|
|
||||||
if (message.reblog !== null) {
|
onBeforeUnmount(() => {
|
||||||
return message.reblog
|
EventEmitter.emit('focus-timeline')
|
||||||
} else {
|
EventEmitter.off('focus-sidebar')
|
||||||
return message
|
})
|
||||||
}
|
|
||||||
},
|
const load = () => {
|
||||||
load() {
|
store
|
||||||
this.$store
|
.dispatch(`${space}/${ACTION_TYPES.FETCH_TOOT}`, originalMessage.value)
|
||||||
.dispatch('TimelineSpace/Contents/SideBar/TootDetail/fetchToot', this.originalMessage(this.message))
|
|
||||||
.then(() => {
|
.then(() => {
|
||||||
const toot = this.$refs.original
|
const toot = original.value
|
||||||
toot.scrollIntoView()
|
toot.scrollIntoView()
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
this.$message({
|
ElMessage({
|
||||||
message: this.$t('message.toot_fetch_error'),
|
message: i18n.t('message.toot_fetch_error'),
|
||||||
type: 'error'
|
type: 'error'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
updateAncestorsToot(message) {
|
const updateAncestorsToot = (message: Entity.Status) => {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/updateAncestorsToot', message)
|
store.commit(`${space}/${MUTATION_TYPES.UPDATE_ANCESTORS_TOOT}`, message)
|
||||||
},
|
}
|
||||||
deleteAncestorsToot(message) {
|
const deleteAncestorsToot = (message: Entity.Status) => {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteAncestorsToot', message)
|
store.commit(`${space}/${MUTATION_TYPES.DELETE_ANCESTORS_TOOT}`, message)
|
||||||
},
|
}
|
||||||
updateToot(message) {
|
const updateToot = (message: Entity.Status) => {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/updateToot', message)
|
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||||
},
|
}
|
||||||
deleteToot(message) {
|
const deleteToot = (message: Entity.Status) => {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteToot', message)
|
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message)
|
||||||
},
|
}
|
||||||
updateDescendantsToot(message) {
|
const updateDescendantsToot = (message: Entity.Status) => {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/updateDescendantsToot', message)
|
store.commit(`${space}/${MUTATION_TYPES.UPDATE_DESCENDANTS_TOOT}`, message)
|
||||||
},
|
}
|
||||||
deleteDescendantsToot(message) {
|
const deleteDescendantsToot = (message: Entity.Status) => {
|
||||||
this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteDescendantsToot', message)
|
store.commit(`${space}/${MUTATION_TYPES.DELETE_DESCENDANTS_TOOT}`, message)
|
||||||
},
|
}
|
||||||
focusNext() {
|
const focusNext = () => {
|
||||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
if (currentFocusedIndex.value === -1) {
|
||||||
if (currentIndex === -1) {
|
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
} else if (currentFocusedIndex.value < timeline.value.length - 1) {
|
||||||
} else if (currentIndex < this.timeline.length - 1) {
|
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
focusPrev() {
|
const focusPrev = () => {
|
||||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
if (currentFocusedIndex.value > 0) {
|
||||||
if (currentIndex > 0) {
|
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
focusToot(message) {
|
const focusToot = (message: Entity.Status) => {
|
||||||
this.focusedId = message.uri + message.id
|
focusedId.value = message.uri + message.id
|
||||||
},
|
}
|
||||||
focusTimeline() {
|
const focusTimeline = () => {
|
||||||
this.focusedId = 0
|
focusedId.value = null
|
||||||
EventEmitter.emit('focus-timeline')
|
EventEmitter.emit('focus-timeline')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
original,
|
||||||
|
ancestors,
|
||||||
|
focusedId,
|
||||||
|
modalOpened,
|
||||||
|
filters,
|
||||||
|
updateAncestorsToot,
|
||||||
|
deleteAncestorsToot,
|
||||||
|
focusNext,
|
||||||
|
focusPrev,
|
||||||
|
focusTimeline,
|
||||||
|
focusToot,
|
||||||
|
message,
|
||||||
|
updateToot,
|
||||||
|
deleteToot,
|
||||||
|
descendants,
|
||||||
|
updateDescendantsToot,
|
||||||
|
deleteDescendantsToot
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
Loading…
Reference in New Issue