mapcomplete/UI/ShareScreen.ts

268 lines
9.8 KiB
TypeScript
Raw Normal View History

2020-07-29 15:05:19 +02:00
import {UIElement} from "./UIElement";
import Translations from "./i18n/Translations";
import {FixedUiElement} from "./Base/FixedUiElement";
import Combine from "./Base/Combine";
import {VariableUiElement} from "./Base/VariableUIElement";
import CheckBox from "./Input/CheckBox";
2020-07-29 15:05:19 +02:00
import {VerticalCombine} from "./Base/VerticalCombine";
import State from "../State";
import {FilteredLayer} from "../Logic/FilteredLayer";
import {Utils} from "../Utils";
import {UIEventSource} from "../Logic/UIEventSource";
2020-08-27 01:03:58 +02:00
import {SubtleButton} from "./Base/SubtleButton";
2020-11-06 01:58:26 +01:00
import Svg from "../Svg";
import {Translation} from "./i18n/Translation";
2020-11-11 16:23:49 +01:00
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
2021-01-02 19:09:49 +01:00
import Constants from "../Models/Constants";
2020-07-29 15:05:19 +02:00
export class ShareScreen extends UIElement {
2020-08-31 13:25:13 +02:00
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;
2020-11-11 16:23:49 +01:00
constructor(layout: LayoutConfig = undefined, layoutDefinition: string = undefined) {
2020-07-29 15:05:19 +02:00
super(undefined)
2020-08-31 13:25:13 +02:00
layout = layout ?? State.state?.layoutToUse?.data;
layoutDefinition = layoutDefinition ?? State.state?.layoutDefinition;
2020-07-29 15:05:19 +02:00
const tr = Translations.t.general.sharescreen;
const optionCheckboxes: UIElement[] = []
const optionParts: (UIEventSource<string>)[] = [];
2020-11-15 03:10:44 +01:00
function check() {
return Svg.checkmark_svg().SetStyle("width: 1.5em; display:inline-block;");
}
function nocheck() {
return Svg.no_checkmark_svg().SetStyle("width: 1.5em; display: inline-block;");
}
2020-07-29 15:05:19 +02:00
const includeLocation = new CheckBox(
2020-11-15 03:10:44 +01:00
new Combine([check(), tr.fsIncludeCurrentLocation]),
new Combine([nocheck(), tr.fsIncludeCurrentLocation]),
2020-07-29 15:05:19 +02:00
true
)
optionCheckboxes.push(includeLocation);
2020-08-31 13:25:13 +02:00
const currentLocation = State.state?.locationControl;
2020-07-29 15:05:19 +02:00
optionParts.push(includeLocation.isEnabled.map((includeL) => {
2020-08-31 13:25:13 +02:00
if (currentLocation === undefined) {
return null;
}
2020-07-29 15:05:19 +02:00
if (includeL) {
return `z=${currentLocation.data.zoom}&lat=${currentLocation.data.lat}&lon=${currentLocation.data.lon}`
} else {
return null;
}
}, [currentLocation]));
2020-08-31 13:25:13 +02:00
function fLayerToParam(flayer: FilteredLayer) {
if (flayer.isDisplayed.data) {
return null; // Being displayed is the default
}
2020-08-31 13:25:13 +02:00
return "layer-" + flayer.layerDef.id + "=" + flayer.isDisplayed.data
}
2020-08-31 13:25:13 +02:00
if (State.state !== undefined) {
2021-01-02 19:09:49 +01:00
const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = State.state.backgroundLayer;
const currentBackground = new VariableUiElement(currentLayer.map(layer => {
return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""}).Render();
}));
2020-08-31 13:25:13 +02:00
const includeCurrentBackground = new CheckBox(
2020-11-15 03:10:44 +01:00
new Combine([check(), currentBackground]),
new Combine([nocheck(), currentBackground]),
2020-08-31 13:25:13 +02:00
true
)
optionCheckboxes.push(includeCurrentBackground);
optionParts.push(includeCurrentBackground.isEnabled.map((includeBG) => {
if (includeBG) {
return "background=" + currentLayer.data.id
} else {
return null
}
}, [currentLayer]));
2020-08-27 01:03:58 +02:00
2020-08-31 13:25:13 +02:00
const includeLayerChoices = new CheckBox(
2020-11-15 03:10:44 +01:00
new Combine([check(), tr.fsIncludeCurrentLayers]),
new Combine([nocheck(), tr.fsIncludeCurrentLayers]),
2020-08-31 13:25:13 +02:00
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)));
}
2020-08-27 01:03:58 +02:00
const switches = [
2020-08-31 13:25:13 +02:00
{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},
2020-07-29 15:05:19 +02:00
]
for (const swtch of switches) {
const checkbox = new CheckBox(
2020-11-15 03:10:44 +01:00
new Combine([check(), Translations.W(swtch.human)]),
new Combine([nocheck(), Translations.W(swtch.human)]), !swtch.reverse
2020-07-29 15:05:19 +02:00
);
optionCheckboxes.push(checkbox);
optionParts.push(checkbox.isEnabled.map((isEn) => {
if (isEn) {
if(swtch.reverse){
return `${swtch.urlName}=true`
}
2020-07-29 15:05:19 +02:00
return null;
} else {
if(swtch.reverse){
return null;
}
2020-07-29 15:05:19 +02:00
return `${swtch.urlName}=false`
}
}))
}
this._options = new VerticalCombine(optionCheckboxes)
2020-08-31 13:25:13 +02:00
const url = (currentLocation ?? new UIEventSource(undefined)).map(() => {
2020-07-29 15:05:19 +02:00
const host = window.location.host;
let literalText = `https://${host}/${layout.id.toLowerCase()}.html`
2020-07-29 15:05:19 +02:00
const parts = Utils.NoEmpty(Utils.NoNull(optionParts.map((eventSource) => eventSource.data)));
2020-07-29 15:05:19 +02:00
2020-08-08 21:17:17 +02:00
let hash = "";
2020-08-31 13:25:13 +02:00
if (layoutDefinition !== undefined) {
literalText = `https://${host}/index.html`
if (layout.id.startsWith("wiki:")) {
parts.push("userlayout=" + encodeURIComponent(layout.id))
} else {
hash = ("#" + layoutDefinition)
parts.push("userlayout=true");
}
2020-08-08 21:17:17 +02:00
}
2020-08-31 13:25:13 +02:00
2020-08-08 21:17:17 +02:00
2020-07-29 15:05:19 +02:00
if (parts.length === 0) {
2020-08-08 21:17:17 +02:00
return literalText + hash;
2020-07-29 15:05:19 +02:00
}
2020-08-08 21:17:17 +02:00
return literalText + "?" + parts.join("&") + hash;
2020-07-29 15:05:19 +02:00
}, optionParts);
2020-08-31 13:25:13 +02:00
2020-11-11 16:23:49 +01:00
this.iframe = url.map(url => `&lt;iframe src="${url}" width="100%" height="100%" title="${layout?.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt`);
2020-08-31 13:25:13 +02:00
2020-07-29 15:05:19 +02:00
this._iframeCode = new VariableUiElement(
url.map((url) => {
return `<span class='literal-code iframe-code-block'>
2020-11-11 16:23:49 +01:00
&lt;iframe src="${url}" width="100%" height="100%" title="${layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt
2020-07-29 15:05:19 +02:00
</span>`
})
);
2020-07-29 15:05:19 +02:00
2020-08-08 21:17:17 +02:00
this._editLayout = new FixedUiElement("");
2020-08-31 13:25:13 +02:00
if ((layoutDefinition !== undefined && State.state?.osmConnection !== undefined)) {
2020-08-23 01:49:19 +02:00
this._editLayout =
new VariableUiElement(
State.state.osmConnection.userDetails.map(
userDetails => {
2021-01-02 19:09:49 +01:00
if (userDetails.csCount <= Constants.userJourney.themeGeneratorReadOnlyUnlock) {
2020-08-23 01:49:19 +02:00
return "";
}
2020-08-27 01:03:58 +02:00
2020-11-06 04:02:53 +01:00
return new SubtleButton(Svg.pencil_ui(),
2020-08-27 01:03:58 +02:00
new Combine([tr.editThisTheme.SetClass("bold"), "<br/>",
tr.editThemeDescription]),
{url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true}).Render();
2020-08-23 01:49:19 +02:00
}
));
2020-08-08 21:17:17 +02:00
}
2020-07-29 15:05:19 +02:00
2020-08-27 01:03:58 +02:00
this._linkStatus = new UIEventSource<string | Translation>("");
this.ListenTo(this._linkStatus);
2020-07-29 15:05:19 +02:00
const self = this;
this._link = new VariableUiElement(
url.map((url) => {
return `<input type="text" value=" ${url}" id="code-link--copyable" style="width:90%">`
})
).onClick(async () => {
2020-07-29 15:05:19 +02:00
const shareData = {
title: Translations.W(layout.id)?.InnerRender() ?? "",
text: Translations.W(layout.description)?.InnerRender() ?? "",
2020-07-29 15:05:19 +02:00
url: self._link.data,
}
function rejected() {
const copyText = document.getElementById("code-link--copyable");
2020-07-29 15:05:19 +02:00
// @ts-ignore
copyText.select();
// @ts-ignore
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
document.execCommand("copy");
2020-08-27 01:03:58 +02:00
const copied = tr.copiedToClipboard;
copied.SetClass("thanks")
self._linkStatus.setData(copied);
2020-07-29 15:05:19 +02:00
}
try {
navigator.share(shareData)
.then(() => {
2020-08-27 01:03:58 +02:00
const thx = tr.thanksForSharing;
thx.SetClass("thanks");
this._linkStatus.setData(thx);
2020-07-29 15:05:19 +02:00
}, rejected)
.catch(rejected)
} catch (err) {
rejected();
}
});
}
InnerRender(): string {
const tr = Translations.t.general.sharescreen;
return new VerticalCombine([
2020-08-27 01:03:58 +02:00
this._editLayout,
2020-07-29 15:05:19 +02:00
tr.intro,
this._link,
2020-08-27 01:03:58 +02:00
Translations.W(this._linkStatus.data),
2020-07-29 15:54:44 +02:00
tr.addToHomeScreen,
2020-07-29 15:05:19 +02:00
tr.embedIntro,
this._options,
2020-08-08 21:17:17 +02:00
this._iframeCode,
2020-07-29 15:05:19 +02:00
]).Render()
}
}