diff --git a/Customizations/JSON/FromJSON.ts b/Customizations/JSON/FromJSON.ts index 22fb08c51d..5ae62d4b54 100644 --- a/Customizations/JSON/FromJSON.ts +++ b/Customizations/JSON/FromJSON.ts @@ -264,7 +264,12 @@ export class FromJSON { const iconSize = FromJSON.TagRenderingWithDefault(json.iconSize, "iconSize", "40,40,center"); const color = FromJSON.TagRenderingWithDefault(json.color, "layercolor", "#0000ff"); const width = FromJSON.TagRenderingWithDefault(json.width, "layerwidth", "10"); - + if(json.title === "Layer"){ + json.title = {}; + } + let title= FromJSON.TagRendering(json.title); + + let tagRenderingDefs = json.tagRenderings ?? []; let hasImageElement = false; for (const tagRenderingDef of tagRenderingDefs) { @@ -338,7 +343,7 @@ export class FromJSON { icon: icon.GetContent(renderTags).txt, overpassFilter: overpassTags, - title: FromJSON.TagRendering(json.title), + title: title, minzoom: json.minzoom, presets: presets, elementsToShow: tagRenderings, diff --git a/UI/CustomGenerator/GenerateEmpty.ts b/UI/CustomGenerator/GenerateEmpty.ts index ce87fafdef..a1102e7b25 100644 --- a/UI/CustomGenerator/GenerateEmpty.ts +++ b/UI/CustomGenerator/GenerateEmpty.ts @@ -9,7 +9,7 @@ export class GenerateEmpty { name: "Layer", minzoom: 12, overpassTags: {and: [""]}, - title: "Layer", + title: {}, description: {}, tagRenderings: [], icon: { @@ -18,7 +18,7 @@ export class GenerateEmpty { width: { render: "8" }, - iconSize:{ + iconSize: { render: "40,40,center" }, color:{ diff --git a/UI/CustomGenerator/SavePanel.ts b/UI/CustomGenerator/SavePanel.ts index 1defa14b21..fd52edf4c0 100644 --- a/UI/CustomGenerator/SavePanel.ts +++ b/UI/CustomGenerator/SavePanel.ts @@ -5,10 +5,14 @@ import {LayoutConfigJson} from "../../Customizations/JSON/LayoutConfigJson"; import Combine from "../Base/Combine"; import {OsmConnection} from "../../Logic/Osm/OsmConnection"; import {FixedUiElement} from "../Base/FixedUiElement"; +import {TextField} from "../Input/TextField"; +import {SubtleButton} from "../Base/SubtleButton"; +import {FromJSON} from "../../Customizations/JSON/FromJSON"; export default class SavePanel extends UIElement { private json: UIElement; private lastSaveEl: UIElement; + private loadFromJson: UIElement; constructor( connection: OsmConnection, @@ -16,7 +20,6 @@ export default class SavePanel extends UIElement { chronic: UIEventSource) { super(); - this.lastSaveEl = new VariableUiElement(chronic .map(date => { @@ -26,12 +29,25 @@ export default class SavePanel extends UIElement { return "Your theme was last saved at " + date.toISOString() })).onClick(() => chronic.setData(new Date())); - this.json = new VariableUiElement(config.map(config => { - return JSON.stringify(config, null, 2) - .replace(/\n/g, "
") - .replace(/ /g, " "); - })) - .SetClass("literal-code"); + const jsonStr = config.map(config => + JSON.stringify(config, null, 2)); + + + const jsonTextField = new TextField({ + placeholder: "JSON Config", + fromString: str => str, + toString: str => str, + value: jsonStr, + startValidated: false, + textArea: true, + textAreaRows: 20 + }); + this.json = jsonTextField; + this.loadFromJson = new SubtleButton("./assets/reload.svg", "Load the JSON file below") + .onClick(() => { + const json = jsonTextField.GetValue().data; + config.setData(JSON.parse(json)); + }); } InnerRender(): string { @@ -41,6 +57,8 @@ export default class SavePanel extends UIElement { "

JSON configuration

", "The url hash is actually no more then a BASE64-encoding of the below JSON. This json contains the full configuration of the theme.
" + "This configuration is mainly useful for debugging", + "
", + this.loadFromJson, this.json ]).SetClass("scrollable") .Render(); diff --git a/UI/Input/TextField.ts b/UI/Input/TextField.ts index dd50a0fcc9..961bdc61a9 100644 --- a/UI/Input/TextField.ts +++ b/UI/Input/TextField.ts @@ -56,7 +56,7 @@ export class ValidatedTextField { } export class TextField extends InputElement { - + public static StringInput(textArea: boolean = false): TextField { return new TextField({ toString: str => str, @@ -111,6 +111,7 @@ export class TextField extends InputElement { private readonly startValidated: boolean; public readonly IsSelected: UIEventSource = new UIEventSource(false); private readonly _isArea: boolean; + private _textAreaRows: number; constructor(options: { /** @@ -131,7 +132,8 @@ export class TextField extends InputElement { fromString: (string: string) => T, value?: UIEventSource, startValidated?: boolean, - textArea?: boolean + textArea?: boolean, + textAreaRows?: number }) { super(undefined); const self = this; @@ -144,7 +146,7 @@ export class TextField extends InputElement { this._fromString = options.fromString ?? ((str) => (str)) this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str))); this.mappedValue.addCallback((t) => this.value.setData(options.toString(t))); - + this._textAreaRows = options.textAreaRows; this._placeholder = Translations.W(options.placeholder ?? ""); this.ListenTo(this._placeholder._source); @@ -171,7 +173,7 @@ export class TextField extends InputElement { InnerRender(): string { if(this._isArea){ - return `` + return `` } return `
` + diff --git a/assets/themes/cyclestreets/cyclestreets.json b/assets/themes/cyclestreets/cyclestreets.json index d7f151c5ea..7e85c45e0c 100644 --- a/assets/themes/cyclestreets/cyclestreets.json +++ b/assets/themes/cyclestreets/cyclestreets.json @@ -2,7 +2,8 @@ "id": "fietsstraten", "version": "2020-08-30", "title": "Fietsstraten", - "description": "Een fietsstraat is een straat waar automobilisten geen fietsers mogen inhalen en waar een maximumsnelheid van 30km/u geldt.

Op deze open kaart kan je alle gekende fietsstraten zien en kan je ontbrekende fietsstraten aanduiden. Om de kaart aan te passen, moet je je aanmelden met OpenStreetMap en helemaal inzoomen tot straatniveau.", + "description": "Een fietsstraat is een straat waar
  • automobilisten geen fietsers mogen inhalen
  • Er een maximumsnelheid van 30km/u geldt
  • Fietsers gemotoriseerde voortuigen links mogen inhalen
  • Fietsers nog steeds voorrang aan rechts moeten verlenen - ook aan auto's en voetgangers op het zebrapad


Op deze open kaart kan je alle gekende fietsstraten zien en kan je ontbrekende fietsstraten aanduiden. Om de kaart aan te passen, moet je je aanmelden met OpenStreetMap en helemaal inzoomen tot straatniveau.", + "icon": "./assets/themes/cyclestreets/F111.svg", "language": "nl", "startLat": 51.2095,