contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add 'scrollIntoView' to baseUIElement, autoscroll questions into view when appropriate

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-12-06 03:43:54 +01:00
parent aec5ffba79
commit 9e97eba519
4 changed files with 78 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

30
UI/BaseUIElement.ts
View file

@ -3,6 +3,8 @@
*
* Assumes a read-only configuration, so it has no 'ListenTo'
*/
import {Utils} from "../Utils";
export default abstract class BaseUIElement {
protected _constructedHtmlElement: HTMLElement
protected isDestroyed = false
@ -41,6 +43,34 @@ export default abstract class BaseUIElement {
this._constructedHtmlElement?.scrollTo(0, 0)
}
public ScrollIntoView(options?: {
onlyIfPartiallyHidden?: boolean
}) {
if(this._constructedHtmlElement === undefined){
return
}
let alignToTop = true;
if(options?.onlyIfPartiallyHidden){
// Is the element completely in the view?
const parentRect = Utils.findParentWithScrolling(this._constructedHtmlElement.parentElement).getBoundingClientRect();
const elementRect = this._constructedHtmlElement.getBoundingClientRect();
// Check if the element is within the vertical bounds of the parent element
const topIsVisible = elementRect.top >= parentRect.top
const bottomIsVisible = elementRect.bottom <= parentRect.bottom
const inView = topIsVisible && bottomIsVisible ;
if(inView){
return
}
if(topIsVisible){
alignToTop = false
}
}
this._constructedHtmlElement?.scrollIntoView({
behavior: "smooth",
block: "start"
})
}
/**
* Adds all the relevant classes, space separated
*/