pinafore/routes/_components/Layout.html

55 lines
1.3 KiB
HTML
Raw Normal View History

2018-01-17 08:16:15 +01:00
<:Window bind:innerHeight='innerHeight'/>
2018-01-09 02:44:29 +01:00
<Nav page={{page}} />
2018-01-07 00:51:25 +01:00
2018-01-17 08:16:15 +01:00
<div class="container" on:scroll="onScroll(event)" ref:node>
2018-01-16 03:29:28 +01:00
<main>
<slot></slot>
</main>
</div>
2018-01-07 00:51:25 +01:00
<script>
import Nav from './Nav.html';
2018-01-17 08:16:15 +01:00
import { virtualListStore } from '../_utils/virtualListStore'
import throttle from 'lodash/throttle'
const THROTTLE_DELAY = 500
2018-01-07 00:51:25 +01:00
export default {
2018-01-17 08:16:15 +01:00
oncreate() {
this.observe('innerHeight', throttle(() => {
// respond to window resize events
this.store.set({
offsetHeight: this.refs.node.offsetHeight
})
}, THROTTLE_DELAY))
this.store.set({
scrollTop: this.refs.node.scrollTop,
scrollHeight: this.refs.node.scrollHeight,
offsetHeight: this.refs.node.offsetHeight
})
},
2018-01-07 00:51:25 +01:00
components: {
Nav
2018-01-17 08:16:15 +01:00
},
store: () => virtualListStore,
events: {
scroll(node, callback) {
const onScroll = throttle(callback, THROTTLE_DELAY)
node.addEventListener('scroll', onScroll);
return {
teardown() {
node.removeEventListener('scroll', onScroll);
}
};
}
},
methods: {
onScroll(event) {
this.store.set({
scrollTop: event.target.scrollTop,
scrollHeight: event.target.scrollHeight
})
}
}
2018-01-07 00:51:25 +01:00
};
</script>