forked from MapComplete/MapComplete
Huge refactoring of state and initial UI setup
This commit is contained in:
parent
4e43673de5
commit
eff6b5bfad
37 changed files with 5232 additions and 4907 deletions
176
index.ts
176
index.ts
|
|
@ -1,27 +1,24 @@
|
|||
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
|
||||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||||
import {InitUiElements} from "./InitUiElements";
|
||||
import {QueryParameters} from "./Logic/Web/QueryParameters";
|
||||
import {UIEventSource} from "./Logic/UIEventSource";
|
||||
import * as $ from "jquery";
|
||||
import MoreScreen from "./UI/BigComponents/MoreScreen";
|
||||
import State from "./State";
|
||||
import Combine from "./UI/Base/Combine";
|
||||
import Translations from "./UI/i18n/Translations";
|
||||
import ValidatedTextField from "./UI/Input/ValidatedTextField";
|
||||
import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
|
||||
import LayoutConfig from "./Models/ThemeConfig/LayoutConfig";
|
||||
import Constants from "./Models/Constants";
|
||||
import MinimapImplementation from "./UI/Base/MinimapImplementation";
|
||||
import CountryCoder from "latlon2country/index";
|
||||
import SimpleMetaTagger from "./Logic/SimpleMetaTagger";
|
||||
import {Utils} from "./Utils";
|
||||
import AllThemesGui from "./UI/AllThemesGui";
|
||||
import DetermineLayout from "./Logic/DetermineLayout";
|
||||
import LayoutConfig from "./Models/ThemeConfig/LayoutConfig";
|
||||
import DefaultGUI, {DefaultGuiState} from "./UI/DefaultGUI";
|
||||
import State from "./State";
|
||||
|
||||
MinimapImplementation.initialize()
|
||||
// Workaround for a stupid crash: inject some functions which would give stupid circular dependencies or crash the other nodejs scripts
|
||||
ValidatedTextField.bestLayerAt = (location, layerPref) => AvailableBaseLayers.SelectBestLayerAccordingTo(location, layerPref)
|
||||
SimpleMetaTagger.coder = new CountryCoder("https://pietervdvn.github.io/latlon2country/");
|
||||
Utils.DisableLongPresses()
|
||||
|
||||
let defaultLayout = ""
|
||||
// --------------------- Special actions based on the parameters -----------------
|
||||
// @ts-ignore
|
||||
if (location.href.startsWith("http://buurtnatuur.be")) {
|
||||
|
|
@ -30,60 +27,65 @@ if (location.href.startsWith("http://buurtnatuur.be")) {
|
|||
}
|
||||
|
||||
|
||||
if (location.href.indexOf("buurtnatuur.be") >= 0) {
|
||||
defaultLayout = "buurtnatuur"
|
||||
}
|
||||
class Init {
|
||||
|
||||
|
||||
let testing: UIEventSource<string>;
|
||||
if (QueryParameters.GetQueryParameter("backend", undefined).data !== "osm-test" &&
|
||||
(location.hostname === "localhost" || location.hostname === "127.0.0.1")) {
|
||||
testing = QueryParameters.GetQueryParameter("test", "true");
|
||||
// Set to true if testing and changes should NOT be saved
|
||||
testing.setData(testing.data ?? "true")
|
||||
// If you have a testfile somewhere, enable this to spoof overpass
|
||||
// This should be hosted independantly, e.g. with `cd assets; webfsd -p 8080` + a CORS plugin to disable cors rules
|
||||
// Overpass.testUrl = "http://127.0.0.1:8080/streetwidths.geojson";
|
||||
} else {
|
||||
testing = QueryParameters.GetQueryParameter("test", "false");
|
||||
}
|
||||
public static Init(layoutToUse: LayoutConfig, encoded: string) {
|
||||
|
||||
if(layoutToUse === null){
|
||||
// Something went wrong, error message is already on screen
|
||||
return;
|
||||
}
|
||||
|
||||
if (layoutToUse === undefined) {
|
||||
// No layout found
|
||||
new AllThemesGui()
|
||||
return;
|
||||
}
|
||||
|
||||
// Workaround/legacy to keep the old paramters working as I renamed some of them
|
||||
if (layoutToUse?.id === "cyclofix") {
|
||||
const legacy = QueryParameters.GetQueryParameter("layer-bike_shops", "true", "Legacy - keep De Fietsambassade working");
|
||||
const correct = QueryParameters.GetQueryParameter("layer-bike_shop", "true", "Legacy - keep De Fietsambassade working")
|
||||
if (legacy.data !== "true") {
|
||||
correct.setData(legacy.data)
|
||||
}
|
||||
console.log("layer-bike_shop toggles: legacy:", legacy.data, "new:", correct.data)
|
||||
|
||||
const legacyCafe = QueryParameters.GetQueryParameter("layer-bike_cafes", "true", "Legacy - keep De Fietsambassade working")
|
||||
const correctCafe = QueryParameters.GetQueryParameter("layer-bike_cafe", "true", "Legacy - keep De Fietsambassade working")
|
||||
if (legacyCafe.data !== "true") {
|
||||
correctCafe.setData(legacy.data)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------- SELECT THE RIGHT Theme -----------------
|
||||
const guiState = new DefaultGuiState()
|
||||
State.state = new State(layoutToUse);
|
||||
// This 'leaks' the global state via the window object, useful for debugging
|
||||
// @ts-ignore
|
||||
window.mapcomplete_state = State.state;
|
||||
new DefaultGUI(State.state, guiState)
|
||||
|
||||
|
||||
if (encoded !== undefined && encoded.length > 10) {
|
||||
// We save the layout to the user settings and local storage
|
||||
State.state.osmConnection.OnLoggedIn(() => {
|
||||
State.state.osmConnection
|
||||
.GetLongPreference("installed-theme-" + layoutToUse.id)
|
||||
.setData(encoded);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
const path = window.location.pathname.split("/").slice(-1)[0];
|
||||
if (path !== "index.html" && path !== "") {
|
||||
defaultLayout = path;
|
||||
if (path.endsWith(".html")) {
|
||||
defaultLayout = path.substr(0, path.length - 5);
|
||||
}
|
||||
console.log("Using layout", defaultLayout);
|
||||
}
|
||||
defaultLayout = QueryParameters.GetQueryParameter("layout", defaultLayout, "The layout to load into MapComplete").data;
|
||||
let layoutToUse: LayoutConfig = AllKnownLayouts.allKnownLayouts.get(defaultLayout.toLowerCase());
|
||||
|
||||
const userLayoutParam = QueryParameters.GetQueryParameter("userlayout", "false", "If not 'false', a custom (non-official) theme is loaded. This custom layout can be done in multiple ways: \n\n- The hash of the URL contains a base64-encoded .json-file containing the theme definition\n- The hash of the URL contains a lz-compressed .json-file, as generated by the custom theme generator\n- The parameter itself is an URL, in which case that URL will be downloaded. It should point to a .json of a theme");
|
||||
|
||||
// Workaround/legacy to keep the old paramters working as I renamed some of them
|
||||
if (layoutToUse?.id === "cyclofix") {
|
||||
const legacy = QueryParameters.GetQueryParameter("layer-bike_shops", "true", "Legacy - keep De Fietsambassade working");
|
||||
const correct = QueryParameters.GetQueryParameter("layer-bike_shop", "true", "Legacy - keep De Fietsambassade working")
|
||||
if (legacy.data !== "true") {
|
||||
correct.setData(legacy.data)
|
||||
}
|
||||
console.log("layer-bike_shop toggles: legacy:", legacy.data, "new:", correct.data)
|
||||
|
||||
const legacyCafe = QueryParameters.GetQueryParameter("layer-bike_cafes", "true", "Legacy - keep De Fietsambassade working")
|
||||
const correctCafe = QueryParameters.GetQueryParameter("layer-bike_cafe", "true", "Legacy - keep De Fietsambassade working")
|
||||
if (legacyCafe.data !== "true") {
|
||||
correctCafe.setData(legacy.data)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const layoutFromBase64 = decodeURIComponent(userLayoutParam.data);
|
||||
|
||||
document.getElementById("decoration-desktop").remove();
|
||||
new Combine(["Initializing... <br/>",
|
||||
new FixedUiElement("<a>If this message persist, something went wrong - click here to try again</a>")
|
||||
.SetClass("link-underline small")
|
||||
|
|
@ -93,71 +95,13 @@ new Combine(["Initializing... <br/>",
|
|||
|
||||
})])
|
||||
.AttachTo("centermessage"); // Add an initialization and reset button if something goes wrong
|
||||
document.getElementById("decoration-desktop").remove();
|
||||
|
||||
|
||||
if (layoutFromBase64.startsWith("http")) {
|
||||
const link = layoutFromBase64;
|
||||
console.log("Downloading map theme from ", link);
|
||||
new FixedUiElement(`Downloading the theme from the <a href="${link}">link</a>...`)
|
||||
.AttachTo("centermessage");
|
||||
DetermineLayout.GetLayout().then(value => {
|
||||
console.log("Got ", value)
|
||||
Init.Init(value[0], value[1])
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
$.ajax({
|
||||
url: link,
|
||||
success: (data) => {
|
||||
|
||||
try {
|
||||
console.log("Received ", data)
|
||||
let parsed = data;
|
||||
if (typeof parsed == "string") {
|
||||
parsed = JSON.parse(data);
|
||||
} else {
|
||||
data = JSON.stringify(parsed) // De wereld op zijn kop
|
||||
}
|
||||
// Overwrite the id to the wiki:value
|
||||
parsed.id = link;
|
||||
const layout = new LayoutConfig(parsed, false).patchImages(link, data);
|
||||
InitUiElements.InitAll(layout, layoutFromBase64, testing, layoutFromBase64, btoa(data));
|
||||
} catch (e) {
|
||||
new FixedUiElement(`<a href="${link}">${link}</a> is invalid:<br/>${e}<br/> <a href='https://${window.location.host}/'>Go back</a>`)
|
||||
.SetClass("clickable")
|
||||
.AttachTo("centermessage");
|
||||
console.error("Could not parse the text", data)
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
}).fail((_, textstatus, error) => {
|
||||
console.error("Could not download the wiki theme:", textstatus, error)
|
||||
new FixedUiElement(`<a href="${link}">${link}</a> is invalid:<br/>Could not download - wrong URL?<br/>` +
|
||||
error +
|
||||
"<a href='https://${window.location.host}/'>Go back</a>")
|
||||
.SetClass("clickable")
|
||||
.AttachTo("centermessage");
|
||||
});
|
||||
|
||||
} else if (layoutFromBase64 !== "false") {
|
||||
let [layoutToUse, encoded] = InitUiElements.LoadLayoutFromHash(userLayoutParam);
|
||||
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout, encoded);
|
||||
} else if (layoutToUse !== undefined) {
|
||||
// This is the default case: a builtin theme
|
||||
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout);
|
||||
} else {
|
||||
// We fall through: no theme loaded: just show an overview of layouts
|
||||
new FixedUiElement("").AttachTo("centermessage")
|
||||
State.state = new State(undefined);
|
||||
new Combine([new MoreScreen(true),
|
||||
Translations.t.general.aboutMapcomplete.SetClass("link-underline"),
|
||||
new FixedUiElement("v" + Constants.vNumber)
|
||||
]).SetClass("block m-5 lg:w-3/4 lg:ml-40")
|
||||
.SetStyle("pointer-events: all;")
|
||||
.AttachTo("topleft-tools");
|
||||
}
|
||||
// Remove all context event listeners on mobile to prevent long presses
|
||||
window.addEventListener('contextmenu', (e) => { // Not compatible with IE < 9
|
||||
|
||||
if (e.target["nodeName"] === "INPUT") {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}, false);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue