diff --git a/Customizations/JSON/FromJSON.ts b/Customizations/JSON/FromJSON.ts index 22fb08c..5ae62d4 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 ce87faf..a1102e7 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 1defa14..fd52edf 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 dd50a0f..961bdc6 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 d7f151c..7e85c45 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,