forked from MapComplete/MapComplete
Refactoring: port wikipedia panel to Svelte
This commit is contained in:
parent
24f7610d0a
commit
d8e14927c8
32 changed files with 362 additions and 847 deletions
|
|
@ -1,163 +0,0 @@
|
|||
import Svg from "../../Svg"
|
||||
import Combine from "./Combine"
|
||||
import { FixedUiElement } from "./FixedUiElement"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import Hash from "../../Logic/Web/Hash"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import Title from "./Title"
|
||||
import Hotkeys from "./Hotkeys"
|
||||
import Translations from "../i18n/Translations"
|
||||
|
||||
/**
|
||||
*
|
||||
* The scrollableFullScreen is a bit of a peculiar component:
|
||||
* - It shows a title and some contents, constructed from the respective functions passed into the constructor
|
||||
* - When the element is 'activated', one clone of title+contents is attached to the fullscreen
|
||||
* - The element itself will - upon rendering - also show the title and contents (allthough it'll be a different clone)
|
||||
*
|
||||
*
|
||||
*/
|
||||
export default class ScrollableFullScreen {
|
||||
private static readonly empty = ScrollableFullScreen.initEmpty()
|
||||
private static _currentlyOpen: ScrollableFullScreen
|
||||
public isShown: UIEventSource<boolean>
|
||||
private hashToShow: string
|
||||
private _fullscreencomponent: BaseUIElement
|
||||
private _resetScrollSignal: UIEventSource<void> = new UIEventSource<void>(undefined)
|
||||
private _setHash: boolean
|
||||
|
||||
constructor(
|
||||
title: (options: { mode: string }) => BaseUIElement,
|
||||
content: (options: {
|
||||
mode: string
|
||||
resetScrollSignal: UIEventSource<void>
|
||||
}) => BaseUIElement,
|
||||
hashToShow: string,
|
||||
isShown: UIEventSource<boolean> = new UIEventSource<boolean>(false),
|
||||
options?: {
|
||||
setHash?: boolean
|
||||
}
|
||||
) {
|
||||
this.hashToShow = hashToShow
|
||||
this.isShown = isShown
|
||||
this._setHash = options?.setHash ?? true
|
||||
|
||||
if ((hashToShow === undefined || hashToShow === "") && this._setHash) {
|
||||
throw "HashToShow should be defined as it is vital for the 'back' key functionality"
|
||||
}
|
||||
|
||||
const mobileOptions = {
|
||||
mode: "mobile",
|
||||
resetScrollSignal: this._resetScrollSignal,
|
||||
}
|
||||
|
||||
this._fullscreencomponent = this.BuildComponent(
|
||||
title(mobileOptions),
|
||||
content(mobileOptions).SetClass("pb-20")
|
||||
)
|
||||
|
||||
const self = this
|
||||
if (this._setHash) {
|
||||
Hash.hash.addCallback((h) => {
|
||||
if (h === undefined) {
|
||||
isShown.setData(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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
|
||||
ScrollableFullScreen._currentlyOpen = self
|
||||
self.Activate()
|
||||
} else {
|
||||
if (self.hashToShow !== undefined) {
|
||||
Hash.hash.setData(undefined)
|
||||
}
|
||||
// Some cleanup...
|
||||
ScrollableFullScreen.collapse()
|
||||
}
|
||||
})
|
||||
if (isShown.data) {
|
||||
ScrollableFullScreen._currentlyOpen = self
|
||||
this.Activate()
|
||||
}
|
||||
}
|
||||
|
||||
private static initEmpty(): FixedUiElement {
|
||||
Hotkeys.RegisterHotkey(
|
||||
{ nomod: "Escape", onUp: true },
|
||||
Translations.t.hotkeyDocumentation.closeSidebar,
|
||||
ScrollableFullScreen.collapse
|
||||
)
|
||||
|
||||
return new FixedUiElement("")
|
||||
}
|
||||
public static collapse() {
|
||||
const fs = document.getElementById("fullscreen")
|
||||
if (fs !== null) {
|
||||
ScrollableFullScreen.empty.AttachTo("fullscreen")
|
||||
fs.classList.add("hidden")
|
||||
}
|
||||
|
||||
const opened = ScrollableFullScreen._currentlyOpen
|
||||
if (opened !== undefined) {
|
||||
opened?.isShown?.setData(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Actually show this in the 'fullscreen'-div
|
||||
* @constructor
|
||||
*/
|
||||
public Activate(): void {
|
||||
if (this.hashToShow && this.hashToShow !== "" && this._setHash) {
|
||||
Hash.hash.setData(this.hashToShow)
|
||||
}
|
||||
this.isShown.setData(true)
|
||||
this._fullscreencomponent.AttachTo("fullscreen")
|
||||
const fs = document.getElementById("fullscreen")
|
||||
ScrollableFullScreen._currentlyOpen = this
|
||||
fs?.classList?.remove("hidden")
|
||||
}
|
||||
|
||||
private BuildComponent(title: BaseUIElement, content: BaseUIElement): BaseUIElement {
|
||||
const returnToTheMap = new Combine([
|
||||
Svg.back_svg().SetClass("block md:hidden w-12 h-12 p-2 svg-foreground"),
|
||||
Svg.close_svg().SetClass("hidden md:block w-12 h-12 p-3 svg-foreground"),
|
||||
]).SetClass("rounded-full p-0 flex-shrink-0 self-center")
|
||||
|
||||
returnToTheMap.onClick(() => {
|
||||
this.isShown.setData(false)
|
||||
Hash.hash.setData(undefined)
|
||||
})
|
||||
|
||||
title = new Title(title, 2)
|
||||
title.SetClass(
|
||||
"text-l sm:text-xl md:text-2xl w-full p-0 max-h-20vh overflow-y-auto self-center"
|
||||
)
|
||||
|
||||
const contentWrapper = new Combine([content]).SetClass(
|
||||
"block p-2 md:pt-4 w-full h-full overflow-y-auto"
|
||||
)
|
||||
|
||||
this._resetScrollSignal.addCallback((_) => {
|
||||
contentWrapper.ScrollToTop()
|
||||
})
|
||||
|
||||
return new Combine([
|
||||
new Combine([
|
||||
new Combine([returnToTheMap, title]).SetClass(
|
||||
"border-b-1 border-black shadow bg-white flex flex-shrink-0 pt-1 pb-1 md:pt-0 md:pb-0"
|
||||
),
|
||||
contentWrapper,
|
||||
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
|
||||
]).SetClass("flex flex-col h-full relative bg-white"),
|
||||
]).SetClass(
|
||||
"fixed top-0 left-0 right-0 h-screen w-screen md:w-auto md:relative z-above-controls md:rounded-xl overflow-hidden"
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import Translations from "../i18n/Translations"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import Combine from "./Combine"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import { VariableUiElement } from "./VariableUIElement"
|
||||
|
||||
export class TabbedComponent extends Combine {
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
constructor(
|
||||
elements: { header: BaseUIElement | string; content: BaseUIElement | string }[],
|
||||
openedTab: UIEventSource<number> | number = 0,
|
||||
options?: {
|
||||
leftOfHeader?: BaseUIElement
|
||||
styleHeader?: (header: BaseUIElement) => void
|
||||
}
|
||||
) {
|
||||
const openedTabSrc =
|
||||
typeof openedTab === "number"
|
||||
? new UIEventSource(openedTab)
|
||||
: openedTab ?? new UIEventSource<number>(0)
|
||||
|
||||
const tabs: BaseUIElement[] = [options?.leftOfHeader]
|
||||
const contentElements: BaseUIElement[] = []
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let element = elements[i]
|
||||
const header = Translations.W(element.header).onClick(() => openedTabSrc.setData(i))
|
||||
openedTabSrc.addCallbackAndRun((selected) => {
|
||||
if (selected >= elements.length) {
|
||||
selected = 0
|
||||
}
|
||||
if (selected === i) {
|
||||
header.SetClass("tab-active")
|
||||
header.RemoveClass("tab-non-active")
|
||||
} else {
|
||||
header.SetClass("tab-non-active")
|
||||
header.RemoveClass("tab-active")
|
||||
}
|
||||
})
|
||||
const content = Translations.W(element.content)
|
||||
content.SetClass("relative w-full inline-block")
|
||||
contentElements.push(content)
|
||||
const tab = header.SetClass("block tab-single-header")
|
||||
tabs.push(tab)
|
||||
}
|
||||
|
||||
const header = new Combine(tabs).SetClass("tabs-header-bar")
|
||||
if (options?.styleHeader) {
|
||||
options.styleHeader(header)
|
||||
}
|
||||
const actualContent = new VariableUiElement(
|
||||
openedTabSrc.map((i) => contentElements[i])
|
||||
).SetStyle("max-height: inherit; height: inherit")
|
||||
super([header, actualContent])
|
||||
}
|
||||
}
|
||||
|
|
@ -66,3 +66,15 @@
|
|||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
|
||||
<style>
|
||||
.tab-selected {
|
||||
background-color: rgb(59 130 246);
|
||||
color: rgb(255 255 255);
|
||||
}
|
||||
|
||||
.tab-unselected {
|
||||
background-color: rgb(255 255 255);
|
||||
color: rgb(0 0 0);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue