Last fixes

This commit is contained in:
Pieter Vander Vennet 2020-07-06 13:47:22 +02:00
parent d1f8080c24
commit 6b39995709
3 changed files with 52 additions and 25 deletions

View file

@ -66,6 +66,12 @@ export class GrbToFix extends LayerDefinition {
return newTags; return newTags;
}, },
freeform: {
key: "addr:housenumber",
template: "Het huisnummer is $$$",
renderTemplate: "Het huisnummer is <b>{addr:housenumber}</b>, GRB denkt <i>{grb:housenumber:human}</i>",
extraTags: new Tag("fixme", "")
},
mappings: [ mappings: [
{ {
k: new And([new Tag("addr:housenumber", "{grb:housenumber}"), new Tag("fixme", "")]), k: new And([new Tag("addr:housenumber", "{grb:housenumber}"), new Tag("fixme", "")]),

View file

@ -1,5 +1,6 @@
import {UIElement} from "./UIElement"; import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource"; import {UIEventSource} from "./UIEventSource";
import {FixedUiElement} from "./Base/FixedUiElement";
export class SlideShow extends UIElement { export class SlideShow extends UIElement {
@ -7,6 +8,8 @@ export class SlideShow extends UIElement {
private readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0); private readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
private readonly _noimages: UIElement; private readonly _noimages: UIElement;
private _prev: FixedUiElement;
private _next: FixedUiElement;
constructor( constructor(
embeddedElements: UIEventSource<UIElement[]>, embeddedElements: UIEventSource<UIElement[]>,
@ -15,6 +18,25 @@ export class SlideShow extends UIElement {
this._embeddedElements = embeddedElements; this._embeddedElements = embeddedElements;
this.ListenTo(this._currentSlide); this.ListenTo(this._currentSlide);
this._noimages = noImages; this._noimages = noImages;
const self = this;
this._prev = new FixedUiElement("<div class='prev-button'>" +
"<div class='vspan'></div>" +
"<img src='assets/arrow-left-smooth.svg' alt='Prev'/>" +
"</div>")
.onClick(() => {
const current = self._currentSlide.data;
self.MoveTo(current - 1);
});
this._next = new FixedUiElement("<div class='next-button'>" +
"<div class='vspan'></div>" +
"<img src='assets/arrow-right-smooth.svg' alt='Next'/>" +
"</div>")
.onClick(() => {
const current = self._currentSlide.data;
self.MoveTo(current + 1);
});
} }
protected InnerRender(): string { protected InnerRender(): string {
@ -28,8 +50,6 @@ export class SlideShow extends UIElement {
"</div></div></div>"; "</div></div></div>";
} }
const prevBtn = "<div class='prev-button' id='prevbtn-"+this.id+"'></div>"
const nextBtn = "<div class='next-button' id='nextbtn-"+this.id+"'></div>"
let slides = "" let slides = ""
for (let i = 0; i < this._embeddedElements.data.length; i++) { for (let i = 0; i < this._embeddedElements.data.length; i++) {
@ -41,9 +61,9 @@ 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 "<div class='image-slideshow'>"
+ prevBtn + this._prev.Render()
+ "<div class='slides'>" + slides + "</div>" + "<div class='slides'>" + slides + "</div>"
+ nextBtn + this._next.Render()
+ "</div>"; + "</div>";
} }
@ -56,22 +76,8 @@ export class SlideShow extends UIElement {
} }
InnerUpdate(htmlElement) { InnerUpdate(htmlElement) {
const nextButton = document.getElementById("nextbtn-" + this.id); this._next.Update();
if (nextButton === undefined || nextButton === null) { this._prev.Update();
return;
}
const prevButton = document.getElementById("prevbtn-" + this.id);
const self = this;
nextButton.onclick = () => {
const current = self._currentSlide.data;
self.MoveTo(current + 1);
}
prevButton.onclick = () => {
const current = self._currentSlide.data;
self.MoveTo(current - 1);
}
} }
Activate() { Activate() {

View file

@ -407,7 +407,7 @@ body {
.prev-button { .prev-button {
background-color: black; background-color: black;
opacity: 0.3; opacity: 0.3;
width: 3.0em; width: 4.0em;
height: 100%; height: 100%;
padding-left: 0.5em; padding-left: 0.5em;
@ -419,8 +419,6 @@ body {
z-index: 5060; z-index: 5060;
content:url(assets/arrow-left-smooth.svg);
border-radius: 1em; border-radius: 1em;
} }
@ -428,7 +426,7 @@ body {
.next-button { .next-button {
background-color: black; background-color: black;
opacity: 0.3; opacity: 0.3;
width: 3.0em; width: 4.0em;
height: 100%; height: 100%;
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
@ -441,9 +439,26 @@ body {
z-index: 5060; z-index: 5060;
content:url(assets/arrow-right-smooth.svg);
} }
.vspan {
height: calc(50% - 3em);
}
.prev-button img {
margin-left: -1em;
width: 6em;
text-align: center;
}
.next-button img {
margin-left: -1em;
width: 6em;
text-align: center;
}
.slide > span img { .slide > span img {
height: auto; height: auto;