61 lines
1.6 KiB
HTML
61 lines
1.6 KiB
HTML
<div class="virtual-list-header {shown ? 'shown' : ''} {fadedIn ? 'faded-in' : ''}"
|
|
ref:node >
|
|
<svelte:component this={component} {virtualProps} />
|
|
</div>
|
|
<style>
|
|
.virtual-list-header {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
opacity: 0;
|
|
z-index: 10;
|
|
transition: none;
|
|
display: none;
|
|
}
|
|
.virtual-list-header.shown {
|
|
display: block;
|
|
transition: opacity 0.333s linear;
|
|
}
|
|
.virtual-list-header.faded-in {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { virtualListStore } from './virtualListStore'
|
|
import { doubleRAF } from '../../_utils/doubleRAF'
|
|
import { mark, stop } from '../../_utils/marks'
|
|
import { observe } from 'svelte-extras'
|
|
|
|
export default {
|
|
oncreate () {
|
|
this.observe('shown', shown => {
|
|
if (shown) {
|
|
this.doCalculateHeight()
|
|
doubleRAF(() => this.set({ fadedIn: true })) // animate in
|
|
} else {
|
|
this.set({ fadedIn: false })
|
|
}
|
|
}, { init: false })
|
|
},
|
|
data: () => ({
|
|
fadedIn: false
|
|
}),
|
|
store: () => virtualListStore,
|
|
methods: {
|
|
observe,
|
|
doCalculateHeight () {
|
|
let { heightCalculated } = this.get()
|
|
if (heightCalculated) { // only need to calculate once, it never changes
|
|
return
|
|
}
|
|
this.set({ heightCalculated: true })
|
|
requestAnimationFrame(() => {
|
|
mark('VirtualListHeader gBCR')
|
|
let rect = this.refs.node.getBoundingClientRect()
|
|
stop('VirtualListHeader gBCR')
|
|
this.store.setForRealm({ headerHeight: rect.height })
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |