Small fixes, perf improvements, remove duplicate images of ghost bikes, add wall mount

This commit is contained in:
Pieter Vander Vennet 2020-11-15 01:16:35 +01:00
parent 9978879536
commit e74b4e3804
13 changed files with 57 additions and 26 deletions

View file

@ -153,10 +153,10 @@ export class InitUiElements {
* This is given to the div which renders fullscreen on mobile devices
*/
State.state.selectedElement.addCallback((feature) => {
if (feature?.feature?.properties === undefined) {
if (feature?.properties === undefined) {
return;
}
const data = feature.feature.properties;
const data = feature.properties;
// Which is the applicable set?
for (const layer of layoutToUse.layers) {
if (typeof layer === "string") {

View file

@ -322,14 +322,9 @@ export class FilteredLayer {
eventSource.addCallback(updateStyle);
function openPopup(e) {
updateStyle()
if (feature.geometry.type === "Point") {
State.state.selectedElement.setData({feature: feature});
return; // Points bind there own popups
return; // Points bind their own popups
}
const uiElement = self._showOnPopup(eventSource, feature);
L.popup({
autoPan: true,
@ -337,14 +332,17 @@ export class FilteredLayer {
.setLatLng(e.latlng)
.openOn(State.state.bm.map);
uiElement.Update();
State.state.selectedElement.setData({feature: feature});
if (e) {
L.DomEvent.stop(e); // Marks the event as consumed
}
}
layer.on("click", openPopup);
layer.on("click", (e) => {
updateStyle();
openPopup(e);
State.state.selectedElement.setData(feature);
});
}
});

View file

@ -82,7 +82,7 @@ export default class State {
/**
The latest element that was selected - used to generate the right UI at the right place
*/
public readonly selectedElement = new UIEventSource<{ feature: any }>(undefined);
public readonly selectedElement = new UIEventSource<any>(undefined);
public readonly zoom: UIEventSource<number>;
public readonly lat: UIEventSource<number>;

2
Svg.ts
View file

@ -34,7 +34,7 @@ export default class Svg {
public static bug_svg() { return new FixedUiElement(Svg.bug);}
public static bug_ui() { return new FixedUiElement(Svg.bug_img);}
public static camera_plus = " <svg xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" viewBox=\"0 -256 1950 1950\" version=\"1.1\" id=\"svg4\" sodipodi:docname=\"camera.svg\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"> <metadata id=\"metadata10\"> <rdf:RDF> <cc:Work rdf:about=\"\"> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /> </cc:Work> </rdf:RDF> </metadata> <defs id=\"defs8\" /> <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1680\" inkscape:window-height=\"1013\" id=\"namedview6\" showgrid=\"false\" inkscape:zoom=\"0.1711561\" inkscape:cx=\"1154.0868\" inkscape:cy=\"749.93142\" inkscape:window-x=\"0\" inkscape:window-y=\"0\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg4\" /> <path d=\"m 881.19,449.05 c 79.33333,0 147.1667,28.16667 203.5,84.5 56.3333,56.33333 84.5,124.16667 84.5,203.5 0,79.33333 -28.1667,147.16667 -84.5,203.5 -56.3333,56.3333 -124.16667,84.5 -203.5,84.5 -79.33333,0 -147.16667,-28.1667 -203.5,-84.5 -56.33333,-56.33333 -84.5,-124.16667 -84.5,-203.5 0,-79.33333 28.16667,-147.16667 84.5,-203.5 56.33333,-56.33333 124.16667,-84.5 203.5,-84.5 m 798,-316 c 70.6667,0 131,25 181,75 50,50 75,110.33333 75,181 v 896 c 0,70.6667 -25,131 -75,181 -50,50 -110.3333,75 -181,75 h -1408 c -70.66667,0 -131,-25 -181,-75 -50,-50 -75,-110.3333 -75,-181 v -896 c 0,-70.66667 25,-131 75,-181 50,-50 110.33333,-75 181,-75 h 130 l 51,-136 c 12.66667,-32.666667 35.83333,-60.833333 69.5,-84.5 33.66667,-23.66667 68.16667,-35.5 103.5,-35.5 h 512 c 35.3333,0 69.8333,11.83333 103.5,35.5 33.6667,23.666667 56.8333,51.833333 69.5,84.5 l 51,136 h 318 m -798,1052 c 123.3333,0 228.8333,-43.8333 316.5,-131.5 87.6667,-87.6667 131.5,-193.16667 131.5,-316.5 0,-123.33333 -43.8333,-228.83333 -131.5,-316.5 -87.6667,-87.66667 -193.1667,-131.5 -316.5,-131.5 -123.33333,0 -228.83333,43.83333 -316.5,131.5 -87.66667,87.66667 -131.5,193.16667 -131.5,316.5 0,123.33333 43.83333,228.8333 131.5,316.5 87.66667,87.6667 193.16667,131.5 316.5,131.5\" id=\"path2\" inkscape:connector-curvature=\"0\" sodipodi:nodetypes=\"csssssssccsssssssssssccssssccccsssssssc\" /> <g id=\"g854\" transform=\"translate(259.86064,302.45965)\"> <g id=\"g847\"> <circle style=\"fill:#7ebc6f;fill-opacity:1;stroke:none;stroke-width:21.93531036;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\" id=\"path819\" cx=\"1351.3682\" cy=\"1044.5065\" r=\"335.30353\" /> </g> <g id=\"g844\"> <path style=\"fill: none !important;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1154.7797,1044.3443 h 389.1358\" id=\"path821\" inkscape:connector-curvature=\"0\" /> <path style=\"fill: none !important;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" d=\"M 1349.9206,849.36269 V 1238.4985\" id=\"path821-3\" inkscape:connector-curvature=\"0\" /> </g> </g> </svg> "
public static camera_plus = " <svg xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\" xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\" viewBox=\"0 -256 1950 1950\" version=\"1.1\" id=\"svg4\" sodipodi:docname=\"camera.svg\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"> <metadata id=\"metadata10\"> <rdf:RDF> <cc:Work rdf:about=\"\"> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /> </cc:Work> </rdf:RDF> </metadata> <defs id=\"defs8\" /> <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1680\" inkscape:window-height=\"1013\" id=\"namedview6\" showgrid=\"false\" inkscape:zoom=\"0.1711561\" inkscape:cx=\"1154.0868\" inkscape:cy=\"749.93142\" inkscape:window-x=\"0\" inkscape:window-y=\"0\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg4\" /> <path d=\"m 881.19,449.05 c 79.33333,0 147.1667,28.16667 203.5,84.5 56.3333,56.33333 84.5,124.16667 84.5,203.5 0,79.33333 -28.1667,147.16667 -84.5,203.5 -56.3333,56.3333 -124.16667,84.5 -203.5,84.5 -79.33333,0 -147.16667,-28.1667 -203.5,-84.5 -56.33333,-56.33333 -84.5,-124.16667 -84.5,-203.5 0,-79.33333 28.16667,-147.16667 84.5,-203.5 56.33333,-56.33333 124.16667,-84.5 203.5,-84.5 m 798,-316 c 70.6667,0 131,25 181,75 50,50 75,110.33333 75,181 v 896 c 0,70.6667 -25,131 -75,181 -50,50 -110.3333,75 -181,75 h -1408 c -70.66667,0 -131,-25 -181,-75 -50,-50 -75,-110.3333 -75,-181 v -896 c 0,-70.66667 25,-131 75,-181 50,-50 110.33333,-75 181,-75 h 130 l 51,-136 c 12.66667,-32.666667 35.83333,-60.833333 69.5,-84.5 33.66667,-23.66667 68.16667,-35.5 103.5,-35.5 h 512 c 35.3333,0 69.8333,11.83333 103.5,35.5 33.6667,23.666667 56.8333,51.833333 69.5,84.5 l 51,136 h 318 m -798,1052 c 123.3333,0 228.8333,-43.8333 316.5,-131.5 87.6667,-87.6667 131.5,-193.16667 131.5,-316.5 0,-123.33333 -43.8333,-228.83333 -131.5,-316.5 -87.6667,-87.66667 -193.1667,-131.5 -316.5,-131.5 -123.33333,0 -228.83333,43.83333 -316.5,131.5 -87.66667,87.66667 -131.5,193.16667 -131.5,316.5 0,123.33333 43.83333,228.8333 131.5,316.5 87.66667,87.6667 193.16667,131.5 316.5,131.5\" id=\"path2\" inkscape:connector-curvature=\"0\" sodipodi:nodetypes=\"csssssssccsssssssssssccssssccccsssssssc\" /> <g id=\"g854\" transform=\"translate(259.86064,302.45965)\"> <g id=\"g847\"> <circle style=\"fill:#7ebc6f;fill-opacity:1;stroke:none;stroke-width:21.93531036;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\" id=\"path819\" cx=\"1351.3682\" cy=\"1044.5065\" r=\"335.30353\" /> </g> <g id=\"g844\"> <path style=\"fill: none !important;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" d=\"m 1154.7797,1044.3443 h 389.1358\" id=\"path821\" inkscape:connector-curvature=\"0\" /> <path style=\"fill: none !important;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\" d=\"M 1349.9206,849.36269 V 1238.4985\" id=\"path821-3\" inkscape:connector-curvature=\"0\" /> </g> </g> </svg> "
public static camera_plus_img = Img.AsImageElement(Svg.camera_plus)
public static camera_plus_svg() { return new FixedUiElement(Svg.camera_plus);}
public static camera_plus_ui() { return new FixedUiElement(Svg.camera_plus_img);}

View file

@ -13,9 +13,11 @@ export class FullScreenMessageBox extends UIElement {
private readonly returnToTheMap: UIElement;
constructor(onClear: (() => void)) {
super(State.state.fullScreenMessage);
super();
this.HideOnEmpty(true);
const self = this;
State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
self.Update();
if (uiElement === undefined) {
location.hash = "";
} else {
@ -28,14 +30,12 @@ export class FullScreenMessageBox extends UIElement {
window.onhashchange = function () {
if (location.hash === "") {
// No more element: back to the map!
console.log("Clearing full screen message");
State.state.fullScreenMessage.setData(undefined);
onClear();
}
}
}
const self = this;
this.returnToTheMap =
new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
.SetStyle("background:#7ebc6f;" +
@ -69,7 +69,6 @@ export class FullScreenMessageBox extends UIElement {
}
const el = document.getElementById(this.id);
console.warn(el, el.style.display);
const uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
"display:block;" +

View file

@ -115,7 +115,7 @@ export class ImageUploadFlow extends UIElement {
"cursor:pointer;" +
"padding: 0.5em;" +
"border-radius: 1em;" +
"border: 3px solid var(--popup-border);" +
"border: 3px solid var(--foreground-color);" +
"box-sizing:border-box;")
const actualInputElement =

View file

@ -40,7 +40,6 @@ export class FeatureInfoBox extends UIElement {
}
InnerRender(): string {
console.error("Inner rendering infobox for ", this._tags.data.id, this.id)
return new Combine([
new Combine([this._title, this._titleIcons])
.SetClass("featureinfobox-titlebar"),

View file

@ -9,6 +9,7 @@ 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) {
super(tags);
@ -31,7 +32,9 @@ export default class TagRenderingAnswer extends UIElement {
if (tr === undefined) {
return "";
}
return new SubstitutedTranslation(tr, this._tags).Render();
// Bit of a hack; remember that the fields are updated
this._content = new SubstitutedTranslation(tr, this._tags);
return this._content.Render();
}
}

View file

@ -116,7 +116,7 @@ export class SimpleAddUI extends UIElement {
const loc = State.state.bm.LastClickLocation.data;
let feature = State.state.changes.createElement(tags, loc.lat, loc.lon);
layerToAddTo.AddNewElement(feature);
State.state.selectedElement.setData({feature: feature});
State.state.selectedElement.setData(feature);
}
}

View file

@ -24,9 +24,10 @@ export class WelcomeMessage extends UIElement {
this.description = new Combine([
"<h3>", layout.title, "</h3>",
layout.description
])
layout.descriptionTail
this.plzLogIn =

View file

@ -43,8 +43,7 @@
}
],
"tagRenderings": [
"images",
{
{
"render": {
"en": "A <b>ghost bike</b> is a memorial for a cyclist who died in a traffic accident, in the form of a white bicycle placed permanently near the accident location.",
"nl": "Een Witte Fiets (of Spookfiets) is een aandenken aan een fietser die bij een verkeersongeval om het leven kwam. Het gaat over een witgeschilderde fiets die geplaatst werd in de buurt van het ongeval.",

View file

@ -65,12 +65,12 @@
<g
id="g844">
<path
style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 1154.7797,1044.3443 h 389.1358"
id="path821"
inkscape:connector-curvature="0" />
<path
style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 1349.9206,849.36269 V 1238.4985"
id="path821-3"
inkscape:connector-curvature="0" />

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -230,6 +230,38 @@
}
}
]
},
{
"question": {
"en": "How is this camera placed?",
"nl": "Hoe is deze camera geplaatst?"
},
"freeform": {
"key": "camera:mount"
},
"mappings": [
{
"if": "camera:mount=wall",
"then": {
"en": "This camera is placed against a wall",
"nl": "Deze camera hangt aan een muur"
}
},
{
"if": "camera:mount=pole",
"then": {
"en": "This camera is placed one a pole",
"nl": "Deze camera staat op een paal"
}
},
{
"if": "camera:mount=pole",
"then": {
"en": "This camera is placed one a pole",
"nl": "Deze camera staat op een paal"
}
}
]
}
],
"hideUnderlayingFeaturesMinPercentage": 0,