mapcomplete/InitUiElements.ts

76 lines
2.9 KiB
TypeScript
Raw Normal View History

2020-07-29 15:05:19 +02:00
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";
2020-07-29 15:48:21 +02:00
import {MoreScreen} from "./UI/MoreScreen";
2020-07-29 15:05:19 +02:00
export class InitUiElements {
static OnlyIf(featureSwitch: UIEventSource<string>, callback: () => void) {
featureSwitch.addCallback(() => {
if (featureSwitch.data === "false") {
return;
}
callback();
});
if (featureSwitch.data !== "false") {
callback();
}
}
2020-07-29 15:48:21 +02:00
private static CreateWelcomePane(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap) {
2020-07-29 15:05:19 +02:00
2020-07-29 15:48:21 +02:00
const welcome = new WelcomeMessage(layoutToUse, Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), osmConnection)
2020-07-29 15:05:19 +02:00
const fullOptions = new TabbedComponent([
{header: `<img src='${layoutToUse.icon}'>`, content: welcome},
{header: `<img src='${'./assets/osm-logo.svg'}'>`, content: Translations.t.general.openStreetMapIntro},
2020-07-29 15:48:21 +02:00
{header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)},
{header: `<img src='${'./assets/add.svg'}'>`, content: new MoreScreen(bm.Location)}
2020-07-29 15:05:19 +02:00
])
2020-07-29 15:48:21 +02:00
return fullOptions;
}
static InitWelcomeMessage(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap,
fullScreenMessage: UIEventSource<UIElement>) {
const fullOptions = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
2020-07-29 15:05:19 +02:00
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");
2020-07-29 15:48:21 +02:00
const fullOptions2 = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
2020-07-29 15:05:19 +02:00
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");
2020-07-29 15:05:19 +02:00
}
}