138 lines
5.2 KiB
TypeScript
138 lines
5.2 KiB
TypeScript
import LayerConfig from "./ThemeConfig/LayerConfig"
|
|
import {UIEventSource} from "../Logic/UIEventSource"
|
|
import UserRelatedState from "../Logic/State/UserRelatedState"
|
|
import {Utils} from "../Utils"
|
|
import {LocalStorageSource} from "../Logic/Web/LocalStorageSource"
|
|
|
|
export type ThemeViewTabStates = typeof MenuState._themeviewTabs[number]
|
|
export type MenuViewTabStates = typeof MenuState._menuviewTabs[number]
|
|
|
|
/**
|
|
* Indicates if a menu is open, and if so, which tab is selected;
|
|
* Some tabs allow to highlight an element.
|
|
*
|
|
* Some convenience methods are provided for this as well
|
|
*/
|
|
export class MenuState {
|
|
public static readonly _themeviewTabs = ["intro", "filters", "download", "copyright","share"] as const
|
|
public static readonly _menuviewTabs = ["about", "settings", "community", "privacy","advanced"] as const
|
|
public readonly themeIsOpened: UIEventSource<boolean>
|
|
public readonly themeViewTabIndex: UIEventSource<number>
|
|
public readonly themeViewTab: UIEventSource<ThemeViewTabStates>
|
|
public readonly menuIsOpened: UIEventSource<boolean>
|
|
public readonly menuViewTabIndex: UIEventSource<number>
|
|
public readonly menuViewTab: UIEventSource<MenuViewTabStates>
|
|
|
|
public readonly backgroundLayerSelectionIsOpened: UIEventSource<boolean> = new UIEventSource<boolean>(false)
|
|
|
|
public readonly allToggles: {
|
|
toggle: UIEventSource<boolean>, name: string,
|
|
submenu?: UIEventSource<string>,
|
|
showOverOthers?: boolean
|
|
}[]
|
|
|
|
public readonly highlightedLayerInFilters: UIEventSource<string> = new UIEventSource<string>(
|
|
undefined
|
|
)
|
|
public highlightedUserSetting: UIEventSource<string> = new UIEventSource<string>(undefined)
|
|
|
|
constructor(themeid: string = "") {
|
|
if (themeid) {
|
|
themeid += "-"
|
|
}
|
|
this.themeIsOpened = LocalStorageSource.GetParsed(themeid + "thememenuisopened", true)
|
|
this.themeViewTabIndex = LocalStorageSource.GetParsed(themeid + "themeviewtabindex", 0)
|
|
this.themeViewTab = this.themeViewTabIndex.sync(
|
|
(i) => MenuState._themeviewTabs[i],
|
|
[],
|
|
(str) => MenuState._themeviewTabs.indexOf(<any>str)
|
|
)
|
|
|
|
this.menuIsOpened = LocalStorageSource.GetParsed(themeid + "menuisopened", false)
|
|
this.menuViewTabIndex = LocalStorageSource.GetParsed(themeid + "menuviewtabindex", 0)
|
|
this.menuViewTab = this.menuViewTabIndex.sync(
|
|
(i) => MenuState._menuviewTabs[i],
|
|
[],
|
|
(str) => MenuState._menuviewTabs.indexOf(<any>str)
|
|
)
|
|
this.menuViewTab.addCallbackAndRunD(s => console.trace("Menu view tab state is", s, this.menuIsOpened.data))
|
|
this.menuIsOpened.addCallbackAndRun((isOpen) => {
|
|
if (!isOpen) {
|
|
this.highlightedUserSetting.setData(undefined)
|
|
}
|
|
})
|
|
this.themeViewTab.addCallbackAndRun((tab) => {
|
|
if (tab !== "filters") {
|
|
this.highlightedLayerInFilters.setData(undefined)
|
|
}
|
|
})
|
|
|
|
this.menuIsOpened.addCallbackAndRunD((opened) => {
|
|
if (opened) {
|
|
this.themeIsOpened.setData(false)
|
|
}
|
|
})
|
|
this.themeIsOpened.addCallbackAndRunD((opened) => {
|
|
if (opened) {
|
|
this.menuIsOpened.setData(false)
|
|
}
|
|
})
|
|
|
|
this.allToggles = [
|
|
{
|
|
toggle: this.menuIsOpened,
|
|
name: "menu",
|
|
submenu: this.menuViewTab
|
|
}, {
|
|
toggle: this.themeIsOpened,
|
|
name: "theme-menu",
|
|
submenu: this.themeViewTab
|
|
}, {
|
|
toggle: this.backgroundLayerSelectionIsOpened,
|
|
name: "background",
|
|
showOverOthers: true
|
|
}]
|
|
}
|
|
|
|
public openFilterView(highlightLayer?: LayerConfig | string) {
|
|
this.themeIsOpened.setData(true)
|
|
this.themeViewTab.setData("filters")
|
|
if (highlightLayer) {
|
|
if (typeof highlightLayer !== "string") {
|
|
highlightLayer = highlightLayer.id
|
|
}
|
|
this.highlightedLayerInFilters.setData(highlightLayer)
|
|
}
|
|
}
|
|
|
|
public openUsersettings(highlightTagRendering?: string) {
|
|
this.menuIsOpened.setData(true)
|
|
this.menuViewTab.setData("settings")
|
|
if (
|
|
highlightTagRendering !== undefined &&
|
|
!UserRelatedState.availableUserSettingsIds.some((tr) => tr === highlightTagRendering)
|
|
) {
|
|
console.error(
|
|
"No tagRendering with id '" + highlightTagRendering + "'; maybe you meant:",
|
|
Utils.sortedByLevenshteinDistance(
|
|
highlightTagRendering,
|
|
UserRelatedState.availableUserSettingsIds,
|
|
(x) => x
|
|
)
|
|
)
|
|
}
|
|
this.highlightedUserSetting.setData(highlightTagRendering)
|
|
}
|
|
|
|
/**
|
|
* Close all floatOvers.
|
|
* Returns 'true' if at least one menu was opened
|
|
*/
|
|
public closeAll(): boolean {
|
|
const toggles = [this.menuIsOpened, this.themeIsOpened, this.backgroundLayerSelectionIsOpened]
|
|
const somethingIsOpen = toggles.some(t => t.data)
|
|
toggles.forEach(t => t.setData(false))
|
|
return somethingIsOpen
|
|
}
|
|
|
|
}
|