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 {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,
)

View file

@ -8,7 +8,7 @@ import DeleteImage from "./DeleteImage";
export class ImageCarousel extends UIElement{
public readonly slideshow: SlideShow;
public readonly slideshow: UIElement;
constructor(tags: UIEventSource<any>, 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 {

View file

@ -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("<div class='prev-button'>" +
"<div class='vspan'></div>" +
@ -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 += " <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n";
}
return "<div class='image-slideshow'>"
+ this._prev.Render()
+ "<div class='slides'>" + slides + "</div>"
+ this._next.Render()
+ "</div>";
return new Combine(["<div class='image-slideshow'>"
, this._prev
, "<div class='slides'>", slides, "</div>"
, this._next
, "</div>"]).Render();
}
public MoveTo(index: number) {

View file

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

View file

@ -9,25 +9,37 @@ import {SubstitutedTranslation} from "../SpecialVisualizations";
export default class TagRenderingAnswer extends UIElement {
private _tags: UIEventSource<any>;
private _configuration: TagRenderingConfig;
private _content: UIElement;
constructor(tags: UIEventSource<any>,
configuration: TagRenderingConfig) {
constructor(tags: UIEventSource<any>, 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();
}
}

View file

@ -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]
}
}
}

46
test.ts
View file

@ -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")
/*/