258 lines
9.9 KiB
TypeScript
258 lines
9.9 KiB
TypeScript
import { VariableUiElement } from "../Base/VariableUIElement"
|
|
import { Translation } from "../i18n/Translation"
|
|
import Svg from "../../Svg"
|
|
import Combine from "../Base/Combine"
|
|
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
|
import { Utils } from "../../Utils"
|
|
import Translations from "../i18n/Translations"
|
|
import BaseUIElement from "../BaseUIElement"
|
|
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
|
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
|
|
import Loc from "../../Models/Loc"
|
|
import BaseLayer from "../../Models/BaseLayer"
|
|
import FilteredLayer from "../../Models/FilteredLayer"
|
|
import { InputElement } from "../Input/InputElement"
|
|
import { CheckBox } from "../Input/Checkboxes"
|
|
import { SubtleButton } from "../Base/SubtleButton"
|
|
import LZString from "lz-string"
|
|
|
|
export default class ShareScreen extends Combine {
|
|
constructor(state: {
|
|
layoutToUse: LayoutConfig
|
|
locationControl: UIEventSource<Loc>
|
|
backgroundLayer: UIEventSource<BaseLayer>
|
|
filteredLayers: UIEventSource<FilteredLayer[]>
|
|
}) {
|
|
const layout = state?.layoutToUse
|
|
const tr = Translations.t.general.sharescreen
|
|
|
|
const optionCheckboxes: InputElement<boolean>[] = []
|
|
const optionParts: Store<string>[] = []
|
|
|
|
const includeLocation = new CheckBox(tr.fsIncludeCurrentLocation, true)
|
|
optionCheckboxes.push(includeLocation)
|
|
|
|
const currentLocation = state.locationControl
|
|
|
|
optionParts.push(
|
|
includeLocation.GetValue().map(
|
|
(includeL) => {
|
|
if (currentLocation === undefined) {
|
|
return null
|
|
}
|
|
if (includeL) {
|
|
return [
|
|
["z", currentLocation.data?.zoom],
|
|
["lat", currentLocation.data?.lat],
|
|
["lon", currentLocation.data?.lon],
|
|
]
|
|
.filter((p) => p[1] !== undefined)
|
|
.map((p) => p[0] + "=" + p[1])
|
|
.join("&")
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
[currentLocation]
|
|
)
|
|
)
|
|
|
|
function fLayerToParam(flayer: {
|
|
isDisplayed: UIEventSource<boolean>
|
|
layerDef: LayerConfig
|
|
}) {
|
|
if (flayer.isDisplayed.data) {
|
|
return null // Being displayed is the default
|
|
}
|
|
return "layer-" + flayer.layerDef.id + "=" + flayer.isDisplayed.data
|
|
}
|
|
|
|
const currentLayer: UIEventSource<{ id: string; name: string; layer: any }> =
|
|
state.backgroundLayer
|
|
const currentBackground = new VariableUiElement(
|
|
currentLayer.map((layer) => {
|
|
return tr.fsIncludeCurrentBackgroundMap.Subs({ name: layer?.name ?? "" })
|
|
})
|
|
)
|
|
const includeCurrentBackground = new CheckBox(currentBackground, true)
|
|
optionCheckboxes.push(includeCurrentBackground)
|
|
optionParts.push(
|
|
includeCurrentBackground.GetValue().map(
|
|
(includeBG) => {
|
|
if (includeBG) {
|
|
return "background=" + currentLayer.data?.id
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
[currentLayer]
|
|
)
|
|
)
|
|
|
|
const includeLayerChoices = new CheckBox(tr.fsIncludeCurrentLayers, true)
|
|
optionCheckboxes.push(includeLayerChoices)
|
|
|
|
optionParts.push(
|
|
includeLayerChoices.GetValue().map(
|
|
(includeLayerSelection) => {
|
|
if (includeLayerSelection) {
|
|
return Utils.NoNull(state.filteredLayers.data.map(fLayerToParam)).join("&")
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
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: "fs-add-new", human: tr.fsAddNew },
|
|
{ urlName: "fs-geolocation", human: tr.fsGeolocation },
|
|
]
|
|
|
|
for (const swtch of switches) {
|
|
const checkbox = new CheckBox(Translations.W(swtch.human))
|
|
optionCheckboxes.push(checkbox)
|
|
optionParts.push(
|
|
checkbox.GetValue().map((isEn) => {
|
|
if (isEn) {
|
|
return null
|
|
} else {
|
|
return `${swtch.urlName}=false`
|
|
}
|
|
})
|
|
)
|
|
}
|
|
|
|
if (layout.definitionRaw !== undefined) {
|
|
optionParts.push(new UIEventSource("userlayout=" + (layout.definedAtUrl ?? layout.id)))
|
|
}
|
|
|
|
const options = new Combine(optionCheckboxes).SetClass("flex flex-col")
|
|
const url = (currentLocation ?? new UIEventSource(undefined)).map(() => {
|
|
const host = window.location.host
|
|
let path = window.location.pathname
|
|
path = path.substr(0, path.lastIndexOf("/"))
|
|
let id = layout.id.toLowerCase()
|
|
if (layout.definitionRaw !== undefined) {
|
|
id = "theme.html"
|
|
}
|
|
let literalText = `https://${host}${path}/${id}`
|
|
|
|
let hash = ""
|
|
if (layout.definedAtUrl === undefined && layout.definitionRaw !== undefined) {
|
|
hash = "#" + LZString.compressToBase64(Utils.MinifyJSON(layout.definitionRaw))
|
|
}
|
|
const parts = Utils.NoEmpty(
|
|
Utils.NoNull(optionParts.map((eventSource) => eventSource.data))
|
|
)
|
|
if (parts.length === 0) {
|
|
return literalText + hash
|
|
}
|
|
return literalText + "?" + parts.join("&") + hash
|
|
}, optionParts)
|
|
|
|
const iframeCode = new VariableUiElement(
|
|
url.map((url) => {
|
|
return `<span class='literal-code iframe-code-block'>
|
|
<iframe src="${url}" allow="geolocation" width="100%" height="100%" style="min-width: 250px; min-height: 250px" title="${
|
|
layout.title?.txt ?? "MapComplete"
|
|
} with MapComplete"></iframe>
|
|
</span>`
|
|
})
|
|
)
|
|
|
|
const linkStatus = new UIEventSource<string | Translation>("")
|
|
const link = new VariableUiElement(
|
|
url.map(
|
|
(url) =>
|
|
`<input type="text" value=" ${url}" id="code-link--copyable" style="width:90%">`
|
|
)
|
|
).onClick(async () => {
|
|
const shareData = {
|
|
title: Translations.W(layout.title)?.ConstructElement().textContent ?? "",
|
|
text: Translations.W(layout.description)?.ConstructElement().textContent ?? "",
|
|
url: url.data,
|
|
}
|
|
|
|
function rejected() {
|
|
const copyText = document.getElementById("code-link--copyable")
|
|
|
|
// @ts-ignore
|
|
copyText.select()
|
|
// @ts-ignore
|
|
copyText.setSelectionRange(0, 99999) /*For mobile devices*/
|
|
|
|
document.execCommand("copy")
|
|
const copied = tr.copiedToClipboard.Clone()
|
|
copied.SetClass("thanks")
|
|
linkStatus.setData(copied)
|
|
}
|
|
|
|
try {
|
|
navigator
|
|
.share(shareData)
|
|
.then(() => {
|
|
const thx = tr.thanksForSharing.Clone()
|
|
thx.SetClass("thanks")
|
|
linkStatus.setData(thx)
|
|
}, rejected)
|
|
.catch(rejected)
|
|
} catch (err) {
|
|
rejected()
|
|
}
|
|
})
|
|
|
|
let downloadThemeConfig: BaseUIElement = undefined
|
|
if (layout.definitionRaw !== undefined) {
|
|
const downloadThemeConfigAsJson = new SubtleButton(
|
|
Svg.download_svg(),
|
|
new Combine([tr.downloadCustomTheme, tr.downloadCustomThemeHelp.SetClass("subtle")])
|
|
.onClick(() => {
|
|
Utils.offerContentsAsDownloadableFile(
|
|
layout.definitionRaw,
|
|
layout.id + ".mapcomplete-theme-definition.json",
|
|
{
|
|
mimetype: "application/json",
|
|
}
|
|
)
|
|
})
|
|
.SetClass("flex flex-col")
|
|
)
|
|
let editThemeConfig: BaseUIElement = undefined
|
|
if (layout.definedAtUrl === undefined) {
|
|
const patchedDefinition = JSON.parse(layout.definitionRaw)
|
|
patchedDefinition["language"] = Object.keys(patchedDefinition.title)
|
|
editThemeConfig = new SubtleButton(
|
|
Svg.pencil_svg(),
|
|
"Edit this theme on the custom theme generator",
|
|
{
|
|
url: `https://pietervdvn.github.io/mc/legacy/070/customGenerator.html#${btoa(
|
|
JSON.stringify(patchedDefinition)
|
|
)}`,
|
|
}
|
|
)
|
|
}
|
|
downloadThemeConfig = new Combine([
|
|
downloadThemeConfigAsJson,
|
|
editThemeConfig,
|
|
]).SetClass("flex flex-col")
|
|
}
|
|
|
|
super([
|
|
tr.intro,
|
|
link,
|
|
new VariableUiElement(linkStatus),
|
|
downloadThemeConfig,
|
|
tr.addToHomeScreen,
|
|
tr.embedIntro,
|
|
options,
|
|
iframeCode,
|
|
])
|
|
this.SetClass("flex flex-col link-underline")
|
|
}
|
|
}
|