Fix image carousel bug
This commit is contained in:
parent
c226e15d99
commit
a19f3e61f9
7 changed files with 43 additions and 58 deletions
|
@ -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,
|
||||||
)
|
)
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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
46
test.ts
|
@ -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")
|
|
||||||
/*/
|
/*/
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue