midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add various bug fixes and improvements

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

12
InitUiElements.ts
View file

@ -147,6 +147,8 @@ export class InitUiElements {
continue;
}
console.log("Creating the featureInfobox");
let start = new Date()
// This layer is the layer that gives the questions
const featureBox = new FeatureInfoBox(
State.state.allElements.getEventSourceById(data.id),
@ -158,6 +160,8 @@ export class InitUiElements {
hashText: feature.properties.id.replace("/", "_"),
titleText: featureBox.title
});
let end = new Date();
console.log("Creating featureInfoBox took", (end.getTime() - start.getTime()) , "ms")
break;
}
}
@ -290,11 +294,12 @@ export class InitUiElements {
const fullOptions2 = new FullWelcomePaneWithTabs();
if (Hash.hash.data === undefined) {
if (Hash.Current() === "") {
State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
}
// ?-Button on Mobile, opens full screen layer with close-button at the bottom
Svg.help_svg()
.SetClass("open-welcome-button block rounded-3xl overflow-hidden shadow ml-3")
@ -413,6 +418,11 @@ export class InitUiElements {
let features = featuresFreshness.map(ff => ff.feature);
features.forEach(feature => {
State.state.allElements.addElement(feature);
if(Hash.hash.data === feature.properties.id.replace("/","_")){
State.state.selectedElement.setData(feature);
}
})
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
*/
public readonly selectedElement = new UIEventSource<any>(undefined)
publ
public readonly featureSwitchUserbadge: UIEventSource<boolean>;
public readonly featureSwitchSearch: UIEventSource<boolean>;
@ -209,7 +210,7 @@ export default class State {
if (selected === undefined) {
h.setData("");
} 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);
return "";
}
return ui.Render();
let rendered = ui.Render();
if(ui.IsEmpty()){
return "";
}
return rendered;
}).join("");
}

2
UI/Base/Img.ts
View file

@ -12,7 +12,7 @@ export default class Img {
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)}">`;
}
}

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
*/
export default class ScrollableFullScreen extends UIElement {
private _component: Combine;
private _component: UIElement;
constructor(title: UIElement, content: UIElement) {
super();
const returnToTheMap = Svg.back_svg().onClick(() => {
const returnToTheMap = Svg.back_ui().onClick(() => {
State.state.fullScreenMessage.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")
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([
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])
.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
])
this.SetClass("block flex flex-col");
]).SetClass("block flex flex-col fixed max-h-screen sm:max-h-65vh sm:relative top-0 left-0 right-0");
}

2
UI/BigComponents/SearchAndGo.ts
View file

@ -22,7 +22,7 @@ export default class SearchAndGo extends UIElement {
);
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() {
super(undefined);

2
UI/BigComponents/UserBadge.ts
View file

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

3
UI/FullScreenMessageBoxHandler.ts
View file

@ -20,7 +20,8 @@ export default class FullScreenMessageBox extends UIElement {
return "";
}
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) {

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))
.SetClass("text-2xl break-words font-bold p-2");
.AddClass("text-2xl break-words font-bold p-2");
this.title = title;
const titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
.SetClass("h-8 w-8 pt-2 box-content");
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)
.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;
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) {
throw "Trying to generate a tagRenderingAnswer without configuration..."
}
this.AddClass("flex items-center flex-row text-lg")
}
InnerRender(): string {
@ -34,11 +35,6 @@ export default class TagRenderingAnswer extends UIElement {
if (tags === undefined) {
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
if (this._configuration.multiAnswer) {
@ -65,6 +61,14 @@ export default class TagRenderingAnswer extends UIElement {
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 "";
}

5
UI/ShowDataLayer.ts
View file

@ -69,7 +69,7 @@ export default class ShowDataLayer {
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
if(State.state.selectedElement !== undefined){
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>");
popup.setContent(uiElement.Render());
popup.on('remove', () => {
if(!popup.isOpen()){
return;
}
State.state.selectedElement.setData(undefined);
});
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.Update();
return this;

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

@ -73,68 +73,68 @@
{
"if": "bicycle_parking=stands",
"then": {
"en": "Staple racks <img width='150px' src='./assets/layers/bike_parking/staple.svg'>",
"nl": "Nietjes <img width='150px' src='./assets/layers/bike_parking/staple.svg'>",
"fr": "Arceaux <img width='150px' src='./assets/layers/bike_parking/staple.svg'>",
"gl": "De roda (Stands) <img width='150px' src='./assets/layers/bike_parking/staple.svg'>",
"de": "Fahrradbügel <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 style='width: 25%'' 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 style='width: 25%'' 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",
"then": {
"en": "Wheel rack/loops <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>",
"nl": "Wielrek/lussen <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>",
"fr": "Pinces-roues <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>",
"gl": "Aros <img width='150px' src='./assets/layers/bike_parking/wall_loops.svg'>",
"de": "Metallgestänge <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 style='width: 25%'' 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 style='width: 25%'' 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",
"then": {
"en": "Handlebar holder <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"nl": "Stuurhouder <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"fr": "Support guidon <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"gl": "Cadeado para guiador <img width='150px' src='./assets/layers/bike_parking/handlebar_holder.svg'>",
"de": "Halter für Fahrradlenker <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 style='width: 25%'' 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 style='width: 25%'' 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",
"then": {
"en": "Rack <img width='150px' src='./assets/layers/bike_parking/rack.svg'>",
"nl": "Rek <img width='150px' src='./assets/layers/bike_parking/rack.svg'>",
"fr": "Râtelier <img width='150px' src='./assets/layers/bike_parking/rack.svg'>",
"gl": "Cremalleira <img width='150px' src='./assets/layers/bike_parking/rack.svg'>",
"de": "Gestell <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 style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"fr": "Râtelier <img style='width: 25%'' src='./assets/layers/bike_parking/rack.svg'>",
"gl": "Cremalleira <img style='width: 25%'' 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",
"then": {
"en": "Two-tiered <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>",
"nl": "Dubbel (twee verdiepingen) <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>",
"fr": "Superposé <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>",
"gl": "Dobre cremalleira <img width='150px' src='./assets/layers/bike_parking/two_tier.svg'>",
"de": "Zweistufig <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 style='width: 25%'' 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 style='width: 25%'' 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",
"then": {
"en": "Shed <img width='150px' src='./assets/layers/bike_parking/shed.svg'>",
"nl": "Schuur <img width='150px' src='./assets/layers/bike_parking/shed.svg'>",
"fr": "Abri <img width='150px' src='./assets/layers/bike_parking/shed.svg'>",
"gl": "Abeiro <img width='150px' src='./assets/layers/bike_parking/shed.svg'>",
"de": "Schuppen <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 style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"fr": "Abri <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"gl": "Abeiro <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>",
"de": "Schuppen <img style='width: 25%'' src='./assets/layers/bike_parking/shed.svg'>"
}
},
{
"if": "bicycle_parking=bollard",
"then": {
"en": "Bollard <img width='150px' src='./assets/layers/bike_parking/bollard.svg'>",
"nl": "Paal met ring <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 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,
"widenFactor": 0.05,
"socialImage": "",
"customCss": "./assets/themes/surveillance_cameras/custom_theme.css",
"defaultBackgroundId": "Stadia.AlidadeSmoothDark",
"layers": [
"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) {
/* 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%;
min-width: 20em;
pointer-events: all;
border-radius: 999em;
}
#userbadge a {
@ -60,6 +61,7 @@
margin: 0;
opacity: 0;
transition: opacity 500ms linear;
border-radius: 999em;
}
.usertext {

53
index.css
View file

@ -7,6 +7,10 @@
.max-h-65vh {
max-height: 65vh;
}
.max-h-20vh {
max-height: 20vh;
}
}
}
@ -40,12 +44,18 @@ html, body {
svg, img {
box-sizing: content-box;
width: 100%;
height: 100%;
}
a {
color: var(--foreground-color)
}
#topleft-tools svg {
fill: var(--foreground-color) !important;
stroke: var(--foreground-color) !important;
@ -280,16 +290,6 @@ a {
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 {
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 {
padding-top: 1em;
padding-bottom: 1em;