Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure Feed maintains scroll position #6984

Merged
merged 3 commits into from
Jul 16, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions panel/models/column.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export class ScrollButtonClick extends ModelEvent {

export class ColumnView extends BkColumnView {
declare model: Column
_updating: boolean = false

scroll_down_button_el: HTMLElement

Expand All @@ -30,6 +31,9 @@ export class ColumnView extends BkColumnView {
}

scroll_to_position(): void {
if (this._updating) {
return
}
requestAnimationFrame(() => {
this.el.scrollTo({top: this.model.scroll_position, behavior: "instant"})
})
Expand All @@ -56,7 +60,9 @@ export class ColumnView extends BkColumnView {
}

record_scroll_position(): void {
this._updating = true
this.model.scroll_position = Math.round(this.el.scrollTop)
this._updating = false
}

toggle_scroll_button(): void {
Expand Down
14 changes: 12 additions & 2 deletions panel/models/feed.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import {Column, ColumnView} from "./column"
import type * as p from "@bokehjs/core/properties"
import {build_views} from "@bokehjs/core/build_views"
import type {UIElementView} from "@bokehjs/models/ui/ui_element"
import {ColumnView as BkColumnView} from "@bokehjs/models/layouts/column"
philippjfr marked this conversation as resolved.
Show resolved Hide resolved

export class FeedView extends ColumnView {
declare model: Feed

_intersection_observer: IntersectionObserver
_last_visible: UIElementView | null
_lock: any = null
_sync: boolean

override initialize(): void {
Expand Down Expand Up @@ -54,10 +55,19 @@ export class FeedView extends ColumnView {
}

override async update_children(): Promise<void> {
const last = this._last_visible
const scroll_top = this.el.scrollTop
const before_offset = last?.el.offsetTop || 0
this._sync = false
await super.update_children()
this._sync = true
this._last_visible?.el.scrollIntoView(true)
requestAnimationFrame(() => {
const after_offset = last?.el.offsetTop || 0
const offset = (after_offset-before_offset)
if (offset > 0) {
this.el.scrollTo({top: scroll_top + offset, behavior: "instant"})
philippjfr marked this conversation as resolved.
Show resolved Hide resolved
}
})
}

override async build_child_views(): Promise<UIElementView[]> {
Expand Down
Loading