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

Tweaks to popup closing behaviour

Browse source
This commit is contained in:
pietervdvn 2021-01-04 23:36:02 +01:00
parent baf41cb79d
commit 5523603e70
3 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
InitUiElements.ts
View file

@ -278,8 +278,10 @@ export class InitUiElements {
checkbox.isEnabled.setData(false);
})
State.state.selectedElement.addCallback(() => {
checkbox.isEnabled.setData(false);
State.state.selectedElement.addCallback(selected => {
if(selected !== undefined){
checkbox.isEnabled.setData(false);
}
})
@ -367,11 +369,6 @@ export class InitUiElements {
attr
);
State.state.leafletMap.setData(bm.map);
bm.map.on("popupclose", () => {
State.state.selectedElement.setData(undefined)
})
}
private static InitLayers() {

6
State.ts
View file

@ -75,12 +75,14 @@ export default class State {
/**
This message is shown full screen on mobile devices
*/
public readonly fullScreenMessage = new UIEventSource<UIElement>(undefined);
public readonly fullScreenMessage = new UIEventSource<UIElement>(undefined)
.addCallback(fs => console.log("Fullscreen message is", fs));
/**
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)
.addCallback(selected => console.log("Selected element is", selected));
public readonly featureSwitchUserbadge: UIEventSource<boolean>;
public readonly featureSwitchSearch: UIEventSource<boolean>;

24
UI/ShowDataLayer.ts
View file

@ -17,6 +17,7 @@ export default class ShowDataLayer {
private readonly _layerDict;
private readonly _leafletMap: UIEventSource<L.Map>;
private readonly _onSelectedTrigger: any = {}; // osmId+geometry.type+matching_layer_id --> () => void
constructor(features: UIEventSource<{ feature: any, freshness: Date }[]>,
leafletMap: UIEventSource<L.Map>,
@ -63,6 +64,16 @@ export default class ShowDataLayer {
zoom.map(z => (layoutToUse.clustering?.maxZoom ?? 0) >= z).addCallback(() => {
update();
});
State.state.selectedElement.addCallback(feature => {
if(feature === undefined){
return;
}
const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id;
const action = self._onSelectedTrigger[id];
if(action){
action();
}
});
}
@ -109,7 +120,7 @@ export default class ShowDataLayer {
const tags = State.state.allElements.getEventSourceFor(feature);
let uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer));
const uiElement: LazyElement = new LazyElement(() => new FeatureInfoBox(tags, layer));
popup.setContent(uiElement.Render());
leafletLayer.bindPopup(popup);
// We first render the UIelement (which'll still need an update later on...)
@ -118,10 +129,17 @@ export default class ShowDataLayer {
leafletLayer.on("click", (e) => {
// We set the element as selected...
uiElement.Activate();
// uiElement.Activate();
State.state.selectedElement.setData(feature);
});
const id = feature.properties.id+feature.geometry.type+feature._matching_layer_id;
this._onSelectedTrigger[id]
= () => {
leafletLayer.openPopup();
uiElement.Activate();
}
if (feature.properties.id.replace(/\//g, "_") === Hash.Get().data) {
// This element is in the URL, so this is a share link