pinafore/routes/_components/Layout.html

90 lines
2.3 KiB
HTML
Raw Normal View History

2018-01-19 05:25:12 +00:00
<:Window bind:innerHeight />
2018-01-22 04:02:32 +00:00
<Nav :page :dynamicPage :dynamicHref :dynamicIcon :dynamicLabel/>
2018-01-06 23:51:25 +00:00
2018-01-20 23:37:40 +00:00
<div class="container" on:scroll="onScroll(event)" on:fullscreen="onFullscreenChange()" 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-20 23:37:40 +00:00
import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../_utils/fullscreen'
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')
2018-01-20 23:37:40 +00:00
if (this.get('fullscreen')) {
return
}
2018-01-17 08:59:15 +00:00
callback(event)
stop('onScroll')
}, SCROLL_EVENT_DELAY, {
2018-01-17 08:06:24 +00:00
leading: true,
trailing: true
})
2018-01-21 05:06:30 +00:00
node.addEventListener('scroll', onScroll)
2018-01-17 07:16:15 +00:00
return {
teardown() {
2018-01-21 05:06:30 +00:00
node.removeEventListener('scroll', onScroll)
2018-01-17 07:16:15 +00:00
}
2018-01-21 05:06:30 +00:00
}
2018-01-20 23:37:40 +00:00
},
fullscreen(node, callback) {
const onFullscreen = (() => {
callback()
})
attachFullscreenListener(onFullscreen)
return {
teardown() {
detachFullscreenListener(onFullscreen)
}
}
2018-01-17 07:16:15 +00:00
}
},
methods: {
onScroll(event) {
this.store.set({
scrollTop: event.target.scrollTop,
scrollHeight: event.target.scrollHeight
})
2018-01-20 23:37:40 +00:00
},
onFullscreenChange() {
mark('onFullscreenChange')
console.log('is fullscreen? ', isFullscreen())
this.set({ fullscreen: isFullscreen() })
stop('onFullscreenChange')
2018-01-17 07:16:15 +00:00
}
}
2018-01-06 23:51:25 +00:00
};
</script>