mapcomplete/InitUiElements.ts
Pieter Vander Vennet 5d5cf67820 Restructuring
2020-07-30 00:59:08 +02:00

161 lines
No EOL
5.5 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 {UIEventSource} from "./UI/UIEventSource";
import {UIElement} from "./UI/UIElement";
import {MoreScreen} from "./UI/MoreScreen";
import {Tag} from "./Logic/TagsFilter";
import {FilteredLayer} from "./Logic/FilteredLayer";
import {FeatureInfoBox} from "./UI/FeatureInfoBox";
import {ElementStorage} from "./Logic/ElementStorage";
import {Preset} from "./UI/SimpleAddUI";
import {Changes} from "./Logic/Osm/Changes";
import {OsmConnection} from "./Logic/Osm/OsmConnection";
import {Basemap} from "./Logic/Leaflet/Basemap";
export class InitUiElements {
static OnlyIf(featureSwitch: UIEventSource<boolean>, callback: () => void) {
featureSwitch.addCallback(() => {
if (featureSwitch.data) {
callback();
}
});
if (featureSwitch.data) {
callback();
}
}
private static CreateWelcomePane(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap) {
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)},
{header: `<img src='${'./assets/add.svg'}'>`, content: new MoreScreen(layoutToUse.name, bm.Location)}
])
return fullOptions;
}
static InitWelcomeMessage(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap,
fullScreenMessage: UIEventSource<UIElement>) {
const fullOptions = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
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>`);
const checkbox = 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");
let dontCloseYet = true;
bm.Location.addCallback(() => {
if(dontCloseYet){
dontCloseYet = false;
return;
}
checkbox.isEnabled.setData(false);
})
const fullOptions2 = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
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");
}
static InitLayers(layoutToUse: Layout, osmConnection: OsmConnection,
changes: Changes,
allElements: ElementStorage,
bm: Basemap,
fullScreenMessage: UIEventSource<UIElement>,
selectedElement: UIEventSource<any>): {
minZoom: number
flayers: FilteredLayer[],
presets: Preset[]
} {
const addButtons:Preset[]
= [];
const flayers: FilteredLayer[] = []
let minZoom = 0;
for (const layer of layoutToUse.layers) {
const generateInfo = (tagsES, feature) => {
return new FeatureInfoBox(
feature,
tagsES,
layer.title,
layer.elementsToShow,
changes,
osmConnection.userDetails
)
};
minZoom = Math.max(minZoom, layer.minzoom);
const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
for (const preset of layer.presets ?? []) {
if (preset.icon === undefined) {
const tags = {};
for (const tag of preset.tags) {
const k = tag.key;
if (typeof (k) === "string") {
tags[k] = tag.value;
}
}
preset.icon = layer.style(tags)?.icon?.iconUrl;
}
const addButton = {
name: preset.title,
description: preset.description,
icon: preset.icon,
tags: preset.tags,
layerToAddTo: flayer
}
addButtons.push(addButton);
}
flayers.push(flayer);
}
return {
minZoom: minZoom,
flayers: flayers,
presets: addButtons
}
}
}