|
|
|
@ -33,7 +33,8 @@ const Timeline = {
|
|
|
|
|
return {
|
|
|
|
|
paused: false,
|
|
|
|
|
unfocused: false,
|
|
|
|
|
bottomedOut: false
|
|
|
|
|
bottomedOut: false,
|
|
|
|
|
virtualScrollIndex: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
@ -78,6 +79,16 @@ const Timeline = {
|
|
|
|
|
},
|
|
|
|
|
pinnedStatusIdsObject () {
|
|
|
|
|
return keyBy(this.pinnedStatusIds)
|
|
|
|
|
},
|
|
|
|
|
statusesToDisplay () {
|
|
|
|
|
const amount = this.timeline.visibleStatuses.length
|
|
|
|
|
const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
|
|
|
|
|
const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
|
|
|
|
|
const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
|
|
|
|
|
return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
|
|
|
|
|
},
|
|
|
|
|
virtualScrollingEnabled () {
|
|
|
|
|
return this.$store.getters.mergedConfig.virtualScrolling
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created () {
|
|
|
|
@ -85,7 +96,7 @@ const Timeline = {
|
|
|
|
|
const credentials = store.state.users.currentUser.credentials
|
|
|
|
|
const showImmediately = this.timeline.visibleStatuses.length === 0
|
|
|
|
|
|
|
|
|
|
window.addEventListener('scroll', this.scrollLoad)
|
|
|
|
|
window.addEventListener('scroll', this.handleScroll)
|
|
|
|
|
|
|
|
|
|
if (store.state.api.fetchers[this.timelineName]) { return false }
|
|
|
|
|
|
|
|
|
@ -104,9 +115,10 @@ const Timeline = {
|
|
|
|
|
this.unfocused = document.hidden
|
|
|
|
|
}
|
|
|
|
|
window.addEventListener('keydown', this.handleShortKey)
|
|
|
|
|
setTimeout(this.determineVisibleStatuses, 250)
|
|
|
|
|
},
|
|
|
|
|
destroyed () {
|
|
|
|
|
window.removeEventListener('scroll', this.scrollLoad)
|
|
|
|
|
window.removeEventListener('scroll', this.handleScroll)
|
|
|
|
|
window.removeEventListener('keydown', this.handleShortKey)
|
|
|
|
|
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
|
|
|
|
|
this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
|
|
|
|
@ -146,6 +158,48 @@ const Timeline = {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}, 1000, this),
|
|
|
|
|
determineVisibleStatuses () {
|
|
|
|
|
if (!this.$refs.timeline) return
|
|
|
|
|
if (!this.virtualScrollingEnabled) return
|
|
|
|
|
|
|
|
|
|
const statuses = this.$refs.timeline.children
|
|
|
|
|
const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
|
|
|
|
|
|
|
|
|
|
if (statuses.length === 0) return
|
|
|
|
|
|
|
|
|
|
const height = Math.max(document.body.offsetHeight, window.pageYOffset)
|
|
|
|
|
|
|
|
|
|
const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
|
|
|
|
|
|
|
|
|
|
// Start from approximating the index of some visible status by using the
|
|
|
|
|
// the center of the screen on the timeline.
|
|
|
|
|
let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
|
|
|
|
|
let err = statuses[approxIndex].getBoundingClientRect().y
|
|
|
|
|
|
|
|
|
|
// if we have a previous scroll index that can be used, test if it's
|
|
|
|
|
// closer than the previous approximation, use it if so
|
|
|
|
|
|
|
|
|
|
const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
|
|
|
|
|
if (Math.abs(err) > virtualScrollIndexY) {
|
|
|
|
|
approxIndex = cappedScrollIndex
|
|
|
|
|
err = virtualScrollIndexY
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// if the status is too far from viewport, check the next/previous ones if
|
|
|
|
|
// they happen to be better
|
|
|
|
|
while (err < -20 && approxIndex < statuses.length - 1) {
|
|
|
|
|
err += statuses[approxIndex].offsetHeight
|
|
|
|
|
approxIndex++
|
|
|
|
|
}
|
|
|
|
|
while (err > window.innerHeight + 100 && approxIndex > 0) {
|
|
|
|
|
approxIndex--
|
|
|
|
|
err -= statuses[approxIndex].offsetHeight
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// this status is now the center point for virtual scrolling and visible
|
|
|
|
|
// statuses will be nearby statuses before and after it
|
|
|
|
|
this.virtualScrollIndex = approxIndex
|
|
|
|
|
},
|
|
|
|
|
scrollLoad (e) {
|
|
|
|
|
const bodyBRect = document.body.getBoundingClientRect()
|
|
|
|
|
const height = Math.max(bodyBRect.height, -(bodyBRect.y))
|
|
|
|
@ -155,6 +209,10 @@ const Timeline = {
|
|
|
|
|
this.fetchOlderStatuses()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleScroll: throttle(function (e) {
|
|
|
|
|
this.determineVisibleStatuses()
|
|
|
|
|
this.scrollLoad(e)
|
|
|
|
|
}, 200),
|
|
|
|
|
handleVisibilityChange () {
|
|
|
|
|
this.unfocused = document.hidden
|
|
|
|
|
}
|
|
|
|
|