spoiler button is faster now

This commit is contained in:
Nolan Lawson 2018-03-23 08:29:54 -07:00
parent d682982a54
commit c67ba5c0a9
2 changed files with 20 additions and 12 deletions

View file

@ -55,11 +55,13 @@
}, },
methods: { methods: {
onClickSpoilerButton() { onClickSpoilerButton() {
let uuid = this.get('uuid') requestAnimationFrame(() => {
let $spoilersShown = this.store.get('spoilersShown') let uuid = this.get('uuid')
$spoilersShown[uuid] = !$spoilersShown[uuid] let $spoilersShown = this.store.get('spoilersShown')
this.store.set({'spoilersShown': $spoilersShown}) $spoilersShown[uuid] = !$spoilersShown[uuid]
this.fire('recalculateHeight') this.store.set({'spoilersShown': $spoilersShown})
this.fire('recalculateHeight')
})
} }
} }
} }

View file

@ -28,7 +28,13 @@
export default { export default {
oncreate() { oncreate() {
this.doRecalculateHeight() let asyncLayout = new AsyncLayout(node => node.getAttribute('virtual-list-key'))
let key = this.get('key')
asyncLayout.observe(key, this.refs.node, (rect) => {
asyncLayout.disconnect()
// update all item heights in one batch for better perf
this.store.batchUpdateForRealm('itemHeights', key, rect.height)
})
}, },
store: () => virtualListStore, store: () => virtualListStore,
computed: { computed: {
@ -36,13 +42,13 @@
}, },
methods: { methods: {
doRecalculateHeight() { doRecalculateHeight() {
let asyncLayout = new AsyncLayout(node => node.getAttribute('virtual-list-key')) // Recalculate immediately because this is done on-demand, e.g.
// when clicking the "More" button on a spoiler.
let rect = this.refs.node.getBoundingClientRect()
let key = this.get('key') let key = this.get('key')
asyncLayout.observe(key, this.refs.node, (rect) => { let itemHeights = this.store.get('itemHeights')
asyncLayout.disconnect() itemHeights[key] = rect.height
// update all item heights in one batch for better perf this.store.setForRealm({itemHeights})
this.store.batchUpdateForRealm('itemHeights', key, rect.height)
})
} }
} }
} }