Fix image carousel bug

This commit is contained in:
Pieter Vander Vennet 2020-11-02 18:59:21 +01:00
parent c226e15d99
commit a19f3e61f9
7 changed files with 43 additions and 58 deletions

View file

@ -30,7 +30,6 @@ import {FullScreenMessageBox} from "./UI/FullScreenMessageBoxHandler";
import {GeoLocationHandler} from "./Logic/Leaflet/GeoLocationHandler"; import {GeoLocationHandler} from "./Logic/Leaflet/GeoLocationHandler";
import {Layout} from "./Customizations/Layout"; import {Layout} from "./Customizations/Layout";
import {LocalStorageSource} from "./Logic/Web/LocalStorageSource"; import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
import {FromJSON} from "./Customizations/JSON/FromJSON";
import {Utils} from "./Utils"; import {Utils} from "./Utils";
import BackgroundSelector from "./UI/BackgroundSelector"; import BackgroundSelector from "./UI/BackgroundSelector";
import AvailableBaseLayers from "./Logic/AvailableBaseLayers"; import AvailableBaseLayers from "./Logic/AvailableBaseLayers";
@ -166,7 +165,6 @@ export class InitUiElements {
// This layer is the layer that gives the questions // This layer is the layer that gives the questions
const featureBox = new FeatureInfoBox( const featureBox = new FeatureInfoBox(
feature.feature,
State.state.allElements.getElement(data.id), State.state.allElements.getElement(data.id),
layer layer
); );
@ -477,7 +475,6 @@ export class InitUiElements {
const generateInfo = (tagsES, feature) => { const generateInfo = (tagsES, feature) => {
return new FeatureInfoBox( return new FeatureInfoBox(
feature,
tagsES, tagsES,
layer, layer,
) )

View file

@ -8,7 +8,7 @@ import DeleteImage from "./DeleteImage";
export class ImageCarousel extends UIElement{ export class ImageCarousel extends UIElement{
public readonly slideshow: SlideShow; public readonly slideshow: UIElement;
constructor(tags: UIEventSource<any>, imagePrefix: string = "image", loadSpecial: boolean =true) { constructor(tags: UIEventSource<any>, imagePrefix: string = "image", loadSpecial: boolean =true) {
super(tags); super(tags);

View file

@ -1,6 +1,7 @@
import {UIEventSource} from "../../Logic/UIEventSource"; import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement"; import {UIElement} from "../UIElement";
import {FixedUiElement} from "../Base/FixedUiElement"; import {FixedUiElement} from "../Base/FixedUiElement";
import Combine from "../Base/Combine";
export class SlideShow extends UIElement { export class SlideShow extends UIElement {
@ -22,6 +23,7 @@ export class SlideShow extends UIElement {
this._currentSlide.setData(this._embeddedElements.data.length - 1); this._currentSlide.setData(this._embeddedElements.data.length - 1);
}); });
this.dumbMode = false;
const self = this; const self = this;
this._prev = new FixedUiElement("<div class='prev-button'>" + this._prev = new FixedUiElement("<div class='prev-button'>" +
"<div class='vspan'></div>" + "<div class='vspan'></div>" +
@ -43,6 +45,7 @@ export class SlideShow extends UIElement {
} }
InnerRender(): string { InnerRender(): string {
console.log("Inner rendering")
if (this._embeddedElements.data.length == 0) { if (this._embeddedElements.data.length == 0) {
return ""; return "";
} }
@ -63,11 +66,11 @@ export class SlideShow extends UIElement {
} }
slides += " <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n"; slides += " <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n";
} }
return "<div class='image-slideshow'>" return new Combine(["<div class='image-slideshow'>"
+ this._prev.Render() , this._prev
+ "<div class='slides'>" + slides + "</div>" , "<div class='slides'>", slides, "</div>"
+ this._next.Render() , this._next
+ "</div>"; , "</div>"]).Render();
} }
public MoveTo(index: number) { public MoveTo(index: number) {

View file

@ -16,11 +16,13 @@ export class FeatureInfoBox extends UIElement {
private _questionBox : UIElement; private _questionBox : UIElement;
constructor( constructor(
feature: any,
tags: UIEventSource<any>, tags: UIEventSource<any>,
layerConfig: LayerConfig layerConfig: LayerConfig
) { ) {
super(); super();
if(layerConfig === undefined){
throw "Undefined layerconfig"
}
this._tags = tags; this._tags = tags;
this._layerConfig = layerConfig; this._layerConfig = layerConfig;

View file

@ -9,12 +9,25 @@ import {SubstitutedTranslation} from "../SpecialVisualizations";
export default class TagRenderingAnswer extends UIElement { export default class TagRenderingAnswer extends UIElement {
private _tags: UIEventSource<any>; private _tags: UIEventSource<any>;
private _configuration: TagRenderingConfig; private _configuration: TagRenderingConfig;
private _content: UIElement;
constructor(tags: UIEventSource<any>, constructor(tags: UIEventSource<any>, configuration: TagRenderingConfig) {
configuration: TagRenderingConfig) {
super(tags); super(tags);
this._tags = tags; this._tags = tags;
this._configuration = configuration; 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 { InnerRender(): string {
@ -23,11 +36,10 @@ export default class TagRenderingAnswer extends UIElement {
return ""; return "";
} }
} }
const tr = this._configuration.GetRenderValue(this._tags.data); if(this._content === undefined){
if(tr === undefined){
return ""; return "";
} }
return new SubstitutedTranslation(tr, this._tags).Render(); return this._content.Render();
} }
} }

View file

@ -22,7 +22,6 @@ export class SubstitutedTranslation extends UIElement {
this.translation = translation; this.translation = translation;
this.tags = tags; this.tags = tags;
const self = this; const self = this;
this.dumbMode = false;
Locale.language.addCallbackAndRun(() => { Locale.language.addCallbackAndRun(() => {
self.content = self.CreateContent(); self.content = self.CreateContent();
self.Update(); self.Update();
@ -78,7 +77,7 @@ export class SubstitutedTranslation extends UIElement {
return [...partBefore, element, ...partAfter] return [...partBefore, element, ...partAfter]
} catch (e) { } catch (e) {
console.error(e); console.error(e);
return [...partBefore, ...partAfter] return [...partBefore,new FixedUiElement(`Failed loading ${knownSpecial.funcName}(${matched[2]}): ${e}`) , ...partAfter]
} }
} }
} }

46
test.ts
View file

@ -2,47 +2,19 @@
import {UIEventSource} from "./Logic/UIEventSource"; import {UIEventSource} from "./Logic/UIEventSource";
import {TagRenderingConfigJson} from "./Customizations/JSON/TagRenderingConfigJson"; import {FeatureInfoBox} from "./UI/Popup/FeatureInfoBox";
import TagRenderingConfig from "./Customizations/JSON/TagRenderingConfig"; import SharedLayers from "./Customizations/SharedLayers";
import Locale from "./UI/i18n/Locale";
import EditableTagRendering from "./UI/Popup/EditableTagRendering";
import TagRenderingQuestion from "./UI/Popup/TagRenderingQuestion";
const tagRendering: TagRenderingConfigJson = { const tags = {
question: {"en": "What is the name of?", nl: "Wat is de naam van?", fr: "C'est quoi le nom"}, mapillary: "wweALGY5g8_T8UjGkcWCfw",
mappings: [ wikimedia_commons: "File:Boekenkast Sint-Lodewijks.jpg"
{
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 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"}) //const subs = new SubstitutedTranslation(new Translation({"nl":"NL {image_carousel()} {image_upload()}"}), src)
//subs.AttachTo("maindiv")
new TagRenderingQuestion(tags, config).AttachTo("maindiv")
// new EditableTagRendering(tags, config).AttachTo('maindiv')
Locale.CreateLanguagePicker(["nl", "en", "fr"]).AttachTo("extradiv")
/*/ /*/