spoiler button is faster now
This commit is contained in:
parent
d682982a54
commit
c67ba5c0a9
|
@ -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')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue