Merge pull request #3463 from h3poteto/iss-3301/timeline-space
refs #3301 Rewrite TimelineSpace with composition API
This commit is contained in:
AkiraFukushima
GitHub
commit
09d18d2e32
|
|
@ -18,150 +18,154 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import SideMenu from './TimelineSpace/SideMenu'
|
||||
import HeaderMenu from './TimelineSpace/HeaderMenu'
|
||||
import Contents from './TimelineSpace/Contents'
|
||||
import Modals from './TimelineSpace/Modals'
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import SideMenu from './TimelineSpace/SideMenu.vue'
|
||||
import HeaderMenu from './TimelineSpace/HeaderMenu.vue'
|
||||
import Contents from './TimelineSpace/Contents.vue'
|
||||
import Modals from './TimelineSpace/Modals.vue'
|
||||
import Mousetrap from 'mousetrap'
|
||||
import ReceiveDrop from './TimelineSpace/ReceiveDrop'
|
||||
import ReceiveDrop from './TimelineSpace/ReceiveDrop.vue'
|
||||
import { AccountLoadError } from '@/errors/load'
|
||||
import { TimelineFetchError } from '@/errors/fetch'
|
||||
import { NewTootAttachLength } from '@/errors/validations'
|
||||
import { EventEmitter } from '~/src/renderer/components/event'
|
||||
import { EventEmitter } from '@/components/event'
|
||||
import { useStore } from '@/store'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace'
|
||||
import { ACTION_TYPES as SIDEBAR_ACTION } from '@/store/TimelineSpace/Contents/SideBar'
|
||||
import { MUTATION_TYPES as GLOBAL_HEADER_MUTATION } from '@/store/GlobalHeader'
|
||||
import { MUTATION_TYPES as JUMP_MUTATION } from '@/store/TimelineSpace/Modals/Jump'
|
||||
import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'timeline-space',
|
||||
components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop },
|
||||
data() {
|
||||
return {
|
||||
dropTarget: null,
|
||||
droppableVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
loading: state => state.TimelineSpace.loading,
|
||||
collapse: state => state.TimelineSpace.SideMenu.collapse
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function () {
|
||||
return !this.modalOpened
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
|
||||
await this.initialize().finally(() => {
|
||||
this.$store.commit('GlobalHeader/updateChanging', false)
|
||||
setup() {
|
||||
const space = 'TimelineSpace'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
|
||||
const dropTarget = ref<any>(null)
|
||||
const droppableVisible = ref<boolean>(false)
|
||||
|
||||
const loading = computed(() => store.state.TimelineSpace.loading)
|
||||
const collapse = computed(() => store.state.TimelineSpace.SideMenu.collapse)
|
||||
// const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
// const shortcutEnabled = computed(() => !modalOpened.value)
|
||||
|
||||
onMounted(async () => {
|
||||
store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.CLOSE}`)
|
||||
await initialize().finally(() => {
|
||||
store.commit(`GlobalHeader/${GLOBAL_HEADER_MUTATION.UPDATE_CHANGING}`, false)
|
||||
})
|
||||
;(window as any).addEventListener('dragenter', onDragEnter)
|
||||
;(window as any).addEventListener('dragleave', onDragLeave)
|
||||
;(window as any).addEventListener('dragover', onDragOver)
|
||||
;(window as any).addEventListener('drop', handleDrop)
|
||||
Mousetrap.bind(['command+t', 'ctrl+t'], () => {
|
||||
store.commit(`TimelineSpace/Modals/Jump/${JUMP_MUTATION.CHANGE_MODAL}`, true)
|
||||
})
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('dragenter', this.onDragEnter)
|
||||
window.addEventListener('dragleave', this.onDragLeave)
|
||||
window.addEventListener('dragover', this.onDragOver)
|
||||
window.addEventListener('drop', this.handleDrop)
|
||||
Mousetrap.bind(['command+t', 'ctrl+t'], () => {
|
||||
this.$store.commit('TimelineSpace/Modals/Jump/changeModal', true)
|
||||
onBeforeUnmount(() => {
|
||||
;(window as any).removeEventListener('dragenter', onDragEnter)
|
||||
;(window as any).removeEventListener('dragleave', onDragLeave)
|
||||
;(window as any).removeEventListener('dragover', onDragOver)
|
||||
;(window as any).removeEventListener('drop', handleDrop)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMINGS}`)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.UNBIND_STREAMINGS}`)
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('dragenter', this.onDragEnter)
|
||||
window.removeEventListener('dragleave', this.onDragLeave)
|
||||
window.removeEventListener('dragover', this.onDragOver)
|
||||
window.removeEventListener('drop', this.handleDrop)
|
||||
this.$store.dispatch('TimelineSpace/stopStreamings')
|
||||
this.$store.dispatch('TimelineSpace/unbindStreamings')
|
||||
},
|
||||
methods: {
|
||||
async clear() {
|
||||
this.$store.dispatch('TimelineSpace/unbindStreamings')
|
||||
await this.$store.dispatch('TimelineSpace/clearAccount')
|
||||
this.$store.dispatch('TimelineSpace/clearContentsTimelines')
|
||||
await this.$store.dispatch('TimelineSpace/removeShortcutEvents')
|
||||
await this.$store.dispatch('TimelineSpace/clearUnread')
|
||||
|
||||
const clear = async () => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.UNBIND_STREAMINGS}`)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.CLEAR_ACCOUNT}`)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.CLEAR_CONTENTS_TIMELINES}`)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.REMOVE_SHORTCUT_EVENTS}`)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.CLEAR_UNREAD}`)
|
||||
return 'clear'
|
||||
},
|
||||
async initialize() {
|
||||
await this.clear()
|
||||
}
|
||||
const initialize = async () => {
|
||||
await clear()
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/initLoad', this.$route.params.id)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.INIT_LOAD}`, route.params.id)
|
||||
} catch (err) {
|
||||
if (err instanceof AccountLoadError) {
|
||||
this.$message({
|
||||
message: this.$t('message.account_load_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.account_load_error'),
|
||||
type: 'error'
|
||||
})
|
||||
} else if (err instanceof TimelineFetchError) {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
await this.$store.dispatch('TimelineSpace/prepareSpace')
|
||||
},
|
||||
handleDrop(e) {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.PREPARE_SPACE}`)
|
||||
}
|
||||
const handleDrop = (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
this.droppableVisible = false
|
||||
if (e.dataTransfer.files.item(0) === null || e.dataTransfer.files.item(0) === undefined) {
|
||||
droppableVisible.value = false
|
||||
if (e.dataTransfer?.files.item(0) === null || e.dataTransfer?.files.item(0) === undefined) {
|
||||
return false
|
||||
}
|
||||
const file = e.dataTransfer.files.item(0)
|
||||
if (!file.type.includes('image') && !file.type.includes('video')) {
|
||||
this.$message({
|
||||
message: this.$t('validation.new_toot.attach_image'),
|
||||
const file = e.dataTransfer?.files.item(0)
|
||||
if (file === null || (!file.type.includes('image') && !file.type.includes('video'))) {
|
||||
ElMessage({
|
||||
message: i18n.t('validation.new_toot.attach_image'),
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
|
||||
store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
|
||||
store
|
||||
.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.UPLOAD_IMAGE}`, file)
|
||||
.then(() => {
|
||||
EventEmitter.emit('image-uploaded')
|
||||
})
|
||||
.catch(err => {
|
||||
if (err instanceof NewTootAttachLength) {
|
||||
this.$message({
|
||||
message: this.$t('validation.new_toot.attach_length', { max: 4 }),
|
||||
ElMessage({
|
||||
message: i18n.t('validation.new_toot.attach_length', { max: 4 }),
|
||||
type: 'error'
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('message.attach_error'),
|
||||
ElMessage({
|
||||
message: i18n.t('message.attach_error'),
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
return false
|
||||
},
|
||||
onDragEnter(e) {
|
||||
if (e.dataTransfer.types.indexOf('Files') >= 0) {
|
||||
this.dropTarget = e.target
|
||||
this.droppableVisible = true
|
||||
}
|
||||
},
|
||||
onDragLeave(e) {
|
||||
if (e.target === this.dropTarget) {
|
||||
this.droppableVisible = false
|
||||
}
|
||||
},
|
||||
onDragOver(e) {
|
||||
e.preventDefault()
|
||||
},
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'help':
|
||||
this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', true)
|
||||
break
|
||||
}
|
||||
const onDragEnter = (e: DragEvent) => {
|
||||
if (e.dataTransfer && e.dataTransfer.types.indexOf('Files') >= 0) {
|
||||
dropTarget.value = e.target
|
||||
droppableVisible.value = true
|
||||
}
|
||||
}
|
||||
const onDragLeave = (e: DragEvent) => {
|
||||
if (e.target === dropTarget.value) {
|
||||
droppableVisible.value = false
|
||||
}
|
||||
}
|
||||
const onDragOver = (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
return {
|
||||
loading,
|
||||
collapse,
|
||||
droppableVisible
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -25,51 +25,54 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import SideBar from './Contents/SideBar'
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed } from 'vue'
|
||||
import SideBar from './Contents/SideBar.vue'
|
||||
import { useStore } from '@/store'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'contents',
|
||||
data() {
|
||||
return {
|
||||
sidebarWidth: 360,
|
||||
dragging: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SideBar
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents', {
|
||||
loading: state => state.loading
|
||||
}),
|
||||
...mapState('TimelineSpace/Contents/SideBar', {
|
||||
openSideBar: state => state.openSideBar
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
customWidth: function () {
|
||||
return {
|
||||
'--current-sidebar-width': `${this.sidebarWidth}px`
|
||||
setup() {
|
||||
const store = useStore()
|
||||
|
||||
const sidebarWidth = ref<number>(360)
|
||||
const dragging = ref<boolean>(false)
|
||||
const contents = ref<HTMLElement | null>(null)
|
||||
|
||||
const loading = computed(() => store.state.TimelineSpace.Contents.loading)
|
||||
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
|
||||
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const customWidth = computed(() => ({ '--current-sidebar-width': `${sidebarWidth.value}px` }))
|
||||
|
||||
const resize = (event: MouseEvent) => {
|
||||
if (dragging.value && event.clientX) {
|
||||
sidebarWidth.value = window.innerWidth - event.clientX
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resize(event) {
|
||||
if (this.dragging && event.clientX) {
|
||||
this.sidebarWidth = window.innerWidth - event.clientX
|
||||
}
|
||||
},
|
||||
dragStart() {
|
||||
this.dragging = true
|
||||
this.$refs.contents.style.setProperty('user-select', 'none')
|
||||
},
|
||||
dragEnd() {
|
||||
this.dragging = false
|
||||
this.$refs.contents.style.setProperty('user-select', 'text')
|
||||
const dragStart = () => {
|
||||
dragging.value = true
|
||||
contents.value?.style.setProperty('user-select', 'none')
|
||||
}
|
||||
const dragEnd = () => {
|
||||
dragging.value = false
|
||||
contents.value?.style.setProperty('user-select', 'text')
|
||||
}
|
||||
|
||||
return {
|
||||
contents,
|
||||
customWidth,
|
||||
loading,
|
||||
openSideBar,
|
||||
modalOpened,
|
||||
resize,
|
||||
dragStart,
|
||||
dragEnd
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -36,96 +36,101 @@
|
|||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useStore } from '@/store'
|
||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
|
||||
import { MUTATION_TYPES as HOME_MUTATION } from '@/store/TimelineSpace/Contents/Home'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'header-menu',
|
||||
data() {
|
||||
return {
|
||||
showReblogs: true,
|
||||
showReplies: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/HeaderMenu', {
|
||||
title: state => state.title,
|
||||
loading: state => state.loading
|
||||
setup() {
|
||||
const space = 'TimelineSpace/HeaderMenu'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const i18n = useI18next()
|
||||
|
||||
const showReblogs = ref<boolean>(true)
|
||||
const showReplies = ref<boolean>(true)
|
||||
|
||||
const title = computed(() => store.state.TimelineSpace.HeaderMenu.title)
|
||||
const loading = computed(() => store.state.TimelineSpace.HeaderMenu.loading)
|
||||
const id = computed(() => route.params.id)
|
||||
|
||||
onMounted(() => {
|
||||
channelName()
|
||||
loadTLOption()
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SETUP_LOADING}`)
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.channelName()
|
||||
this.loadTLOption()
|
||||
this.$store.dispatch('TimelineSpace/HeaderMenu/setupLoading')
|
||||
},
|
||||
watch: {
|
||||
$route: function () {
|
||||
this.channelName()
|
||||
this.loadTLOption()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
id() {
|
||||
return this.$route.params.id
|
||||
},
|
||||
channelName() {
|
||||
switch (this.$route.name) {
|
||||
watch(
|
||||
() => route.name,
|
||||
() => {
|
||||
channelName()
|
||||
loadTLOption()
|
||||
}
|
||||
)
|
||||
const channelName = () => {
|
||||
switch (route.name) {
|
||||
case 'home':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
|
||||
break
|
||||
case 'notifications':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.notification'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.notification'))
|
||||
break
|
||||
case 'favourites':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.favourite'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.favourite'))
|
||||
break
|
||||
case 'bookmarks':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.bookmark'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.bookmark'))
|
||||
break
|
||||
case 'mentions':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.mention'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.mention'))
|
||||
break
|
||||
case 'follow-requests':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.follow_requests'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.follow_requests'))
|
||||
break
|
||||
case 'local':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.local'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.local'))
|
||||
break
|
||||
case 'public':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.public'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.public'))
|
||||
break
|
||||
case 'hashtag-list':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.hashtag'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.hashtag'))
|
||||
break
|
||||
case 'tag':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', `#${this.$route.params.tag}`)
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, `#${route.params.tag}`)
|
||||
break
|
||||
case 'search':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.search'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.search'))
|
||||
break
|
||||
case 'lists':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.lists'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.lists'))
|
||||
break
|
||||
case 'direct-messages':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.direct_messages'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.direct_messages'))
|
||||
break
|
||||
case 'edit-list':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.members'))
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.members'))
|
||||
break
|
||||
case 'list':
|
||||
this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST}`, route.params.list_id)
|
||||
break
|
||||
default:
|
||||
console.log(this.$route)
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home'))
|
||||
console.debug(route)
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
|
||||
break
|
||||
}
|
||||
},
|
||||
openNewTootModal() {
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
|
||||
},
|
||||
reload() {
|
||||
switch (this.$route.name) {
|
||||
}
|
||||
const openNewTootModal = () => {
|
||||
store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
|
||||
}
|
||||
const reload = () => {
|
||||
switch (route.name) {
|
||||
case 'home':
|
||||
case 'notifications':
|
||||
case 'mentions':
|
||||
|
|
@ -136,14 +141,14 @@ export default {
|
|||
case 'tag':
|
||||
case 'list':
|
||||
case 'direct-messages':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true)
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_RELOAD}`, true)
|
||||
break
|
||||
default:
|
||||
console.error('Not implemented')
|
||||
console.error('Not implemented: ', route.name)
|
||||
}
|
||||
},
|
||||
reloadable() {
|
||||
switch (this.$route.name) {
|
||||
}
|
||||
const reloadable = () => {
|
||||
switch (route.name) {
|
||||
case 'home':
|
||||
case 'notifications':
|
||||
case 'mentions':
|
||||
|
|
@ -158,41 +163,54 @@ export default {
|
|||
default:
|
||||
return false
|
||||
}
|
||||
},
|
||||
loadTLOption() {
|
||||
switch (this.$route.name) {
|
||||
}
|
||||
const loadTLOption = () => {
|
||||
switch (route.name) {
|
||||
case 'home':
|
||||
this.showReblogs = this.$store.state.TimelineSpace.Contents.Home.showReblogs
|
||||
this.showReplies = this.$store.state.TimelineSpace.Contents.Home.showReplies
|
||||
showReblogs.value = store.state.TimelineSpace.Contents.Home.showReblogs
|
||||
showReplies.value = store.state.TimelineSpace.Contents.Home.showReplies
|
||||
break
|
||||
default:
|
||||
console.log('Not implemented')
|
||||
break
|
||||
}
|
||||
},
|
||||
applyTLOption() {
|
||||
switch (this.$route.name) {
|
||||
}
|
||||
const applyTLOption = () => {
|
||||
switch (route.name) {
|
||||
case 'home':
|
||||
this.$store.commit('TimelineSpace/Contents/Home/showReblogs', this.showReblogs)
|
||||
this.$store.commit('TimelineSpace/Contents/Home/showReplies', this.showReplies)
|
||||
store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REBLOGS}`, showReblogs.value)
|
||||
store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REPLIES}`, showReplies.value)
|
||||
break
|
||||
default:
|
||||
console.log('Not implemented')
|
||||
break
|
||||
}
|
||||
},
|
||||
TLOption() {
|
||||
switch (this.$route.name) {
|
||||
}
|
||||
const TLOption = () => {
|
||||
switch (route.name) {
|
||||
case 'home':
|
||||
return true
|
||||
default:
|
||||
return false
|
||||
}
|
||||
},
|
||||
settings() {
|
||||
const url = `/${this.id()}/settings`
|
||||
this.$router.push(url)
|
||||
}
|
||||
const settings = () => {
|
||||
const url = `/${id.value}/settings`
|
||||
router.push(url)
|
||||
}
|
||||
|
||||
return {
|
||||
title,
|
||||
loading,
|
||||
openNewTootModal,
|
||||
reloadable,
|
||||
reload,
|
||||
TLOption,
|
||||
showReblogs,
|
||||
showReplies,
|
||||
applyTLOption,
|
||||
settings
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -33,8 +33,13 @@ const mutations: MutationTree<HeaderMenuState> = {
|
|||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_LIST: 'fetchList',
|
||||
SETUP_LOADING: 'setupLoading'
|
||||
}
|
||||
|
||||
const actions: ActionTree<HeaderMenuState, RootState> = {
|
||||
fetchList: async ({ commit, rootState }, listID: string): Promise<Entity.List> => {
|
||||
[ACTION_TYPES.FETCH_LIST]: async ({ commit, rootState }, listID: string): Promise<Entity.List> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
|
|
@ -45,7 +50,7 @@ const actions: ActionTree<HeaderMenuState, RootState> = {
|
|||
commit(MUTATION_TYPES.UPDATE_TITLE, `#${res.data.title}`)
|
||||
return res.data
|
||||
},
|
||||
setupLoading: ({ commit }) => {
|
||||
[ACTION_TYPES.SETUP_LOADING]: ({ commit }) => {
|
||||
const axiosLoading = new AxiosLoading()
|
||||
axiosLoading.on('start', (_: number) => {
|
||||
commit(MUTATION_TYPES.CHANGE_LOADING, true)
|
||||
|
|
|
|||
Loading…
Reference in New Issue