2018-01-17 07:16:15 +00:00
|
|
|
<:Window bind:innerHeight='innerHeight'/>
|
2018-01-09 01:44:29 +00:00
|
|
|
<Nav page={{page}} />
|
2018-01-06 23:51:25 +00:00
|
|
|
|
2018-01-17 07:16:15 +00:00
|
|
|
<div class="container" on:scroll="onScroll(event)" ref:node>
|
2018-01-16 02:29:28 +00:00
|
|
|
<main>
|
|
|
|
<slot></slot>
|
|
|
|
</main>
|
|
|
|
</div>
|
2018-01-06 23:51:25 +00:00
|
|
|
<script>
|
|
|
|
import Nav from './Nav.html';
|
2018-01-17 07:16:15 +00:00
|
|
|
import { virtualListStore } from '../_utils/virtualListStore'
|
|
|
|
|
2018-01-17 08:06:24 +00:00
|
|
|
import debounce from 'lodash/debounce'
|
2018-01-17 07:16:15 +00:00
|
|
|
import throttle from 'lodash/throttle'
|
2018-01-17 08:59:15 +00:00
|
|
|
import { mark, stop } from '../_utils/marks'
|
2018-01-17 08:06:24 +00:00
|
|
|
|
|
|
|
const SCROLL_EVENT_DELAY = 300
|
|
|
|
const RESIZE_EVENT_DELAY = 700
|
2018-01-06 23:51:25 +00:00
|
|
|
|
|
|
|
export default {
|
2018-01-17 07:16:15 +00:00
|
|
|
oncreate() {
|
2018-01-17 08:59:15 +00:00
|
|
|
mark('onCreate Layout')
|
2018-01-19 04:25:34 +00:00
|
|
|
let node = this.refs.node
|
2018-01-17 08:06:24 +00:00
|
|
|
this.observe('innerHeight', debounce(() => {
|
2018-01-17 07:16:15 +00:00
|
|
|
// respond to window resize events
|
|
|
|
this.store.set({
|
2018-01-19 04:25:34 +00:00
|
|
|
offsetHeight: node.offsetHeight
|
2018-01-17 07:16:15 +00:00
|
|
|
})
|
2018-01-17 08:06:24 +00:00
|
|
|
}, RESIZE_EVENT_DELAY))
|
2018-01-17 07:16:15 +00:00
|
|
|
this.store.set({
|
2018-01-19 04:25:34 +00:00
|
|
|
scrollTop: node.scrollTop,
|
|
|
|
scrollHeight: node.scrollHeight,
|
|
|
|
offsetHeight: node.offsetHeight
|
2018-01-17 07:16:15 +00:00
|
|
|
})
|
2018-01-17 08:59:15 +00:00
|
|
|
stop('onCreate Layout')
|
2018-01-17 07:16:15 +00:00
|
|
|
},
|
2018-01-06 23:51:25 +00:00
|
|
|
components: {
|
|
|
|
Nav
|
2018-01-17 07:16:15 +00:00
|
|
|
},
|
|
|
|
store: () => virtualListStore,
|
|
|
|
events: {
|
|
|
|
scroll(node, callback) {
|
2018-01-17 08:59:15 +00:00
|
|
|
const onScroll = throttle(event => {
|
|
|
|
mark('onScroll')
|
|
|
|
callback(event)
|
|
|
|
stop('onScroll')
|
|
|
|
}, SCROLL_EVENT_DELAY, {
|
2018-01-17 08:06:24 +00:00
|
|
|
leading: true,
|
|
|
|
trailing: true
|
|
|
|
})
|
2018-01-17 07:16:15 +00:00
|
|
|
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-06 23:51:25 +00:00
|
|
|
};
|
|
|
|
</script>
|