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