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

Rework initial behaviour of scrollableFullScreen

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-01-06 03:46:49 +01:00
parent 3709dc323f
commit 8bffd2a974
2 changed files with 41 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

26
UI/Base/ScrollableFullScreen.ts
View file

@ -32,15 +32,12 @@ export default class ScrollableFullScreen {
resetScrollSignal: UIEventSource<void>
}) => BaseUIElement,
hashToShow: string,
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false),
options?: {
setHash?: true | boolean
}
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false)
) {
this.hashToShow = hashToShow
this.isShown = isShown
if (hashToShow === undefined) {
if (hashToShow === undefined || hashToShow === "") {
throw "HashToShow should be defined as it is vital for the 'back' key functionality"
}
@ -55,22 +52,17 @@ export default class ScrollableFullScreen {
)
const self = this
const setHash = options?.setHash ?? true
if (setHash) {
Hash.hash.addCallback((h) => {
if (h === undefined) {
isShown.setData(false)
}
})
}
isShown.addCallback((isShown) => {
isShown.addCallbackD((isShown) => {
if (isShown) {
// We first must set the hash, then activate the panel
// If the order is wrong, this will cause the panel to disactivate again
if (setHash) {
Hash.hash.setData(hashToShow)
}
ScrollableFullScreen._currentlyOpen = self
self.Activate()
} else {
@ -81,6 +73,11 @@ export default class ScrollableFullScreen {
ScrollableFullScreen.collapse()
}
})
if (isShown.data) {
Hash.hash.setData(hashToShow)
ScrollableFullScreen._currentlyOpen = self
this.Activate()
}
}
private static initEmpty(): FixedUiElement {
@ -115,6 +112,9 @@ export default class ScrollableFullScreen {
*/
public Activate(): void {
this.isShown.setData(true)
if (this.hashToShow && this.hashToShow !== "") {
Hash.hash.setData(this.hashToShow)
}
this._fullscreencomponent.AttachTo("fullscreen")
const fs = document.getElementById("fullscreen")
ScrollableFullScreen._currentlyOpen = this
@ -157,4 +157,8 @@ export default class ScrollableFullScreen {
"fixed top-0 left-0 right-0 h-screen w-screen desktop:max-h-65vh md:w-auto md:relative z-above-controls md:rounded-xl overflow-hidden"
)
}
static ActivateCurrent() {
ScrollableFullScreen._currentlyOpen?.Activate()
}
}

88
UI/DefaultGuiState.ts
View file

@ -4,14 +4,22 @@ import Hash from "../Logic/Web/Hash"
export class DefaultGuiState {
static state: DefaultGuiState
public readonly welcomeMessageIsOpened: UIEventSource<boolean>
public readonly downloadControlIsOpened: UIEventSource<boolean>
public readonly filterViewIsOpened: UIEventSource<boolean>
public readonly copyrightViewIsOpened: UIEventSource<boolean>
public readonly currentViewControlIsOpened: UIEventSource<boolean>
public readonly userInfoIsOpened: UIEventSource<boolean>
public readonly welcomeMessageIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(
false
)
public readonly downloadControlIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(
false
)
public readonly filterViewIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(false)
public readonly copyrightViewIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(
false
)
public readonly currentViewControlIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(
false
)
public readonly userInfoIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(false)
public readonly welcomeMessageOpenedTab: UIEventSource<number>
public readonly allFullScreenStates: UIEventSource<boolean>[] = []
constructor() {
this.welcomeMessageOpenedTab = UIEventSource.asFloat(
@ -21,75 +29,19 @@ export class DefaultGuiState {
`The tab that is shown in the welcome-message.`
)
)
this.welcomeMessageIsOpened = QueryParameters.GetBooleanQueryParameter(
"welcome-control-toggle",
false,
"Whether or not the welcome panel is shown"
)
this.downloadControlIsOpened = QueryParameters.GetBooleanQueryParameter(
"download-control-toggle",
false,
"Whether or not the download panel is shown"
)
this.filterViewIsOpened = QueryParameters.GetBooleanQueryParameter(
"filter-toggle",
false,
"Whether or not the filter view is shown"
)
this.copyrightViewIsOpened = QueryParameters.GetBooleanQueryParameter(
"copyright-toggle",
false,
"Whether or not the copyright view is shown"
)
this.currentViewControlIsOpened = QueryParameters.GetBooleanQueryParameter(
"currentview-toggle",
false,
"Whether or not the current view box is shown (metalayer showing current view, allows to do calculate stats for all in view)"
)
this.userInfoIsOpened = QueryParameters.GetBooleanQueryParameter(
"userinfo-toggle",
false,
"Whether or not the user info is shown"
)
const states = {
const sources = {
welcome: this.welcomeMessageIsOpened,
download: this.downloadControlIsOpened,
filters: this.filterViewIsOpened,
copyright: this.copyrightViewIsOpened,
currentview: this.currentViewControlIsOpened,
welcome: this.welcomeMessageIsOpened,
userinfo: this.userInfoIsOpened,
}
Hash.hash.addCallbackAndRunD((hash) => {
hash = hash.toLowerCase()
states[hash]?.setData(true)
})
sources[Hash.hash.data?.toLowerCase()]?.setData(true)
if (Hash.hash.data === "" || Hash.hash.data === undefined) {
this.welcomeMessageIsOpened.setData(true)
}
this.allFullScreenStates.push(
this.downloadControlIsOpened,
this.filterViewIsOpened,
this.copyrightViewIsOpened,
this.welcomeMessageIsOpened,
this.currentViewControlIsOpened,
this.userInfoIsOpened
)
for (let i = 0; i < this.allFullScreenStates.length; i++) {
const fullScreenState = this.allFullScreenStates[i]
for (let j = 0; j < this.allFullScreenStates.length; j++) {
if (i == j) {
continue
}
const otherState = this.allFullScreenStates[j]
fullScreenState.addCallbackAndRunD((isOpened) => {
if (isOpened) {
otherState.setData(false)
}
})
}
}
}
}