Bastian-Greshake-Tzovaras/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

36
UI/Popup/EditableTagRendering.ts
View file

@ -1,16 +1,15 @@
import { UIEventSource } from "../../Logic/UIEventSource"
import {UIEventSource} from "../../Logic/UIEventSource"
import TagRenderingQuestion from "./TagRenderingQuestion"
import Translations from "../i18n/Translations"
import Combine from "../Base/Combine"
import TagRenderingAnswer from "./TagRenderingAnswer"
import Svg from "../../Svg"
import Toggle from "../Input/Toggle"
import BaseUIElement from "../BaseUIElement"
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
import { Unit } from "../../Models/Unit"
import {Unit} from "../../Models/Unit"
import Lazy from "../Base/Lazy"
import { FixedUiElement } from "../Base/FixedUiElement"
import { EditButton } from "./SaveButton"
import {FixedUiElement} from "../Base/FixedUiElement"
import {EditButton} from "./SaveButton"
export default class EditableTagRendering extends Toggle {
constructor(
@ -31,10 +30,9 @@ export default class EditableTagRendering extends Toggle {
configuration.IsKnown(tags) &&
(configuration?.condition?.matchesProperties(tags) ?? true)
)
const editMode = options.editMode ?? new UIEventSource<boolean>(false)
super(
new Lazy(() => {
const editMode = options.editMode ?? new UIEventSource<boolean>(false)
let rendering = EditableTagRendering.CreateRendering(
state,
tags,
@ -54,6 +52,13 @@ export default class EditableTagRendering extends Toggle {
undefined,
renderingIsShown
)
const self = this;
editMode.addCallback(editing => {
if(editing){
console.log("Scrolling etr into view")
self.ScrollIntoView()
}
})
}
private static CreateRendering(
@ -69,12 +74,6 @@ export default class EditableTagRendering extends Toggle {
if (configuration.question !== undefined && state?.featureSwitchUserbadge?.data) {
// We have a question and editing is enabled
const answerWithEditButton = new Combine([
answer,
new EditButton(state.osmConnection, () => {
editMode.setData(true)
}),
]).SetClass("flex justify-between w-full")
const question = new Lazy(
() =>
@ -92,7 +91,18 @@ export default class EditableTagRendering extends Toggle {
})
)
const answerWithEditButton = new Combine([
answer,
new EditButton(state.osmConnection, () => {
editMode.setData(true)
question.ScrollIntoView({
onlyIfPartiallyHidden:true
})
}),
]).SetClass("flex justify-between w-full")
rendering = new Toggle(question, answerWithEditButton, editMode)
}
return rendering
}

8
UI/Popup/QuestionBox.ts
View file

@ -33,6 +33,8 @@ export default class QuestionBox extends VariableUiElement {
.filter((tr) => tr.question !== undefined)
.filter((tr) => tr.question !== null)
let focus: () => void = () => {};
const tagRenderingQuestions = tagRenderings.map(
(tagRendering, i) =>
new Lazy(
@ -42,6 +44,7 @@ export default class QuestionBox extends VariableUiElement {
afterSave: () => {
// We save and indicate progress by pinging and recalculating
skippedQuestions.ping()
focus()
},
cancelButton: Translations.t.general.skip
.Clone()
@ -49,6 +52,8 @@ export default class QuestionBox extends VariableUiElement {
.onClick(() => {
skippedQuestions.data.push(i)
skippedQuestions.ping()
focus()
}),
})
)
@ -136,5 +141,8 @@ export default class QuestionBox extends VariableUiElement {
this.skippedQuestions = skippedQuestions
this.restingQuestions = questionsToAsk
focus = () => this.ScrollIntoView({
onlyIfPartiallyHidden: true
})
}
}