From a19f3e61f94dbba5419d27e8598989292a44b1a3 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 2 Nov 2020 18:59:21 +0100 Subject: [PATCH] Fix image carousel bug --- InitUiElements.ts | 3 --- UI/Image/ImageCarousel.ts | 4 +-- UI/Image/SlideShow.ts | 13 ++++++---- UI/Popup/FeatureInfoBox.ts | 4 ++- UI/Popup/TagRenderingAnswer.ts | 26 +++++++++++++------ UI/SpecialVisualizations.ts | 5 ++-- test.ts | 46 +++++++--------------------------- 7 files changed, 43 insertions(+), 58 deletions(-) diff --git a/InitUiElements.ts b/InitUiElements.ts index 206bf16..282c8ec 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -30,7 +30,6 @@ import {FullScreenMessageBox} from "./UI/FullScreenMessageBoxHandler"; import {GeoLocationHandler} from "./Logic/Leaflet/GeoLocationHandler"; import {Layout} from "./Customizations/Layout"; import {LocalStorageSource} from "./Logic/Web/LocalStorageSource"; -import {FromJSON} from "./Customizations/JSON/FromJSON"; import {Utils} from "./Utils"; import BackgroundSelector from "./UI/BackgroundSelector"; import AvailableBaseLayers from "./Logic/AvailableBaseLayers"; @@ -166,7 +165,6 @@ export class InitUiElements { // This layer is the layer that gives the questions const featureBox = new FeatureInfoBox( - feature.feature, State.state.allElements.getElement(data.id), layer ); @@ -477,7 +475,6 @@ export class InitUiElements { const generateInfo = (tagsES, feature) => { return new FeatureInfoBox( - feature, tagsES, layer, ) diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index b7f96c5..6810d1e 100644 --- a/UI/Image/ImageCarousel.ts +++ b/UI/Image/ImageCarousel.ts @@ -8,7 +8,7 @@ import DeleteImage from "./DeleteImage"; export class ImageCarousel extends UIElement{ - public readonly slideshow: SlideShow; + public readonly slideshow: UIElement; constructor(tags: UIEventSource, imagePrefix: string = "image", loadSpecial: boolean =true) { super(tags); @@ -29,7 +29,7 @@ export class ImageCarousel extends UIElement{ }); this.slideshow = new SlideShow(uiElements).HideOnEmpty(true); - + } InnerRender(): string { diff --git a/UI/Image/SlideShow.ts b/UI/Image/SlideShow.ts index b9ff6f4..fd0f140 100644 --- a/UI/Image/SlideShow.ts +++ b/UI/Image/SlideShow.ts @@ -1,6 +1,7 @@ import {UIEventSource} from "../../Logic/UIEventSource"; import {UIElement} from "../UIElement"; import {FixedUiElement} from "../Base/FixedUiElement"; +import Combine from "../Base/Combine"; export class SlideShow extends UIElement { @@ -22,6 +23,7 @@ export class SlideShow extends UIElement { this._currentSlide.setData(this._embeddedElements.data.length - 1); }); + this.dumbMode = false; const self = this; this._prev = new FixedUiElement("
" + "
" + @@ -43,6 +45,7 @@ export class SlideShow extends UIElement { } InnerRender(): string { + console.log("Inner rendering") if (this._embeddedElements.data.length == 0) { return ""; } @@ -63,11 +66,11 @@ export class SlideShow extends UIElement { } slides += "
" + embeddedElement.Render() + "
\n"; } - return "
" - + this._prev.Render() - + "
" + slides + "
" - + this._next.Render() - + "
"; + return new Combine(["
" + , this._prev + , "
", slides, "
" + , this._next + , "
"]).Render(); } public MoveTo(index: number) { diff --git a/UI/Popup/FeatureInfoBox.ts b/UI/Popup/FeatureInfoBox.ts index b65c53f..7e495f2 100644 --- a/UI/Popup/FeatureInfoBox.ts +++ b/UI/Popup/FeatureInfoBox.ts @@ -16,11 +16,13 @@ export class FeatureInfoBox extends UIElement { private _questionBox : UIElement; constructor( - feature: any, tags: UIEventSource, layerConfig: LayerConfig ) { super(); + if(layerConfig === undefined){ + throw "Undefined layerconfig" + } this._tags = tags; this._layerConfig = layerConfig; diff --git a/UI/Popup/TagRenderingAnswer.ts b/UI/Popup/TagRenderingAnswer.ts index 9d0dfa5..8c9f6dd 100644 --- a/UI/Popup/TagRenderingAnswer.ts +++ b/UI/Popup/TagRenderingAnswer.ts @@ -9,25 +9,37 @@ import {SubstitutedTranslation} from "../SpecialVisualizations"; export default class TagRenderingAnswer extends UIElement { private _tags: UIEventSource; private _configuration: TagRenderingConfig; + private _content: UIElement; - constructor(tags: UIEventSource, - configuration: TagRenderingConfig) { + constructor(tags: UIEventSource, configuration: TagRenderingConfig) { super(tags); this._tags = tags; this._configuration = configuration; + const self = this; + tags.addCallbackAndRun(tags => { + if (tags === undefined) { + self._content = undefined + return; + } + const tr = this._configuration.GetRenderValue(tags); + if (tr === undefined) { + self._content = undefined + return + } + self._content = new SubstitutedTranslation(tr, self._tags) + }) } InnerRender(): string { - if(this._configuration.condition !== undefined){ - if(!this._configuration.condition.matchesProperties(this._tags.data)){ + if (this._configuration.condition !== undefined) { + if (!this._configuration.condition.matchesProperties(this._tags.data)) { return ""; } } - const tr = this._configuration.GetRenderValue(this._tags.data); - if(tr === undefined){ + if(this._content === undefined){ return ""; } - return new SubstitutedTranslation(tr, this._tags).Render(); + return this._content.Render(); } } \ No newline at end of file diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index 32e70cb..6a0948f 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -22,7 +22,6 @@ export class SubstitutedTranslation extends UIElement { this.translation = translation; this.tags = tags; const self = this; - this.dumbMode = false; Locale.language.addCallbackAndRun(() => { self.content = self.CreateContent(); self.Update(); @@ -33,7 +32,7 @@ export class SubstitutedTranslation extends UIElement { InnerRender(): string { return new Combine(this.content).Render(); } - + private CreateContent(): UIElement[] { let txt = this.translation?.txt; if (txt === undefined) { @@ -78,7 +77,7 @@ export class SubstitutedTranslation extends UIElement { return [...partBefore, element, ...partAfter] } catch (e) { console.error(e); - return [...partBefore, ...partAfter] + return [...partBefore,new FixedUiElement(`Failed loading ${knownSpecial.funcName}(${matched[2]}): ${e}`) , ...partAfter] } } } diff --git a/test.ts b/test.ts index a6385b1..4979d12 100644 --- a/test.ts +++ b/test.ts @@ -2,47 +2,19 @@ import {UIEventSource} from "./Logic/UIEventSource"; -import {TagRenderingConfigJson} from "./Customizations/JSON/TagRenderingConfigJson"; -import TagRenderingConfig from "./Customizations/JSON/TagRenderingConfig"; -import Locale from "./UI/i18n/Locale"; -import EditableTagRendering from "./UI/Popup/EditableTagRendering"; -import TagRenderingQuestion from "./UI/Popup/TagRenderingQuestion"; +import {FeatureInfoBox} from "./UI/Popup/FeatureInfoBox"; +import SharedLayers from "./Customizations/SharedLayers"; -const tagRendering: TagRenderingConfigJson = { - question: {"en": "What is the name of?", nl: "Wat is de naam van?", fr: "C'est quoi le nom"}, - mappings: [ - { - if: "valves=A", - then: "A" - }, - { - if: "valves=B", - then: "B" - }, - { - if: "valves=C", - then: "C" - }, { - if: "valves:special=A", - then: "SPecial" - } - ], - render: "Valves: {valves}", - multiAnswer: true, - freeform: { - key: "valves", - type: "string", - addExtraTags: ["fixme=valves"] - } +const tags = { + mapillary: "wweALGY5g8_T8UjGkcWCfw", + wikimedia_commons: "File:Boekenkast Sint-Lodewijks.jpg" } +const src = new UIEventSource(tags); -const config = new TagRenderingConfig(tagRendering) +new FeatureInfoBox(src, SharedLayers.sharedLayers["ghost_bike"]).AttachTo('maindiv'); -const tags = new UIEventSource({id: "node/-1", "amenity": "bench", name: "pietervdvn"}) - - new TagRenderingQuestion(tags, config).AttachTo("maindiv") -// new EditableTagRendering(tags, config).AttachTo('maindiv') -Locale.CreateLanguagePicker(["nl", "en", "fr"]).AttachTo("extradiv") +//const subs = new SubstitutedTranslation(new Translation({"nl":"NL {image_carousel()} {image_upload()}"}), src) +//subs.AttachTo("maindiv") /*/