add basic handling for window resize

This commit is contained in:
Nolan Lawson 2018-03-31 17:42:52 -07:00
parent 0779436714
commit ef5b922e77
2 changed files with 30 additions and 0 deletions

View file

@ -25,6 +25,7 @@
<script> <script>
import { virtualListStore } from './virtualListStore' import { virtualListStore } from './virtualListStore'
import { AsyncLayout } from '../../_utils/AsyncLayout' import { AsyncLayout } from '../../_utils/AsyncLayout'
import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
export default { export default {
oncreate() { oncreate() {
@ -35,6 +36,11 @@
// update all item heights in one batch for better perf // update all item heights in one batch for better perf
this.store.batchUpdateForRealm('itemHeights', key, rect.height) this.store.batchUpdateForRealm('itemHeights', key, rect.height)
}) })
this.doRecalculateHeight = this.doRecalculateHeight.bind(this)
registerResizeListener(this.doRecalculateHeight)
},
ondestroy() {
unregisterResizeListener(this.doRecalculateHeight)
}, },
store: () => virtualListStore, store: () => virtualListStore,
computed: { computed: {

24
routes/_utils/resize.js Normal file
View file

@ -0,0 +1,24 @@
import debounce from 'lodash/debounce'
const DEBOUNCE_DELAY = 700
const listeners = new Set()
if (process.browser && process.env.NODE_ENV !== 'production') {
window.resizeListeners = listeners
}
if (process.browser) {
window.addEventListener('resize', debounce(() => {
console.log('resize')
listeners.forEach(listener => listener())
}, DEBOUNCE_DELAY))
}
export function registerResizeListener (listener) {
listeners.add(listener)
}
export function unregisterResizeListener (listener) {
listeners.delete(listener)
}