contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add various bug fixes and improvements

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-21 23:39:31 +01:00
parent 15a9441b1d
commit 6c4b15e33d
18 changed files with 99 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

16
InitUiElements.ts
View file

@ -147,6 +147,8 @@ export class InitUiElements {
continue; continue;
} }
console.log("Creating the featureInfobox");
let start = new Date()
// 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(
State.state.allElements.getEventSourceById(data.id), State.state.allElements.getEventSourceById(data.id),
@ -158,6 +160,8 @@ export class InitUiElements {
hashText: feature.properties.id.replace("/", "_"), hashText: feature.properties.id.replace("/", "_"),
titleText: featureBox.title titleText: featureBox.title
}); });
let end = new Date();
console.log("Creating featureInfoBox took", (end.getTime() - start.getTime()) , "ms")
break; break;
} }
} }
@ -290,14 +294,15 @@ export class InitUiElements {
const fullOptions2 = new FullWelcomePaneWithTabs(); const fullOptions2 = new FullWelcomePaneWithTabs();
if (Hash.hash.data === undefined) { if (Hash.Current() === "") {
State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"}) State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
} }
// ?-Button on Mobile, opens full screen layer with close-button at the bottom // ?-Button on Mobile, opens full screen layer with close-button at the bottom
Svg.help_svg() Svg.help_svg()
.SetClass("open-welcome-button block rounded-3xl overflow-hidden shadow ml-3" ) .SetClass("open-welcome-button block rounded-3xl overflow-hidden shadow ml-3")
.onClick(() => { .onClick(() => {
State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"}) State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
}).AttachTo("help-button-mobile"); }).AttachTo("help-button-mobile");
@ -407,12 +412,17 @@ export class InitUiElements {
source.features.addCallbackAndRun((featuresFreshness: { feature: any, freshness: Date }[]) => { source.features.addCallbackAndRun((featuresFreshness: { feature: any, freshness: Date }[]) => {
if(featuresFreshness === undefined){ if (featuresFreshness === undefined) {
return; return;
} }
let features = featuresFreshness.map(ff => ff.feature); let features = featuresFreshness.map(ff => ff.feature);
features.forEach(feature => { features.forEach(feature => {
State.state.allElements.addElement(feature); State.state.allElements.addElement(feature);
if(Hash.hash.data === feature.properties.id.replace("/","_")){
State.state.selectedElement.setData(feature);
}
}) })
MetaTagging.addMetatags(features); MetaTagging.addMetatags(features);
}) })

3
State.ts
View file

@ -81,6 +81,7 @@ export default class State {
The latest element that was selected - used to generate the right UI at the right place The latest element that was selected - used to generate the right UI at the right place
*/ */
public readonly selectedElement = new UIEventSource<any>(undefined) public readonly selectedElement = new UIEventSource<any>(undefined)
publ
public readonly featureSwitchUserbadge: UIEventSource<boolean>; public readonly featureSwitchUserbadge: UIEventSource<boolean>;
public readonly featureSwitchSearch: UIEventSource<boolean>; public readonly featureSwitchSearch: UIEventSource<boolean>;
@ -209,7 +210,7 @@ export default class State {
if (selected === undefined) { if (selected === undefined) {
h.setData(""); h.setData("");
} else { } else {
h.setData(selected.id) h.setData(selected.id.replace("/","_"))
} }
} }
) )

6
UI/Base/Combine.ts
View file

@ -25,7 +25,11 @@ export default class Combine extends UIElement {
console.error("Not a UI-element", ui); console.error("Not a UI-element", ui);
return ""; return "";
} }
return ui.Render(); let rendered = ui.Render();
if(ui.IsEmpty()){
return "";
}
return rendered;
}).join(""); }).join("");
} }

2
UI/Base/Img.ts
View file

@ -12,7 +12,7 @@ export default class Img {
return `data:image/svg+xml;base64,${(btoa(source))}`; return `data:image/svg+xml;base64,${(btoa(source))}`;
} }
static AsImageElement(source: string, css_class: string): string{ static AsImageElement(source: string, css_class: string = ""): string{
return `<img class="${css_class}" alt="" src="${Img.AsData(source)}">`; return `<img class="${css_class}" alt="" src="${Img.AsData(source)}">`;
} }
} }

18
UI/Base/ScrollableFullScreen.ts
View file

@ -8,25 +8,27 @@ import Ornament from "./Ornament";
* Wraps some contents into a panel that scrolls the content _under_ the title * Wraps some contents into a panel that scrolls the content _under_ the title
*/ */
export default class ScrollableFullScreen extends UIElement { export default class ScrollableFullScreen extends UIElement {
private _component: Combine; private _component: UIElement;
constructor(title: UIElement, content: UIElement) { constructor(title: UIElement, content: UIElement) {
super(); super();
const returnToTheMap = Svg.back_svg().onClick(() => { const returnToTheMap = Svg.back_ui().onClick(() => {
State.state.fullScreenMessage.setData(undefined); State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined); State.state.selectedElement.setData(undefined);
}).SetClass("featureinfobox-back-to-the-map only-on-mobile mb-2") }).SetClass("block sm:hidden mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
title.SetClass("block w-full") title.SetClass("block w-full")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("sm:hidden")
this._component = new Combine([ this._component = new Combine([
new Combine([returnToTheMap, title]).SetClass("border-b-2 border-black shadow sm:shadow-none fixed sm:relative top-0 left-0 right-0 z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-hidden"), new Combine([returnToTheMap, title])
.AddClass("border-b-2 border-black shadow sm:shadow-none z-50 bg-white p-2 pb-0 sm:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
new Combine(["<span>", content, "</span>", ornament]) new Combine(["<span>", content, "</span>", ornament])
.SetClass("block relative pt-16 sm:pt-4 w-full max-h-screen sm:max-h-65vh landscape:max-h-screen overflow-y-auto overflow-x-hidden"), .SetClass("block p-2 sm:pt-4 w-full max-h-screen landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
// We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
]) ]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
this.SetClass("block flex flex-col");
} }

2
UI/BigComponents/SearchAndGo.ts
View file

@ -22,7 +22,7 @@ export default class SearchAndGo extends UIElement {
); );
private _foundEntries = new UIEventSource([]); private _foundEntries = new UIEventSource([]);
private _goButton = Svg.search_ui().SetClass('search-go'); private _goButton = Svg.search_ui().AddClass('w-8 h-8 full-rounded border-black float-right');
constructor() { constructor() {
super(undefined); super(undefined);

2
UI/BigComponents/UserBadge.ts
View file

@ -50,7 +50,7 @@ export default class UserBadge extends UIElement {
this._homeButton = new VariableUiElement( this._homeButton = new VariableUiElement(
this._userDetails.map((userinfo) => { this._userDetails.map((userinfo) => {
if (userinfo.home) { if (userinfo.home) {
return Svg.home; return Svg.home_svg().Render();
} }
return ""; return "";
}) })

3
UI/FullScreenMessageBoxHandler.ts
View file

@ -20,7 +20,8 @@ export default class FullScreenMessageBox extends UIElement {
return ""; return "";
} }
this._content = State.state.fullScreenMessage.data.content; this._content = State.state.fullScreenMessage.data.content;
return new Combine([this._content]).SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-2").Render(); return new Combine([this._content])
.SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-0").Render();
} }
protected InnerUpdate(htmlElement: HTMLElement) { protected InnerUpdate(htmlElement: HTMLElement) {

7
UI/Popup/FeatureInfoBox.ts
View file

@ -25,11 +25,12 @@ export default class FeatureInfoBox extends UIElement {
const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined)) const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
.SetClass("text-2xl break-words font-bold p-2"); .AddClass("text-2xl break-words font-bold p-2");
this.title = title; this.title = title;
const titleIcons = new Combine( const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon))) layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)
.SetClass("h-8 w-8 pt-2 box-content"); .AddClass("block w-8 h-8 align-baseline box-content p-0.5")))
.AddClass("flex flex-row flex-wrap pt-1 items-center mr-2");
let questionBox: UIElement = undefined; let questionBox: UIElement = undefined;
if (State.state.featureSwitchUserbadge.data) { if (State.state.featureSwitchUserbadge.data) {

14
UI/Popup/TagRenderingAnswer.ts
View file

@ -21,6 +21,7 @@ export default class TagRenderingAnswer extends UIElement {
if (configuration === undefined) { if (configuration === undefined) {
throw "Trying to generate a tagRenderingAnswer without configuration..." throw "Trying to generate a tagRenderingAnswer without configuration..."
} }
this.AddClass("flex items-center flex-row text-lg")
} }
InnerRender(): string { InnerRender(): string {
@ -34,11 +35,6 @@ export default class TagRenderingAnswer extends UIElement {
if (tags === undefined) { if (tags === undefined) {
return ""; return "";
} }
const tr = this._configuration.GetRenderValue(tags);
if (tr !== undefined) {
this._content = new SubstitutedTranslation(tr, this._tags);
return this._content.Render();
}
// The render value doesn't work well with multi-answers (checkboxes), so we have to check for them manually // The render value doesn't work well with multi-answers (checkboxes), so we have to check for them manually
if (this._configuration.multiAnswer) { if (this._configuration.multiAnswer) {
@ -65,6 +61,14 @@ export default class TagRenderingAnswer extends UIElement {
return this._content.Render(); return this._content.Render();
} }
} }
const tr = this._configuration.GetRenderValue(tags);
if (tr !== undefined) {
this._content = new SubstitutedTranslation(tr, this._tags);
return this._content.Render();
}
return ""; return "";
} }

5
UI/ShowDataLayer.ts
View file

@ -69,7 +69,7 @@ export default class ShowDataLayer {
action(); action();
} }
}); });
Hash.hash.addCallback(id => { Hash.hash.addCallbackAndRun(id => {
// This is a bit of an edge case: if the hash becomes an id to search, we have to show the corresponding popup // This is a bit of an edge case: if the hash becomes an id to search, we have to show the corresponding popup
if(State.state.selectedElement !== undefined){ if(State.state.selectedElement !== undefined){
return; // Something is already selected, we don't have to apply this fix return; // Something is already selected, we don't have to apply this fix
@ -130,6 +130,9 @@ export default class ShowDataLayer {
"<div style='height: 90vh'>Rendering</div>"); "<div style='height: 90vh'>Rendering</div>");
popup.setContent(uiElement.Render()); popup.setContent(uiElement.Render());
popup.on('remove', () => { popup.on('remove', () => {
if(!popup.isOpen()){
return;
}
State.state.selectedElement.setData(undefined); State.state.selectedElement.setData(undefined);
}); });
leafletLayer.bindPopup(popup); leafletLayer.bindPopup(popup);

2
UI/UIElement.ts
View file

@ -109,7 +109,7 @@ export abstract class UIElement extends UIEventSource<string> {
} }
HideOnEmpty(hide: boolean) { HideOnEmpty(hide: boolean): UIElement {
this._hideIfEmpty = hide; this._hideIfEmpty = hide;
this.Update(); this.Update();
return this; return this;

64
assets/layers/bike_parking/bike_parking.json
View file

@ -73,68 +73,68 @@
{ {
"if": "bicycle_parking=stands", "if": "bicycle_parking=stands",
"then": { "then": {
"en": "Staple racks <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "en": "Staple racks <img style='width: 25%' src='./assets/layers/bike_parking/staple.svg'>",
"nl": "Nietjes <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "nl": "Nietjes <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>",
"fr": "Arceaux <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "fr": "Arceaux <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>",
"gl": "De roda (Stands) <img width='150px' src='./assets/layers/bike_parking/staple.svg'>", "gl": "De roda (Stands) <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>",
"de": "Fahrradbügel <img width='150px' src='./assets/layers/bike_parking/staple.svg'>" "de": "Fahrradbügel <img style='width: 25%'' src='./assets/layers/bike_parking/staple.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=wall_loops", "if": "bicycle_parking=wall_loops",
"then": { "then": {
"en": "Wheel rack/loops <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "en": "Wheel rack/loops <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"nl": "Wielrek/lussen <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "nl": "Wielrek/lussen <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"fr": "Pinces-roues <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "fr": "Pinces-roues <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"gl": "Aros <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>", "gl": "Aros <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>",
"de": "Metallgestänge <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>" "de": "Metallgestänge <img style='width: 25%'' src='./assets/layers/bike_parking/wall_loops.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=handlebar_holder", "if": "bicycle_parking=handlebar_holder",
"then": { "then": {
"en": "Handlebar holder <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "en": "Handlebar holder <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"nl": "Stuurhouder <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "nl": "Stuurhouder <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"fr": "Support guidon <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "fr": "Support guidon <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"gl": "Cadeado para guiador <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>", "gl": "Cadeado para guiador <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"de": "Halter für Fahrradlenker <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>" "de": "Halter für Fahrradlenker <img style='width: 25%'' src='./assets/layers/bike_parking/handlebar_holder.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=rack", "if": "bicycle_parking=rack",
"then": { "then": {
"en": "Rack <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "en": "Rack <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"nl": "Rek <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "nl": "Rek <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"fr": "Râtelier <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "fr": "Râtelier <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"gl": "Cremalleira <img width='150px' src='./assets/layers/bike_parking/rack.svg'>", "gl": "Cremalleira <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"de": "Gestell <img width='150px' src='./assets/layers/bike_parking/rack.svg'>" "de": "Gestell <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=two_tier", "if": "bicycle_parking=two_tier",
"then": { "then": {
"en": "Two-tiered <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "en": "Two-tiered <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"nl": "Dubbel (twee verdiepingen) <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "nl": "Dubbel (twee verdiepingen) <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"fr": "Superposé <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "fr": "Superposé <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"gl": "Dobre cremalleira <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>", "gl": "Dobre cremalleira <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>",
"de": "Zweistufig <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>" "de": "Zweistufig <img style='width: 25%'' src='./assets/layers/bike_parking/two_tier.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=shed", "if": "bicycle_parking=shed",
"then": { "then": {
"en": "Shed <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "en": "Shed <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"nl": "Schuur <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "nl": "Schuur <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"fr": "Abri <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "fr": "Abri <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"gl": "Abeiro <img width='150px' src='./assets/layers/bike_parking/shed.svg'>", "gl": "Abeiro <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"de": "Schuppen <img width='150px' src='./assets/layers/bike_parking/shed.svg'>" "de": "Schuppen <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>"
} }
}, },
{ {
"if": "bicycle_parking=bollard", "if": "bicycle_parking=bollard",
"then": { "then": {
"en": "Bollard <img width='150px' src='./assets/layers/bike_parking/bollard.svg'>", "en": "Bollard <img style='width: 25%'' src='./assets/layers/bike_parking/bollard.svg'>",
"nl": "Paal met ring <img width='150px' src='./assets/layers/bike_parking/bollard.svg'>" "nl": "Paal met ring <img style='width: 25%'' src='./assets/layers/bike_parking/bollard.svg'>"
} }
}, },
{ {

1
assets/themes/surveillance_cameras/surveillance_cameras.json
View file

@ -24,7 +24,6 @@
"startZoom": 1, "startZoom": 1,
"widenFactor": 0.05, "widenFactor": 0.05,
"socialImage": "", "socialImage": "",
"customCss": "./assets/themes/surveillance_cameras/custom_theme.css",
"defaultBackgroundId": "Stadia.AlidadeSmoothDark", "defaultBackgroundId": "Stadia.AlidadeSmoothDark",
"layers": [ "layers": [
"direction", "direction",

18
css/tagrendering.css
View file

@ -1,24 +1,6 @@
.featureinfobox-back-to-the-map {
padding: 0.5em;
border-radius: 999em;
margin-right: 0.4em;
width: min-content;
height: min-content;
background: var(--subtle-detail-color);
flex-shrink: 0;
}
.featureinfobox-back-to-the-map svg {
width: 1.75em;
height: 1.75em;
margin-left: 0.15em;
margin-top: 0.15em
}
.featureinfobox-back-to-the-map svg path{
stroke: var(--subtle-detail-color-contrast) !important;
}
@media only screen and (max-height: 600px) and (min-width: 600px) { @media only screen and (max-height: 600px) and (min-width: 600px) {
/* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/ /* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/

2
css/userbadge.css
View file

@ -7,6 +7,7 @@
width: 100%; width: 100%;
min-width: 20em; min-width: 20em;
pointer-events: all; pointer-events: all;
border-radius: 999em;
} }
#userbadge a { #userbadge a {
@ -60,6 +61,7 @@
margin: 0; margin: 0;
opacity: 0; opacity: 0;
transition: opacity 500ms linear; transition: opacity 500ms linear;
border-radius: 999em;
} }
.usertext { .usertext {

53
index.css
View file

@ -7,6 +7,10 @@
.max-h-65vh { .max-h-65vh {
max-height: 65vh; max-height: 65vh;
} }
.max-h-20vh {
max-height: 20vh;
}
} }
} }
@ -40,12 +44,18 @@ html, body {
svg, img { svg, img {
box-sizing: content-box; box-sizing: content-box;
width: 100%;
height: 100%;
} }
a { a {
color: var(--foreground-color) color: var(--foreground-color)
} }
#topleft-tools svg { #topleft-tools svg {
fill: var(--foreground-color) !important; fill: var(--foreground-color) !important;
stroke: var(--foreground-color) !important; stroke: var(--foreground-color) !important;
@ -280,16 +290,6 @@ a {
color: var(--foreground-color); color: var(--foreground-color);
} }
.search-go img {
position: relative;
float: right;
height: 1.2em;
border: 2px solid black;
padding: 0.4em;
margin-left: 0.5em;
margin-right: 0;
}
.add-popup-all-buttons { .add-popup-all-buttons {
max-height: 50vh; max-height: 50vh;
@ -481,39 +481,6 @@ a {
} }
.share-button {
background-color: var(--subtle-detail-color);
border: none;
color: var(--subtle-detail-color-contrast);
text-decoration: none;
display: inline-block;
border-radius: 3em;
height: 2.5em;
width: 2.5em;
box-sizing: border-box;
padding: 0;
}
.share-button svg {
height: 1.5em;
width: 1.5em;
padding: 0.5em;
padding-left: 0.4em;
fill: var(--subtle-detail-color-contrast) !important;
stroke: var(--subtle-detail-color-contrast) !important;
}
.share-button svg path {
fill: var(--subtle-detail-color-contrast) !important;
stroke: var(--subtle-detail-color-contrast) !important;
}
.share-button svg circle {
fill: var(--subtle-detail-color-contrast) !important;
stroke: var(--subtle-detail-color-contrast) !important;
}
.ornament { .ornament {
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em; padding-bottom: 1em;