tweak animation for revealing the timeline

This commit is contained in:
Nolan Lawson 2018-01-24 19:26:08 -08:00
parent d0391a6c0f
commit 98c0defacc
2 changed files with 21 additions and 8 deletions

View File

@ -8,6 +8,7 @@
footerComponent="{{LoadingFooter}}" footerComponent="{{LoadingFooter}}"
showFooter="{{initialized && runningUpdate}}" showFooter="{{initialized && runningUpdate}}"
storeKey="{{timeline}}" storeKey="{{timeline}}"
on:initializedVisibleItems="initialize()"
/> />
</div> </div>
<style> <style>
@ -45,13 +46,6 @@
} else { } else {
this.addStatuses(await this.fetchStatusesAndPossiblyFallBack()) this.addStatuses(await this.fetchStatusesAndPossiblyFallBack())
} }
// TODO: this is just a guess. allVisibleItemsHaveHeight should be more accurate
requestAnimationFrame(() => {
requestAnimationFrame(() => {
this.set({initialized: true})
this.fire('initialized')
})
})
}, },
ondestroy() { ondestroy() {
cachedTimelines[this.get('timeline')] = this.get('statusIds') cachedTimelines[this.get('timeline')] = this.get('statusIds')
@ -85,6 +79,17 @@
methods: { methods: {
splice: splice, splice: splice,
push: push, push: push,
initialize() {
if (this.get('initialized') || !this.get('statusIds') || !this.get('statusIds').length) {
return
}
requestAnimationFrame(() => {
requestAnimationFrame(() => {
this.set({initialized: true})
this.fire('initialized')
})
})
},
async onScrollToBottom() { async onScrollToBottom() {
if (!this.get('initialized')) { if (!this.get('initialized')) {
return return

View File

@ -44,6 +44,12 @@
}, SCROLL_TO_BOTTOM_DELAY) }, SCROLL_TO_BOTTOM_DELAY)
}) })
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) {
this.fire('initializedVisibleItems')
}
})
let observedOnce = false let observedOnce = false
this.observe('distanceFromBottom', (distanceFromBottom) => { this.observe('distanceFromBottom', (distanceFromBottom) => {
@ -68,7 +74,9 @@
computed: { computed: {
distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => { distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
return $scrollHeight - $scrollTop - $offsetHeight return $scrollHeight - $scrollTop - $offsetHeight
} },
// TODO: bug in svelte store, shouldn't need to do this
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight
} }
} }
</script> </script>