Change loading in order to change channel when loading
This commit is contained in:
AkiraFukushima
parent
582e751fba
commit
351be72586
|
|
@ -1,32 +1,29 @@
|
|||
<template>
|
||||
<div id="directmessages" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
|
||||
</div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
v-for="message in timeline"
|
||||
:key="message.uri + message.id"
|
||||
<div id="directmessages" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
v-for="message in timeline"
|
||||
:key="message.uri + message.id"
|
||||
>
|
||||
</toot>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</toot>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,7 +37,7 @@ export default {
|
|||
name: 'directmessages',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null
|
||||
}
|
||||
|
|
@ -59,10 +56,8 @@ export default {
|
|||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
unreadNotification: state => state.TimelineSpace.unreadNotification
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', [
|
||||
'modalOpened'
|
||||
]),
|
||||
shortcutEnabled: function () {
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function() {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
|
|
@ -74,40 +69,38 @@ export default {
|
|||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
async mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
|
||||
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
|
||||
if (!this.unreadNotification.direct) {
|
||||
await this.initialize()
|
||||
.catch(_ => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
await this.initialize().catch(_ => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
}
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
|
||||
Event.$on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeUpdate () {
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
if (!this.unreadNotification.direct) {
|
||||
this.$store.dispatch('TimelineSpace/stopDirectMessagesStreaming')
|
||||
this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
|
||||
}
|
||||
Event.$off('focus-timeline')
|
||||
},
|
||||
destroyed () {
|
||||
destroyed() {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/archiveTimeline')
|
||||
|
|
@ -120,15 +113,14 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
startReload: function(newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
focusedId: function(newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
|
|
@ -138,21 +130,24 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
async initialize () {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline')
|
||||
.catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
async initialize() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline').catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindDirectMessagesStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startDirectMessagesStreaming')
|
||||
},
|
||||
onScroll (event) {
|
||||
onScroll(event) {
|
||||
// for lazyLoading
|
||||
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('directmessages').clientHeight - 10) && !this.lazyloading) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/DirectMessages/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('directmessages').clientHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/DirectMessages/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
|
|
@ -161,20 +156,20 @@ export default {
|
|||
})
|
||||
}
|
||||
// for unread control
|
||||
if ((event.target.scrollTop > 10) && this.heading) {
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
|
||||
} else if ((event.target.scrollTop <= 10) && !this.heading) {
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
|
||||
}
|
||||
},
|
||||
updateToot (message) {
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/updateToot', message)
|
||||
},
|
||||
deleteToot (message) {
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/DirectMessages/deleteToot', message)
|
||||
},
|
||||
async reload () {
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
|
|
@ -182,14 +177,11 @@ export default {
|
|||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper () {
|
||||
scrollTop(
|
||||
document.getElementById('scrollable'),
|
||||
0
|
||||
)
|
||||
upper() {
|
||||
scrollTop(document.getElementById('scrollable'), 0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext () {
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
@ -197,7 +189,7 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev () {
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
|
|
@ -205,13 +197,13 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot (message) {
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar () {
|
||||
focusSidebar() {
|
||||
Event.$emit('focus-sidebar')
|
||||
},
|
||||
handleKey (event) {
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
|
|||
|
|
@ -1,29 +1,26 @@
|
|||
<template>
|
||||
<div id="favourites" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
|
||||
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
|
||||
</div>
|
||||
<div class="fav" v-for="message in favourites" v-bind:key="message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
<div id="favourites" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
|
||||
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
|
||||
<div class="fav" v-for="message in favourites" v-bind:key="message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
>
|
||||
</toot>
|
||||
</toot>
|
||||
</div>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -37,7 +34,7 @@ export default {
|
|||
name: 'favourites',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
heading: true,
|
||||
focusedId: null
|
||||
|
|
@ -53,16 +50,15 @@ export default {
|
|||
lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
|
||||
filter: state => state.TimelineSpace.Contents.Favourites.filter
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', [
|
||||
'modalOpened'
|
||||
]),
|
||||
shortcutEnabled: function () {
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function() {
|
||||
return !this.focusedId && !this.modalOpened
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', this.account)
|
||||
created() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', this.account)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.favourite_fetch_error'),
|
||||
|
|
@ -70,24 +66,24 @@ export default {
|
|||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
|
||||
Event.$on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
Event.$off('focus-timeline')
|
||||
},
|
||||
destroyed () {
|
||||
destroyed() {
|
||||
this.$store.commit('TimelineSpace/Contents/Favourites/updateFavourites', [])
|
||||
if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
|
||||
document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
|
||||
|
|
@ -95,15 +91,14 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
startReload: function(newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
focusedId: function(newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.heading = false
|
||||
} else if (newState === null && !this.heading) {
|
||||
|
|
@ -112,15 +107,19 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
updateToot (message) {
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
|
||||
},
|
||||
deleteToot (message) {
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Favourites/deleteToot', message)
|
||||
},
|
||||
onScroll (event) {
|
||||
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
|
||||
onScroll(event) {
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('favourites').clientHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.favourite_fetch_error'),
|
||||
|
|
@ -129,35 +128,31 @@ export default {
|
|||
})
|
||||
}
|
||||
// for upper
|
||||
if ((event.target.scrollTop > 10) && this.heading) {
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.heading = false
|
||||
} else if ((event.target.scrollTop <= 10) && !this.heading) {
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.heading = true
|
||||
}
|
||||
},
|
||||
async reload () {
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
try {
|
||||
const account = await this.reloadable()
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper () {
|
||||
scrollTop(
|
||||
document.getElementById('scrollable'),
|
||||
0
|
||||
)
|
||||
upper() {
|
||||
scrollTop(document.getElementById('scrollable'), 0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext () {
|
||||
focusNext() {
|
||||
const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.favourites[0].uri
|
||||
|
|
@ -165,7 +160,7 @@ export default {
|
|||
this.focusedId = this.favourites[currentIndex + 1].uri
|
||||
}
|
||||
},
|
||||
focusPrev () {
|
||||
focusPrev() {
|
||||
const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
|
|
@ -173,13 +168,13 @@ export default {
|
|||
this.focusedId = this.favourites[currentIndex - 1].uri
|
||||
}
|
||||
},
|
||||
focusToot (message) {
|
||||
focusToot(message) {
|
||||
this.focusedId = message.id
|
||||
},
|
||||
focusSidebar () {
|
||||
focusSidebar() {
|
||||
Event.$emit('focus-sidebar')
|
||||
},
|
||||
handleKey (event) {
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.favourites[0].uri
|
||||
|
|
|
|||
|
|
@ -1,31 +1,29 @@
|
|||
<template>
|
||||
<div name="tag" v-shortkey="shortcutEnabled ? {next:['j']} : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
|
||||
</div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="tag-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
<div name="tag" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="tag-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
>
|
||||
</toot>
|
||||
</toot>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,7 +38,7 @@ export default {
|
|||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
props: ['tag'],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null
|
||||
}
|
||||
|
|
@ -56,10 +54,8 @@ export default {
|
|||
unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline,
|
||||
filter: state => state.TimelineSpace.Contents.Hashtag.Tag.filter
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', [
|
||||
'modalOpened'
|
||||
]),
|
||||
shortcutEnabled: function () {
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function() {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
|
|
@ -71,41 +67,38 @@ export default {
|
|||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
this.load(this.tag)
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
mounted() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.load(this.tag).finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
|
||||
|
||||
Event.$on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
tag: function (newTag, _oldTag) {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
tag: function(newTag, _oldTag) {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.reset()
|
||||
this.load(newTag)
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
this.load(newTag).finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
startReload: function (newState, oldState) {
|
||||
startReload: function(newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
focusedId: function(newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
|
|
@ -114,30 +107,28 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
|
||||
this.reset()
|
||||
Event.$off('focus-timeline')
|
||||
},
|
||||
methods: {
|
||||
async load (tag) {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
async load(tag) {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
return true
|
||||
},
|
||||
reset () {
|
||||
reset() {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/archiveTimeline')
|
||||
|
|
@ -147,59 +138,57 @@ export default {
|
|||
document.getElementById('scrollable').scrollTop = 0
|
||||
}
|
||||
},
|
||||
updateToot (toot) {
|
||||
updateToot(toot) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/updateToot', toot)
|
||||
},
|
||||
deleteToot (toot) {
|
||||
deleteToot(toot) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/deleteToot', toot)
|
||||
},
|
||||
onScroll (event) {
|
||||
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('tag')[0].clientHeight - 10) && !this.lazyloading) {
|
||||
onScroll(event) {
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementsByName('tag')[0].clientHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', {
|
||||
tag: this.tag,
|
||||
status: this.timeline[this.timeline.length - 1]
|
||||
})
|
||||
}
|
||||
// for unread control
|
||||
if ((event.target.scrollTop > 10) && this.heading) {
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
|
||||
} else if ((event.target.scrollTop <= 10) && !this.heading) {
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
|
||||
}
|
||||
},
|
||||
async reload () {
|
||||
async reload() {
|
||||
const tag = this.tag
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper () {
|
||||
scrollTop(
|
||||
document.getElementById('scrollable'),
|
||||
0
|
||||
)
|
||||
upper() {
|
||||
scrollTop(document.getElementById('scrollable'), 0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext () {
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
@ -207,7 +196,7 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev () {
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
|
|
@ -215,13 +204,13 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot (message) {
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar () {
|
||||
focusSidebar() {
|
||||
Event.$emit('focus-sidebar')
|
||||
},
|
||||
handleKey (event) {
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="members">
|
||||
<div class="add-account">
|
||||
<el-button type="text" class="add-button" @click="addAccount">
|
||||
<icon name="plus"></icon>
|
||||
</el-button>
|
||||
<div class="members">
|
||||
<div class="add-account">
|
||||
<el-button type="text" class="add-button" @click="addAccount">
|
||||
<icon name="plus"></icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<template v-for="account in members">
|
||||
<user :user="account" :remove="true" @removeAccount="removeAccount"></user>
|
||||
</template>
|
||||
</div>
|
||||
<template v-for="account in members">
|
||||
<user :user="account" :remove="true" @removeAccount="removeAccount"></user>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -24,12 +24,12 @@ export default {
|
|||
members: state => state.TimelineSpace.Contents.Lists.Edit.members
|
||||
})
|
||||
},
|
||||
created () {
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
async init() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.list_id)
|
||||
} catch (err) {
|
||||
|
|
@ -38,11 +38,11 @@ export default {
|
|||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
}
|
||||
},
|
||||
async removeAccount (account) {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
async removeAccount(account) {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/removeAccount', {
|
||||
account: account,
|
||||
|
|
@ -55,10 +55,10 @@ export default {
|
|||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
}
|
||||
},
|
||||
addAccount () {
|
||||
addAccount() {
|
||||
this.$store.commit('TimelineSpace/Modals/AddListMember/setListId', this.list_id)
|
||||
this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', true)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,29 @@
|
|||
<template>
|
||||
<div name="list" v-shortkey="shortcutEnabled ? {next:['j']} : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
|
||||
</div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="list-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
<div name="list" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="list-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
>
|
||||
</toot>
|
||||
</toot>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,7 +38,7 @@ export default {
|
|||
props: ['list_id'],
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null
|
||||
}
|
||||
|
|
@ -56,10 +54,8 @@ export default {
|
|||
unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline,
|
||||
filter: state => state.TimelineSpace.Contents.Lists.Show.filter
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', [
|
||||
'modalOpened'
|
||||
]),
|
||||
shortcutEnabled: function () {
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function() {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
|
|
@ -71,41 +67,38 @@ export default {
|
|||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
this.load()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
created() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.load().finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
Event.$on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
list_id: function () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
this.load()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
list_id: function() {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
this.load().finally(() => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
},
|
||||
startReload: function (newState, oldState) {
|
||||
startReload: function(newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
focusedId: function(newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
|
|
@ -114,10 +107,10 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
||||
},
|
||||
destroyed () {
|
||||
destroyed() {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/archiveTimeline')
|
||||
|
|
@ -128,7 +121,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
async load () {
|
||||
async load() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
||||
try {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
|
||||
|
|
@ -138,67 +131,64 @@ export default {
|
|||
type: 'error'
|
||||
})
|
||||
}
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
return 'started'
|
||||
},
|
||||
updateToot (message) {
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/updateToot', message)
|
||||
},
|
||||
deleteToot (message) {
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/deleteToot', message)
|
||||
},
|
||||
onScroll (event) {
|
||||
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('list')[0].clientHeight - 10) && !this.lazyloading) {
|
||||
onScroll(event) {
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementsByName('list')[0].clientHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/lazyFetchTimeline', {
|
||||
list_id: this.list_id,
|
||||
status: this.timeline[this.timeline.length - 1]
|
||||
})
|
||||
}
|
||||
// for unread control
|
||||
if ((event.target.scrollTop > 10) && this.heading) {
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
|
||||
} else if ((event.target.scrollTop <= 10) && !this.heading) {
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
|
||||
}
|
||||
},
|
||||
async reload () {
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} finally {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper () {
|
||||
scrollTop(
|
||||
document.getElementById('scrollable'),
|
||||
0
|
||||
)
|
||||
upper() {
|
||||
scrollTop(document.getElementById('scrollable'), 0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext () {
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
@ -206,7 +196,7 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev () {
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
|
|
@ -214,13 +204,13 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot (message) {
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar () {
|
||||
focusSidebar() {
|
||||
Event.$emit('focus-sidebar')
|
||||
},
|
||||
handleKey (event) {
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
|
|||
|
|
@ -1,32 +1,29 @@
|
|||
<template>
|
||||
<div id="local" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
|
||||
</div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="local-timeline" v-for="message in timeline" :key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
<div id="local" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="local-timeline" v-for="message in timeline" :key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
>
|
||||
</toot>
|
||||
</toot>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,7 +37,7 @@ export default {
|
|||
name: 'local',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null
|
||||
}
|
||||
|
|
@ -59,10 +56,8 @@ export default {
|
|||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
unreadNotification: state => state.TimelineSpace.unreadNotification
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', [
|
||||
'modalOpened'
|
||||
]),
|
||||
shortcutEnabled: function () {
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function() {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
|
|
@ -74,40 +69,38 @@ export default {
|
|||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
async mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
|
||||
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
|
||||
if (!this.unreadNotification.local) {
|
||||
await this.initialize()
|
||||
.finally(_ => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
await this.initialize().finally(_ => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
}
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
|
||||
Event.$on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeUpdate () {
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
if (!this.unreadNotification.local) {
|
||||
this.$store.dispatch('TimelineSpace/stopLocalStreaming')
|
||||
this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
|
||||
}
|
||||
Event.$off('focus-timeline')
|
||||
},
|
||||
destroyed () {
|
||||
destroyed() {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
|
||||
this.$store.commit('TimelineSpace/Contents/Local/archiveTimeline')
|
||||
|
|
@ -120,15 +113,14 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
startReload: function(newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
focusedId: function(newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
|
|
@ -138,42 +130,40 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
async initialize () {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline')
|
||||
.catch(_ => {
|
||||
async initialize() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline').catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindLocalStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startLocalStreaming')
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/deleteToot', message)
|
||||
},
|
||||
onScroll(event) {
|
||||
if (event.target.clientHeight + event.target.scrollTop >= document.getElementById('local').clientHeight - 10 && !this.lazyloading) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindLocalStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startLocalStreaming')
|
||||
},
|
||||
updateToot (message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
|
||||
},
|
||||
deleteToot (message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/deleteToot', message)
|
||||
},
|
||||
onScroll (event) {
|
||||
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
// for unread control
|
||||
if ((event.target.scrollTop > 10) && this.heading) {
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
|
||||
} else if ((event.target.scrollTop <= 10) && !this.heading) {
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
|
||||
}
|
||||
},
|
||||
async reload () {
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
|
|
@ -181,14 +171,11 @@ export default {
|
|||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper () {
|
||||
scrollTop(
|
||||
document.getElementById('scrollable'),
|
||||
0
|
||||
)
|
||||
upper() {
|
||||
scrollTop(document.getElementById('scrollable'), 0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext () {
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
@ -196,7 +183,7 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev () {
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
|
|
@ -204,13 +191,13 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot (message) {
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar () {
|
||||
focusSidebar() {
|
||||
Event.$emit('focus-sidebar')
|
||||
},
|
||||
handleKey (event) {
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
|
|||
|
|
@ -1,32 +1,29 @@
|
|||
<template>
|
||||
<div id="public" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
|
||||
</div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="public-timeline" v-for="message in timeline" :key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
<div id="public" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
|
||||
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
|
||||
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
|
||||
<transition-group name="timeline" tag="div">
|
||||
<div class="public-timeline" v-for="message in timeline" :key="message.uri + message.id">
|
||||
<toot
|
||||
:message="message"
|
||||
:filter="filter"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusRight="focusSidebar"
|
||||
@selectToot="focusToot(message)"
|
||||
>
|
||||
</toot>
|
||||
</toot>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
|
||||
</div>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,7 +37,7 @@ export default {
|
|||
name: 'public',
|
||||
components: { Toot },
|
||||
mixins: [reloadable],
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
focusedId: null
|
||||
}
|
||||
|
|
@ -59,10 +56,8 @@ export default {
|
|||
startReload: state => state.TimelineSpace.HeaderMenu.reload,
|
||||
unreadNotification: state => state.TimelineSpace.unreadNotification
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', [
|
||||
'modalOpened'
|
||||
]),
|
||||
shortcutEnabled: function () {
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
|
||||
shortcutEnabled: function() {
|
||||
if (this.modalOpened) {
|
||||
return false
|
||||
}
|
||||
|
|
@ -74,40 +69,38 @@ export default {
|
|||
return currentIndex === -1
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
async mounted() {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
|
||||
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
|
||||
if (!this.unreadNotification.public) {
|
||||
await this.initialize()
|
||||
.finally(_ => {
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
})
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
|
||||
await this.initialize().finally(_ => {
|
||||
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
|
||||
})
|
||||
}
|
||||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
|
||||
Event.$on('focus-timeline', () => {
|
||||
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
|
||||
const previousFocusedId = this.focusedId
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.focusedId = previousFocusedId
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeUpdate () {
|
||||
beforeUpdate() {
|
||||
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
|
||||
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
beforeDestroy() {
|
||||
if (!this.unreadNotification.public) {
|
||||
this.$store.dispatch('TimelineSpace/stopPublicStreaming')
|
||||
this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
|
||||
}
|
||||
Event.$off('focus-timeline')
|
||||
},
|
||||
destroyed () {
|
||||
destroyed() {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
|
||||
this.$store.commit('TimelineSpace/Contents/Public/archiveTimeline')
|
||||
|
|
@ -120,15 +113,14 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
startReload: function(newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
this.reload().finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
},
|
||||
focusedId: function (newState, _oldState) {
|
||||
focusedId: function(newState, _oldState) {
|
||||
if (newState && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
|
||||
} else if (newState === null && !this.heading) {
|
||||
|
|
@ -138,42 +130,40 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
async initialize () {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline')
|
||||
.catch(_ => {
|
||||
async initialize() {
|
||||
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline').catch(_ => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindPublicStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startPublicStreaming')
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/deleteToot', message)
|
||||
},
|
||||
onScroll(event) {
|
||||
if (event.target.clientHeight + event.target.scrollTop >= document.getElementById('public').clientHeight - 10 && !this.lazyloading) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await this.$store.dispatch('TimelineSpace/bindPublicStreaming')
|
||||
this.$store.dispatch('TimelineSpace/startPublicStreaming')
|
||||
},
|
||||
updateToot (message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
|
||||
},
|
||||
deleteToot (message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/deleteToot', message)
|
||||
},
|
||||
onScroll (event) {
|
||||
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
// for unread control
|
||||
if ((event.target.scrollTop > 10) && this.heading) {
|
||||
if (event.target.scrollTop > 10 && this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
|
||||
} else if ((event.target.scrollTop <= 10) && !this.heading) {
|
||||
} else if (event.target.scrollTop <= 10 && !this.heading) {
|
||||
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
|
||||
this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
|
||||
}
|
||||
},
|
||||
async reload () {
|
||||
async reload() {
|
||||
this.$store.commit('TimelineSpace/changeLoading', true)
|
||||
try {
|
||||
await this.reloadable()
|
||||
|
|
@ -181,14 +171,11 @@ export default {
|
|||
this.$store.commit('TimelineSpace/changeLoading', false)
|
||||
}
|
||||
},
|
||||
upper () {
|
||||
scrollTop(
|
||||
document.getElementById('scrollable'),
|
||||
0
|
||||
)
|
||||
upper() {
|
||||
scrollTop(document.getElementById('scrollable'), 0)
|
||||
this.focusedId = null
|
||||
},
|
||||
focusNext () {
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
@ -196,7 +183,7 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev () {
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === 0) {
|
||||
this.focusedId = null
|
||||
|
|
@ -204,13 +191,13 @@ export default {
|
|||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot (message) {
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusSidebar () {
|
||||
focusSidebar() {
|
||||
Event.$emit('focus-sidebar')
|
||||
},
|
||||
handleKey (event) {
|
||||
handleKey(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
|
|
|
|||
|
|
@ -1,29 +1,30 @@
|
|||
<template>
|
||||
<div id="search">
|
||||
<div class="search-header" v-loading="loading" :element-loading-background="loadingBackground">
|
||||
<div class="search-header">
|
||||
<el-form :inline="true">
|
||||
<el-select v-model="target" :placeholder="$t('search.search')" class="search-target">
|
||||
<el-option
|
||||
v-for="item in searchTargets"
|
||||
:key="item.target"
|
||||
:label="item.label"
|
||||
:value="item.target">
|
||||
</el-option>
|
||||
<el-option v-for="item in searchTargets" :key="item.target" :label="item.label" :value="item.target"> </el-option>
|
||||
</el-select>
|
||||
<input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-shortkey.avoid v-on:keyup.enter="search" autofocus></input>
|
||||
<input
|
||||
v-model="query"
|
||||
:placeholder="$t('search.keyword')"
|
||||
class="search-keyword"
|
||||
v-shortkey.avoid
|
||||
v-on:keyup.enter="search"
|
||||
autofocus
|
||||
/>
|
||||
<div class="clearfix"></div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search-result">
|
||||
<search-account v-if="target==='account'"></search-account>
|
||||
<search-tag v-else-if="target==='tag'"></search-tag>
|
||||
<search-toots v-else-if="target==='toot'"></search-toots>
|
||||
<search-account v-if="target === 'account'"></search-account>
|
||||
<search-tag v-else-if="target === 'tag'"></search-tag>
|
||||
<search-toots v-else-if="target === 'toot'"></search-toots>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import SearchAccount from './Search/Account'
|
||||
import SearchTag from './Search/Tag'
|
||||
import SearchToots from './Search/Toots'
|
||||
|
|
@ -31,19 +32,15 @@ import SearchToots from './Search/Toots'
|
|||
export default {
|
||||
name: 'search',
|
||||
components: { SearchAccount, SearchTag, SearchToots },
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
target: 'account',
|
||||
query: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
loading: state => state.TimelineSpace.Contents.Search.loading,
|
||||
loadingBackground: state => state.App.theme.wrapper_mask_color
|
||||
}),
|
||||
searchTargets: {
|
||||
get () {
|
||||
get() {
|
||||
return [
|
||||
{
|
||||
target: 'account',
|
||||
|
|
@ -62,34 +59,31 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
search () {
|
||||
search() {
|
||||
switch (this.target) {
|
||||
case 'account':
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
break
|
||||
case 'tag':
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
break
|
||||
case 'toot':
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Toots/search', this.query)
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
this.$store.dispatch('TimelineSpace/Contents/Search/Toots/search', this.query).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.search_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
throw new AccountLoadError()
|
||||
})
|
||||
|
||||
await dispatch('detectPleroma')
|
||||
dispatch('TimelineSpace/SideMenu/fetchLists', account, { root: true })
|
||||
dispatch('TimelineSpace/SideMenu/fetchFollowRequests', account, { root: true })
|
||||
await dispatch('loadUnreadNotification', accountId)
|
||||
|
|
@ -119,7 +120,6 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
|
|||
await dispatch('fetchContentsTimelines', account).catch(_ => {
|
||||
throw new TimelineFetchError()
|
||||
})
|
||||
await dispatch('detectPleroma')
|
||||
await dispatch('bindStreamings', account)
|
||||
dispatch('startStreamings', account)
|
||||
dispatch('fetchEmojis', account)
|
||||
|
|
|
|||
|
|
@ -1,38 +1,23 @@
|
|||
import Account, { AccountState } from './Search/Account'
|
||||
import Tag, { TagState } from './Search/Tag'
|
||||
import Toots, { TootsState } from './Search/Toots'
|
||||
import { Module, MutationTree } from 'vuex'
|
||||
import { Module } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
|
||||
export interface SearchState {
|
||||
loading: boolean
|
||||
}
|
||||
export interface SearchState {}
|
||||
|
||||
export interface SearchModuleState extends SearchState {
|
||||
Account: AccountState,
|
||||
Tag: TagState,
|
||||
Account: AccountState
|
||||
Tag: TagState
|
||||
Toots: TootsState
|
||||
}
|
||||
|
||||
const state = (): SearchState => ({
|
||||
loading: false
|
||||
})
|
||||
|
||||
export const MUTATION_TYPES = {
|
||||
CHANGE_LOADING: 'changeLoading'
|
||||
}
|
||||
|
||||
const mutations: MutationTree<SearchState> = {
|
||||
[MUTATION_TYPES.CHANGE_LOADING]: (state, loading: boolean) => {
|
||||
state.loading = loading
|
||||
}
|
||||
}
|
||||
const state = (): SearchState => ({})
|
||||
|
||||
const Search: Module<SearchState, RootState> = {
|
||||
namespaced: true,
|
||||
modules: { Account, Tag, Toots },
|
||||
state: state,
|
||||
mutations: mutations
|
||||
state: state
|
||||
}
|
||||
|
||||
export default Search
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const mutations: MutationTree<AccountState> = {
|
|||
|
||||
const actions: ActionTree<AccountState, RootState> = {
|
||||
search: async ({ commit, rootState }, query: string): Promise<Array<Account>> => {
|
||||
commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
|
||||
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
|
||||
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
|
||||
return client
|
||||
.get<Array<Account>>('/accounts/search', { q: query, resolve: true })
|
||||
|
|
@ -31,7 +31,7 @@ const actions: ActionTree<AccountState, RootState> = {
|
|||
return res.data
|
||||
})
|
||||
.finally(() => {
|
||||
commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
|
||||
commit('TimelineSpace/Contents/changeLoading', false, { root: true })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,18 +22,16 @@ const mutations: MutationTree<TagState> = {
|
|||
|
||||
const actions: ActionTree<TagState, RootState> = {
|
||||
search: ({ commit, rootState }, query: string): Promise<Array<Tag>> => {
|
||||
commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
|
||||
const client = new Mastodon(
|
||||
rootState.TimelineSpace.account.accessToken!,
|
||||
rootState.TimelineSpace.account.baseURL + '/api/v2'
|
||||
)
|
||||
return client.get<Results>('/search', { q: query, resolve: true })
|
||||
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
|
||||
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v2')
|
||||
return client
|
||||
.get<Results>('/search', { q: query, resolve: true })
|
||||
.then(res => {
|
||||
commit(MUTATION_TYPES.UPDATE_RESULTS, res.data.hashtags)
|
||||
return res.data.hashtags
|
||||
})
|
||||
.finally(() => {
|
||||
commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
|
||||
commit('TimelineSpace/Contents/changeLoading', false, { root: true })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,18 +22,16 @@ const mutations: MutationTree<TootsState> = {
|
|||
|
||||
const actions: ActionTree<TootsState, RootState> = {
|
||||
search: ({ commit, rootState }, query: string): Promise<Array<Status>> => {
|
||||
commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
|
||||
const client = new Mastodon(
|
||||
rootState.TimelineSpace.account.accessToken!,
|
||||
rootState.TimelineSpace.account.baseURL + '/api/v1'
|
||||
)
|
||||
return client.get<Results>('/search', { q: query, resolve: true })
|
||||
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
|
||||
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
|
||||
return client
|
||||
.get<Results>('/search', { q: query, resolve: true })
|
||||
.then(res => {
|
||||
commit(MUTATION_TYPES.UPDATE_RESULTS, res.data.statuses)
|
||||
return res.data.statuses
|
||||
})
|
||||
.finally(() => {
|
||||
commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
|
||||
commit('TimelineSpace/Contents/changeLoading', false, { root: true })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue