From b441e6e8a5a1bb66ae96b22360d989096dfc7a73 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Mon, 3 May 2021 16:04:35 +0200 Subject: [PATCH] Fixed some typos, fixed legacy loading in non-legacy settings, also show attribution when layer control is disabled --- InitUiElements.ts | 93 ++++++++++--------- Logic/FeatureSource/FilteringFeatureSource.ts | 3 +- Models/Constants.ts | 2 +- UI/Base/SubtleButton.ts | 2 +- index.css | 4 + index.html | 1 + index.manifest | 4 +- index.ts | 26 ++++-- 8 files changed, 75 insertions(+), 60 deletions(-) diff --git a/InitUiElements.ts b/InitUiElements.ts index ac28a71b9..3c1ce6e85 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -81,7 +81,7 @@ export class InitUiElements { // This is purely for the personal theme to load the layers there const favs = State.state.favouriteLayers.data ?? []; - + layoutToUse.layers.splice(0, layoutToUse.layers.length); for (const fav of favs) { for (const layouts of State.state.installedThemes.data) { @@ -206,16 +206,16 @@ export class InitUiElements { hashFromLocalStorage.setData(hash); dedicatedHashFromLocalStorage.setData(hash); } - + let json: {} - try{ - json = JSON.parse(atob(hash)); + try { + json = JSON.parse(atob(hash)); } catch (e) { // We try to decode with lz-string - json = JSON.parse( Utils.UnMinify(LZString.decompressFromBase64(hash))) as LayoutConfigJson; - + json = JSON.parse(Utils.UnMinify(LZString.decompressFromBase64(hash))) as LayoutConfigJson; + } - + // @ts-ignore const layoutToUse = new LayoutConfig(json, false); userLayoutParam.setData(layoutToUse.id); @@ -229,7 +229,6 @@ export class InitUiElements { private static OnlyIf(featureSwitch: UIEventSource, callback: () => void) { featureSwitch.addCallbackAndRun(() => { - if (featureSwitch.data) { callback(); } @@ -269,48 +268,54 @@ export class InitUiElements { } private static InitLayerSelection() { - InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => { - const layerControlPanel = new LayerControlPanel( - State.state.layerControlIsOpened) - .SetClass("block p-1 rounded-full"); - const checkbox = new CheckBox( - layerControlPanel, - new MapControlButton(Svg.layers_svg()), - State.state.layerControlIsOpened + const copyrightNotice = + new ScrollableFullScreen( + () => Translations.t.general.attribution.attributionTitle.Clone(), + () => new AttributionPanel(State.state.layoutToUse), + "copyright" ) - const copyrightNotice = - new ScrollableFullScreen( - () => Translations.t.general.attribution.attributionTitle.Clone(), - () => new AttributionPanel(State.state.layoutToUse), - "copyright" - ) - ; - const copyrightButton = new CheckBox( - copyrightNotice, - new MapControlButton(Svg.osm_copyright_svg()), - copyrightNotice.isShown - ).SetClass("p-0.5") + ; + const copyrightButton = new CheckBox( + copyrightNotice, + new MapControlButton(Svg.osm_copyright_svg()), + copyrightNotice.isShown + ).SetClass("p-0.5") - new Combine([copyrightButton, checkbox]) - .AttachTo("bottom-left"); + const layerControlPanel = new LayerControlPanel( + State.state.layerControlIsOpened) + .SetClass("block p-1 rounded-full"); + const layerControlButton = new CheckBox( + layerControlPanel, + new MapControlButton(Svg.layers_svg()), + State.state.layerControlIsOpened + ) + + const layerControl = new CheckBox( + layerControlButton, + "", + State.state.featureSwitchLayers + ) + + new Combine([copyrightButton, layerControl]) + .AttachTo("bottom-left"); - State.state.locationControl - .addCallback(() => { - // Close the layer selection when the map is moved - checkbox.isEnabled.setData(false); - copyrightButton.isEnabled.setData(false); - }); + State.state.locationControl + .addCallback(() => { + // Close the layer selection when the map is moved + layerControlButton.isEnabled.setData(false); + copyrightButton.isEnabled.setData(false); + }); - State.state.selectedElement.addCallbackAndRun(feature => { - if (feature !== undefined) { - checkbox.isEnabled.setData(false); - } - }) + State.state.selectedElement.addCallbackAndRun(feature => { + if (feature !== undefined) { + layerControlButton.isEnabled.setData(false); + copyrightButton.isEnabled.setData(false); + } + }) - }); } private static InitBaseMap() { @@ -371,7 +376,7 @@ export class InitUiElements { state.layoutToUse.map(layoutToUse => { const flayers = []; - + for (const layer of layoutToUse.layers) { const isDisplayed = QueryParameters.GetQueryParameter("layer-" + layer.id, "true", "Wether or not layer " + layer.id + " is shown") .map((str) => str !== "false", [], (b) => b.toString()); @@ -440,6 +445,6 @@ export class InitUiElements { ); }); - + } } \ No newline at end of file diff --git a/Logic/FeatureSource/FilteringFeatureSource.ts b/Logic/FeatureSource/FilteringFeatureSource.ts index 0f05c29d7..74dcf59c7 100644 --- a/Logic/FeatureSource/FilteringFeatureSource.ts +++ b/Logic/FeatureSource/FilteringFeatureSource.ts @@ -15,8 +15,6 @@ public readonly name = "FilteringFeatureSource" const self = this; - console.log("INITING pipeline: ",layers) - function update() { const layerDict = {}; @@ -69,6 +67,7 @@ public readonly name = "FilteringFeatureSource" return false; }); + console.log("Filtering layer source: input: ", upstream.features.data?.length, "output:", newFeatures.length) self.features.setData(newFeatures); if(missingLayers.size > 0){ console.error("Some layers were not found: ", Array.from(missingLayers)) diff --git a/Models/Constants.ts b/Models/Constants.ts index 9b4e097e7..ccf8e1c7f 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -2,7 +2,7 @@ import { Utils } from "../Utils"; export default class Constants { - public static vNumber = "0.7.0a"; + public static vNumber = "0.7.0b"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/UI/Base/SubtleButton.ts b/UI/Base/SubtleButton.ts index ba76527f1..472be20f7 100644 --- a/UI/Base/SubtleButton.ts +++ b/UI/Base/SubtleButton.ts @@ -52,7 +52,7 @@ export class SubtleButton extends UIElement{ return new Combine([ this.image, this.message, - ]).SetClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200") + ]).SetClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200 link-no-underline") .Render(); } diff --git a/index.css b/index.css index 77601637d..b910d28c6 100644 --- a/index.css +++ b/index.css @@ -114,6 +114,10 @@ a { color: #0078A8; } +.link-no-underline a { + text-decoration: none; +} + li { margin-left: 0.5em; padding-left: 0.2em; diff --git a/index.html b/index.html index c2cd5e8df..bb3bbb633 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + diff --git a/index.manifest b/index.manifest index 9d1d1dab6..bc3ffa9fb 100644 --- a/index.manifest +++ b/index.manifest @@ -1,10 +1,10 @@ { "name": "index", - "short_name": "M", + "short_name": "MapComplete", "start_url": "/index.html", "display": "standalone", "background_color": "#fff", - "description": "M", + "description": "An easy to use OpenStreetMap viewer and editor", "orientation": "portrait-primary, landscape-primary", "icons": [ { diff --git a/index.ts b/index.ts index 7e0e0ea85..8ae565b8c 100644 --- a/index.ts +++ b/index.ts @@ -70,13 +70,19 @@ let layoutToUse: LayoutConfig = AllKnownLayouts.allKnownLayouts.get(defaultLayou 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"){ - QueryParameters.GetQueryParameter("layer-bike_shops", "true", "Legacy - keep De Fietsambassade working").syncWith( - QueryParameters.GetQueryParameter("layer-bike_shop","true","Legacy - keep De Fietsambassade working") - ) - const bikecafes = QueryParameters.GetQueryParameter("layer-bike_cafes", "true", "Legacy - keep De Fietsambassade working").syncWith( - QueryParameters.GetQueryParameter("layer-bike_cafe","true","Legacy - keep De Fietsambassade working") - ) +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) + } } @@ -98,7 +104,7 @@ if (layoutFromBase64.startsWith("http")) { try { console.log("Received ", data) let parsed = data; - if(typeof parsed == "string"){ + if (typeof parsed == "string") { parsed = JSON.parse(data); } // Overwrite the id to the wiki:value @@ -129,10 +135,10 @@ if (layoutFromBase64.startsWith("http")) { // This is the default case: a builtin theme InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout); } else { - // We fall through: no theme loaded: just show a few buttons + // We fall through: no theme loaded: just show an overview of layouts State.state = new State(undefined); new Combine([new MoreScreen(true), - Translations.t.general.aboutMapcomplete + Translations.t.general.aboutMapcomplete.SetClass("link-underline") ]).SetClass("block m-5 lg:w-3/4 lg:ml-40") .SetStyle("pointer-events: all;") .AttachTo("topleft-tools");