forked from MapComplete/MapComplete
74 lines
3 KiB
TypeScript
74 lines
3 KiB
TypeScript
|
import {Layout, WelcomeMessage} from "./Customizations/Layout";
|
||
|
|
import Locale from "./UI/i18n/Locale";
|
||
|
|
import Translations from "./UI/i18n/Translations";
|
||
|
|
import {TabbedComponent} from "./UI/Base/TabbedComponent";
|
||
|
|
import {ShareScreen} from "./UI/ShareScreen";
|
||
|
|
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||
|
|
import {CheckBox} from "./UI/Input/CheckBox";
|
||
|
|
import Combine from "./UI/Base/Combine";
|
||
|
|
import {OsmConnection} from "./Logic/OsmConnection";
|
||
|
|
import {Basemap} from "./Logic/Basemap";
|
||
|
|
import {UIEventSource} from "./UI/UIEventSource";
|
||
|
|
import {UIElement} from "./UI/UIElement";
|
||
|
|
|
||
|
|
export class InitUiElements {
|
||
|
|
|
||
|
|
|
||
|
|
static OnlyIf(featureSwitch: UIEventSource<string>, callback: () => void) {
|
||
|
|
featureSwitch.addCallback(() => {
|
||
|
|
|
||
|
|
if (featureSwitch.data === "false") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
callback();
|
||
|
|
});
|
||
|
|
|
||
|
|
if (featureSwitch.data !== "false") {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
static InitWelcomeMessage(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap,
|
||
|
|
fullScreenMessage: UIEventSource<UIElement>) {
|
||
|
|
|
||
|
|
const welcome = new WelcomeMessage(layoutToUse,
|
||
|
|
Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage),
|
||
|
|
osmConnection);
|
||
|
|
|
||
|
|
const fullOptions = new TabbedComponent([
|
||
|
|
{header: `<img src='${layoutToUse.icon}'>`, content: welcome},
|
||
|
|
{header: `<img src='${'./assets/osm-logo.svg'}'>`, content: Translations.t.general.openStreetMapIntro},
|
||
|
|
{header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)}
|
||
|
|
])
|
||
|
|
|
||
|
|
const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg' alt='help'></div>`);
|
||
|
|
const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg' alt='close'></div>`);
|
||
|
|
new CheckBox(
|
||
|
|
new Combine([
|
||
|
|
"<span class='collapse-button'>", close, "</span>",
|
||
|
|
"<span id='welcomeMessage'>", fullOptions.onClick(() => {
|
||
|
|
}), "</span>"]),
|
||
|
|
new Combine(["<span class='open-button'>", help, "</span>"])
|
||
|
|
, true
|
||
|
|
).AttachTo("messagesbox");
|
||
|
|
|
||
|
|
|
||
|
|
const welcome2 = new WelcomeMessage(layoutToUse, Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), osmConnection)
|
||
|
|
|
||
|
|
const fullOptions2 = new TabbedComponent([
|
||
|
|
{header: `<img src='${layoutToUse.icon}'>`, content: welcome2},
|
||
|
|
{header: `<img src='${'./assets/osm-logo.svg'}'>`, content: Translations.t.general.openStreetMapIntro},
|
||
|
|
{header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)}
|
||
|
|
])
|
||
|
|
|
||
|
|
|
||
|
|
fullScreenMessage.setData(fullOptions2)
|
||
|
|
new FixedUiElement(`<div class='collapse-button-img' class="shadow"><img src='assets/help.svg' alt='help'></div>`).onClick(() => {
|
||
|
|
fullScreenMessage.setData(fullOptions2)
|
||
|
|
}).AttachTo("help-button-mobile");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|