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

Stabilizing popups part 2: loading new data doesn't close the popup anymore + fix slideshow

Browse source
This commit is contained in:
pietervdvn 2021-02-06 00:05:38 +01:00
parent b9d5a85cd0
commit d4f107c81a
7 changed files with 48 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Models/Constants.ts
View file

@ -2,7 +2,7 @@ import { Utils } from "../Utils";
export default class Constants {
public static vNumber = "0.5.0-alpha-tailwind";
public static vNumber = "0.5.0-rc1";
// The user journey states thresholds when a new feature gets unlocked
public static userJourney = {

11
UI/Image/DeleteImage.ts
View file

@ -22,21 +22,20 @@ export default class DeleteImage extends UIElement {
this.isDeletedBadge = Translations.t.image.isDeleted;
const style = "display:block;color:white;width:100%;"
const deleteButton = Translations.t.image.doDelete.Clone()
.SetStyle(style+"background:#ff8c8c;")
.SetClass("block w-full pl-4 pr-4")
.SetStyle("color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;")
.onClick(() => {
State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
});
const cancelButton = Translations.t.general.cancel;
const cancelButton = Translations.t.general.cancel.SetClass("bg-white pl-4 pr-4").SetStyle( "border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
this.deleteDialog = new CheckBox(
new Combine([
deleteButton,
cancelButton
]).SetStyle("display:flex;flex-direction:column;"),
Svg.delete_icon_ui().SetStyle('width:1.5em;display:block;padding-left: calc(50% - 0.75em);')
]).SetClass("flex flex-col background-black"),
Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
)
}

6
UI/Image/ImageCarousel.ts
View file

@ -21,8 +21,8 @@ export class ImageCarousel extends UIElement{
if(url.key !== undefined){
image = new Combine([
image,
new DeleteImage(url.key, tags)
]);
new DeleteImage(url.key, tags).SetClass("delete-image-marker absolute top-0 left-0 pl-3")
]).SetClass("relative");
}
image
.SetClass("w-full block")
@ -32,7 +32,7 @@ export class ImageCarousel extends UIElement{
});
this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
this.SetClass("block image-carousel-marker");
this.SetClass("block w-full");
}
/***

2
UI/Image/SlideShow.ts
View file

@ -41,7 +41,7 @@ export class SlideShow extends UIElement {
return;
}
$('.slick-carousel').not('.slick-initialized').slick({
// autoplay: true,
autoplay: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',

40
UI/ShowDataLayer.ts
View file

@ -23,7 +23,7 @@ export default class ShowDataLayer {
layoutToUse: LayoutConfig) {
this._leafletMap = leafletMap;
const self = this;
let oldGeoLayer: L.Layer = undefined;
const mp = leafletMap.data;
this._layerDict = {};
for (const layer of layoutToUse.layers) {
@ -42,6 +42,12 @@ export default class ShowDataLayer {
}
}
const knownFeatureIds = new Set<string>();
const geoLayer = self.CreateGeojsonLayer();
mp.addLayer(geoLayer);
let cluster = undefined;
function update() {
if (features.data === undefined) {
return;
@ -49,30 +55,36 @@ export default class ShowDataLayer {
if (leafletMap.data === undefined) {
return;
}
const mp = leafletMap.data;
const feats = features.data.map(ff => ff.feature);
let geoLayer = self.CreateGeojsonLayer(feats)
for (const feat of feats) {
const key = feat.geometry.type + feat.properties.id + feat.layer;
if (knownFeatureIds.has(key)) {
continue;
}
knownFeatureIds.add(key);
// @ts-ignore
geoLayer.addData(feat);
console.log("Added ", feat)
}
if (cluster === undefined) {
if (layoutToUse.clustering.minNeededElements <= features.data.length) {
// Activate clustering if it wasn't already activated
const cl = window["L"]; // This is a dirty workaround, the clustering plugin binds to the L of the window, not of the namespace or something
const cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.clustering.maxZoom});
cluster = cl.markerClusterGroup({disableClusteringAtZoom: layoutToUse.clustering.maxZoom});
cluster.addLayer(geoLayer);
geoLayer = cluster;
mp.removeLayer(geoLayer)
mp.addLayer(cluster);
}
if (oldGeoLayer) {
mp.removeLayer(oldGeoLayer);
}
mp.addLayer(geoLayer);
oldGeoLayer = geoLayer;
openSelectedElementFeature(State.state.selectedElement.data);
}
features.addCallback(() => update());
leafletMap.addCallback(() => update());
update();
State.state.selectedElement.addCallbackAndRun(openSelectedElementFeature);
update();
}
@ -156,11 +168,11 @@ export default class ShowDataLayer {
}
private CreateGeojsonLayer(features: any[]): L.Layer {
private CreateGeojsonLayer(): L.Layer {
const self = this;
const data = {
type: "FeatureCollection",
features: features
features: []
}
return L.geoJSON(data, {
style: feature => self.createStyleFor(feature),

1
UI/SubstitutedTranslation.ts
View file

@ -29,6 +29,7 @@ export class SubstitutedTranslation extends UIElement {
self.content = self.CreateContent();
self.Update();
});
this.SetClass("w-full")
}

6
index.css
View file

@ -122,6 +122,10 @@ a {
color: var(--foreground-color)
}
.slick-prev:before, .slick-next:before {
/*Slideshow workaround*/
color:black !important;
}
#topleft-tools svg {
fill: var(--foreground-color) !important;
@ -159,6 +163,8 @@ a {
box-shadow: 0 3px 14px var(--shadow-color) !important;
}
#geolocate-button {
position: absolute;
bottom: 25px;