diff options
Diffstat (limited to 'vendor/assets/javascripts/vue-virtual-scroller/src/components')
3 files changed, 49 insertions, 19 deletions
diff --git a/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScroller.vue b/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScroller.vue index e9f3acea9d8..2d354d605f8 100644 --- a/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScroller.vue +++ b/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScroller.vue @@ -10,7 +10,7 @@ @visible="onScrollerVisible" v-on="listeners" > - <template slot-scope="{ item: itemWithSize, index, active }"> + <template #default="{ item: itemWithSize, index, active }"> <slot v-bind="{ item: itemWithSize.item, @@ -20,10 +20,10 @@ }" /> </template> - <template slot="before"> + <template #before> <slot name="before" /> </template> - <template slot="after"> + <template #after> <slot name="after" /> </template> </RecycleScroller> diff --git a/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScrollerItem.vue b/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScrollerItem.vue index 3db24018ad0..f581d7345ab 100644 --- a/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScrollerItem.vue +++ b/vendor/assets/javascripts/vue-virtual-scroller/src/components/DynamicScrollerItem.vue @@ -195,14 +195,15 @@ export default { observeSize () { if (!this.vscrollResizeObserver) return - this.vscrollResizeObserver.observe(this.$el.parentNode) - this.$el.parentNode.addEventListener('resize', this.onResize) + this.$_parentNode = this.$el.parentNode; + this.vscrollResizeObserver.observe(this.$_parentNode) + this.$_parentNode.addEventListener('resize', this.onResize) }, unobserveSize () { if (!this.vscrollResizeObserver) return - this.vscrollResizeObserver.unobserve(this.$el.parentNode) - this.$el.parentNode.removeEventListener('resize', this.onResize) + this.vscrollResizeObserver.unobserve(this.$_parentNode) + this.$_parentNode.removeEventListener('resize', this.onResize) }, onResize (event) { diff --git a/vendor/assets/javascripts/vue-virtual-scroller/src/components/RecycleScroller.vue b/vendor/assets/javascripts/vue-virtual-scroller/src/components/RecycleScroller.vue index 5e9661a53c8..3ce35999d8a 100644 --- a/vendor/assets/javascripts/vue-virtual-scroller/src/components/RecycleScroller.vue +++ b/vendor/assets/javascripts/vue-virtual-scroller/src/components/RecycleScroller.vue @@ -572,20 +572,49 @@ export default { }, scrollToItem (index) { - let scroll - if (this.itemSize === null) { - scroll = index > 0 ? this.sizes[index - 1].accumulator : 0 - } else { - scroll = index * this.itemSize - } - this.scrollToPosition(scroll) + this.$_scrollDirty = true + const { viewport, scrollDirection, scrollDistance } = this.scrollToPosition(index) + viewport[scrollDirection] = scrollDistance + + setTimeout(() => { + this.$_scrollDirty = false + this.updateVisibleItems(false, true) + }) }, - scrollToPosition (position) { - if (this.direction === 'vertical') { - this.$el.scrollTop = position - } else { - this.$el.scrollLeft = position + scrollToPosition (index) { + const getPositionOfItem = (index) => { + if (this.itemSize === null) { + return index > 0 ? this.sizes[index - 1].accumulator : 0 + } else { + return index * this.itemSize + } + } + const position = getPositionOfItem(index) + const direction = this.direction === 'vertical' + ? { scroll: 'scrollTop', start: 'top' } + : { scroll: 'scrollLeft', start: 'left' } + + if (this.pageMode) { + const viewportEl = ScrollParent(this.$el) + // HTML doesn't overflow like other elements + const scrollTop = viewportEl.tagName === 'HTML' ? 0 : viewportEl[direction.scroll] + const viewport = viewportEl.getBoundingClientRect() + + const scroller = this.$el.getBoundingClientRect() + const scrollerPosition = scroller[direction.start] - viewport[direction.start] + + return { + viewport: viewportEl, + scrollDirection: direction.scroll, + scrollDistance: position + scrollTop + scrollerPosition, + } + } + + return { + viewport: this.$el, + scrollDirection: direction.scroll, + scrollDistance: position, } }, |