midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

More work

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-08-31 13:25:13 +02:00
parent 2052976909
commit e68d9d99a5
5 changed files with 170 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

125
UI/ShareScreen.ts
View file

@ -13,16 +13,20 @@ import {Utils} from "../Utils";
import {UIEventSource} from "../Logic/UIEventSource";
import Translation from "./i18n/Translation";
import {SubtleButton} from "./Base/SubtleButton";
import {Layout} from "../Customizations/Layout";
export class ShareScreen extends UIElement {
private readonly _options: UIElement;
private readonly _iframeCode: UIElement;
private readonly _link: UIElement;
private readonly _linkStatus: UIEventSource<string | UIElement>;
private readonly _editLayout: UIElement;
private readonly _options: UIElement;
private readonly _iframeCode: UIElement;
public iframe: UIEventSource<string>;
private readonly _link: UIElement;
private readonly _linkStatus: UIEventSource<string | UIElement>;
private readonly _editLayout: UIElement;
constructor() {
constructor(layout: Layout = undefined, layoutDefinition: string = undefined) {
super(undefined)
layout = layout ?? State.state?.layoutToUse?.data;
layoutDefinition = layoutDefinition ?? State.state?.layoutDefinition;
const tr = Translations.t.general.sharescreen;
const optionCheckboxes: UIElement[] = []
@ -34,11 +38,13 @@ export class ShareScreen extends UIElement {
true
)
optionCheckboxes.push(includeLocation);
const currentLocation = State.state.locationControl;
const layout = State.state.layoutToUse.data;
const currentLocation = State.state?.locationControl;
optionParts.push(includeLocation.isEnabled.map((includeL) => {
if (currentLocation === undefined) {
return null;
}
if (includeL) {
return `z=${currentLocation.data.zoom}&lat=${currentLocation.data.lat}&lon=${currentLocation.data.lon}`
} else {
@ -47,54 +53,58 @@ export class ShareScreen extends UIElement {
}, [currentLocation]));
const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = (State.state.bm as Basemap).CurrentLayer;
const currentBackground = tr.fsIncludeCurrentBackgroundMap.Subs({name: layout.id});
const includeCurrentBackground = new CheckBox(
new Combine([Img.checkmark, currentBackground]),
new Combine([Img.no_checkmark, currentBackground]),
true
)
optionCheckboxes.push(includeCurrentBackground);
optionParts.push(includeCurrentBackground.isEnabled.map((includeBG) => {
if (includeBG) {
return "background=" + currentLayer.data.id
} else {
return null
}
}, [currentLayer]));
const includeLayerChoices = new CheckBox(
new Combine([Img.checkmark, tr.fsIncludeCurrentLayers]),
new Combine([Img.no_checkmark, tr.fsIncludeCurrentLayers]),
true
)
optionCheckboxes.push(includeLayerChoices);
function fLayerToParam(flayer: FilteredLayer){
if(flayer.isDisplayed.data){
function fLayerToParam(flayer: FilteredLayer) {
if (flayer.isDisplayed.data) {
return null; // Being displayed is the default
}
return "layer-"+flayer.layerDef.id+"="+flayer.isDisplayed.data
return "layer-" + flayer.layerDef.id + "=" + flayer.isDisplayed.data
}
optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => {
if (includeLayerSelection) {
return Utils.NoNull(State.state.filteredLayers.data.map(fLayerToParam)).join("&")
} else {
return null
}
}, State.state.filteredLayers.data.map((flayer) => flayer.isDisplayed)));
if (State.state !== undefined) {
const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = (State.state.bm as Basemap).CurrentLayer;
const currentBackground = tr.fsIncludeCurrentBackgroundMap.Subs({name: layout.id});
const includeCurrentBackground = new CheckBox(
new Combine([Img.checkmark, currentBackground]),
new Combine([Img.no_checkmark, currentBackground]),
true
)
optionCheckboxes.push(includeCurrentBackground);
optionParts.push(includeCurrentBackground.isEnabled.map((includeBG) => {
if (includeBG) {
return "background=" + currentLayer.data.id
} else {
return null
}
}, [currentLayer]));
const includeLayerChoices = new CheckBox(
new Combine([Img.checkmark, tr.fsIncludeCurrentLayers]),
new Combine([Img.no_checkmark, tr.fsIncludeCurrentLayers]),
true
)
optionCheckboxes.push(includeLayerChoices);
optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => {
if (includeLayerSelection) {
return Utils.NoNull(State.state.filteredLayers.data.map(fLayerToParam)).join("&")
} else {
return null
}
}, State.state.filteredLayers.data.map((flayer) => flayer.isDisplayed)));
}
const switches = [
{urlName: "fs-userbadge", human: tr.fsUserbadge},
{urlName: "fs-search", human: tr.fsSearch},
{urlName: "fs-welcome-message", human: tr.fsWelcomeMessage},
{urlName: "fs-layers", human: tr.fsLayers},
{urlName: "layer-control-toggle", human: tr.fsLayerControlToggle, reverse: true},
{urlName: "fs-addXXXnew", human: tr.fsAddNew},
{urlName: "fs-geolocation", human: tr.fsGeolocation},
{urlName: "fs-userbadge", human: tr.fsUserbadge},
{urlName: "fs-search", human: tr.fsSearch},
{urlName: "fs-welcome-message", human: tr.fsWelcomeMessage},
{urlName: "fs-layers", human: tr.fsLayers},
{urlName: "layer-control-toggle", human: tr.fsLayerControlToggle, reverse: true},
{urlName: "fs-add-new", human: tr.fsAddNew},
{urlName: "fs-geolocation", human: tr.fsGeolocation},
]
@ -124,7 +134,7 @@ export class ShareScreen extends UIElement {
this._options = new VerticalCombine(optionCheckboxes)
const url = currentLocation.map(() => {
const url = (currentLocation ?? new UIEventSource(undefined)).map(() => {
let literalText = "https://pietervdvn.github.io/MapComplete/" + layout.id.toLowerCase() + ".html"
@ -132,12 +142,12 @@ export class ShareScreen extends UIElement {
const parts = Utils.NoEmpty(Utils.NoNull(optionParts.map((eventSource) => eventSource.data)));
let hash = "";
if (State.state.layoutDefinition !== undefined) {
hash = ("#" + State.state.layoutDefinition)
if (layoutDefinition !== undefined) {
hash = ("#" + layoutDefinition)
literalText = "https://pietervdvn.github.io/MapComplete/index.html"
parts.push("userlayout=true");
}
if (parts.length === 0) {
return literalText + hash;
@ -145,10 +155,13 @@ export class ShareScreen extends UIElement {
return literalText + "?" + parts.join("&") + hash;
}, optionParts);
this.iframe = url.map(url => `&lt;iframe src="${url}" width="100%" height="100%" title="${layout.title.InnerRender()} with MapComplete"&gt;&lt;/iframe&gt`);
this._iframeCode = new VariableUiElement(
url.map((url) => {
return `<span class='literal-code iframe-code-block'>
&lt;iframe src="${url}" width="100%" height="100%" title="${layout.title.InnerRender()} with MapComplete"&gt;&lt;/iframe&gt
</span>`
})
);
@ -157,7 +170,7 @@ export class ShareScreen extends UIElement {
this._editLayout = new FixedUiElement("");
if ((State.state.layoutDefinition !== undefined)) {
if ((layoutDefinition !== undefined && State.state?.osmConnection !== undefined)) {
this._editLayout =
new VariableUiElement(
State.state.osmConnection.userDetails.map(