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

More cleanup of code: remove the overly complicated layer selection

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-13 03:29:44 +02:00
parent 257194c063
commit 9777a2666b
13 changed files with 199 additions and 304 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Customizations/LayerDefinition.ts
View file

@ -17,7 +17,7 @@ export class LayerDefinition {
/**
* This name is used in the 'hide or show this layer'-buttons
*/
name: string | UIElement;
name: string | Translation;
/***
* This is shown under the 'add new' button to indicate what kind of feature one is adding.

47
InitUiElements.ts
View file

@ -345,32 +345,57 @@ export class InitUiElements {
), Locale.language);
}
static InitLayerSelection() {
const closedFilterButton = `<button id="filter__button" class="filter__button shadow">${Img.closedFilterButton}</button>`;
const openFilterButton = `<button id="filter__button" class="filter__button">${Img.openFilterButton}</button>`;
private static GenerateLayerControlPanel() {
let baseLayerOptions = BaseLayers.baseLayers.map((layer) => {
return {value: layer, shown: layer.name}
});
const backgroundMapPicker = new Combine([new DropDown(`Background map`, baseLayerOptions, State.state.bm.CurrentLayer), openFilterButton]);
const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection()]);
let layerControl = backgroundMapPicker;
let layerControlPanel = new Combine([new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]);
layerControlPanel.SetStyle("margin:1em");
if (State.state.filteredLayers.data.length > 1) {
layerControl = new Combine([layerSelection, backgroundMapPicker]);
const layerSelection = new LayerSelection();
layerControlPanel = new Combine([layerSelection, layerControlPanel]);
}
return layerControlPanel;
}
static InitLayerSelection() {
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
const checkbox = new CheckBox(layerControl, closedFilterButton,
const layerControlPanel = this.GenerateLayerControlPanel()
.SetStyle("display:block;padding:1em;border-radius:1em;");
const closeButton = new Combine([Img.openFilterButton])
.SetStyle("display:block; width: min-content; background: #e5f5ff;padding:1em; border-radius:1em;");
const checkbox = new CheckBox(
new Combine([
closeButton,
layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
,
new Combine([Img.closedFilterButton])
.SetStyle("display:block;border-radius:50%;background:white;padding:1em;"),
QueryParameters.GetQueryParameter("layer-control-toggle", "false")
.map((str) => str !== "false", [], b => "" + b)
);
checkbox.AttachTo("filter__selection");
checkbox
.AttachTo("layer-selection");
State.state.bm.Location.addCallback(() => {
// Close the layer selection when the map is moved
checkbox.isEnabled.setData(false);
});
const fullScreen = this.GenerateLayerControlPanel();
checkbox.isEnabled.addCallback(isEnabled => {
if (isEnabled) {
State.state.fullScreenMessage.setData(fullScreen);
}
})
State.state.fullScreenMessage.addCallbackAndRun(latest => {
if (latest === undefined) {
checkbox.isEnabled.setData(false);
}
})
});
}

53
Logic/ImageSearcher.ts
View file

@ -2,10 +2,8 @@ import {WikimediaImage} from "../UI/Image/WikimediaImage";
import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
import {UIElement} from "../UI/UIElement";
import {ImgurImage} from "../UI/Image/ImgurImage";
import {State} from "../State";
import {ImagesInCategory, Wikidata, Wikimedia} from "./Web/Wikimedia";
import {UIEventSource} from "./UIEventSource";
import {Tag} from "./Tags";
/**
* There are multiple way to fetch images for an object
@ -22,12 +20,11 @@ import {Tag} from "./Tags";
* Class which search for all the possible locations for images and which builds a list of UI-elements for it.
* Note that this list is embedded into an UIEVentSource, ready to put it into a carousel
*/
export class ImageSearcher extends UIEventSource<string[]> {
export class ImageSearcher extends UIEventSource<{key: string, url: string}[]> {
private readonly _tags: UIEventSource<any>;
private readonly _wdItem = new UIEventSource<string>("");
private readonly _commons = new UIEventSource<string>("");
public _deletedImages = new UIEventSource<string[]>([]);
constructor(tags: UIEventSource<any>) {
@ -45,12 +42,12 @@ export class ImageSearcher extends UIEventSource<string[]> {
wikidataId = wikidataId.substr(1);
}
Wikimedia.GetWikiData(parseInt(wikidataId), (wd: Wikidata) => {
self.AddImage(wd.image);
self.AddImage(undefined, wd.image);
Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
for (const image of images.images) {
// @ts-ignore
if (image.startsWith("File:")) {
self.AddImage(image);
self.AddImage(undefined, image);
}
}
})
@ -69,13 +66,13 @@ export class ImageSearcher extends UIEventSource<string[]> {
for (const image of images.images) {
// @ts-ignore
if (image.startsWith("File:")) {
self.AddImage(image);
self.AddImage(undefined, image);
}
}
})
} else { // @ts-ignore
if (commons.startsWith("File:")) {
self.AddImage(commons);
self.AddImage(undefined, commons);
}
}
}
@ -84,62 +81,34 @@ export class ImageSearcher extends UIEventSource<string[]> {
}
private AddImage(url: string) {
private AddImage(key: string, url: string) {
if (url === undefined || url === null || url === "") {
return;
}
for (const el of this.data) {
if (el === url) {
if (el.url === url) {
return;
}
}
this.data.push(url);
this.data.push({key:key, url:url});
this.ping();
}
private ImageKey(url: string): string {
const tgs = this._tags.data;
for (const key in tgs) {
if (tgs[key] === url) {
return key;
}
}
return undefined;
}
public IsDeletable(url: string): boolean {
return this.ImageKey(url) !== undefined;
}
public Delete(url: string): void {
const key = this.ImageKey(url);
if (key === undefined) {
return;
}
console.log("Deleting image...", key, " --> ", url);
this._deletedImages.data.push(url);
this._deletedImages.ping();
this.ping();
State.state?.changes?.addTag(this._tags.data.id, new Tag(key, ""));
}
private LoadImages(): void {
const imageTag = this._tags.data.image;
if (imageTag !== undefined) {
const bareImages = imageTag.split(";");
for (const bareImage of bareImages) {
this.AddImage(bareImage);
this.AddImage("image", bareImage);
}
}
for (const key in this._tags.data) {
if (key.startsWith("image:")) {
const url = this._tags.data[key]
this.AddImage(url);
this.AddImage(key, url);
}
}

53
UI/Image/DeleteImage.ts Normal file
View file

@ -0,0 +1,53 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Translations from "../i18n/Translations";
import {CheckBox} from "../Input/CheckBox";
import Combine from "../Base/Combine";
import {State} from "../../State";
import {Tag} from "../../Logic/Tags";
export default class DeleteImage extends UIElement {
private readonly key: string;
private readonly tags: UIEventSource<any>;
private readonly isDeletedBadge: UIElement;
private readonly deleteDialog: UIElement;
constructor(key: string, tags: UIEventSource<any>) {
super(tags);
this.tags = tags;
this.key = key;
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;")
.onClick(() => {
State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
});
const cancelButton = Translations.t.general.cancel;
this.deleteDialog = new CheckBox(
new Combine([
deleteButton,
cancelButton
]).SetStyle("display:flex;flex-direction:column;"),
"<img src='./assets/delete.svg' style='width:1.5em;'>"
)
}
InnerRender(): string {
const value = this.tags.data[this.key];
if (value === undefined || value === "") {
return this.isDeletedBadge.Render();
}
return this.deleteDialog.Render();
}
}

15
UI/Image/ImageCarousel.ts
View file

@ -8,6 +8,8 @@ import {
TagDependantUIElementConstructor
} from "../../Customizations/UIElementConstructor";
import Translation from "../i18n/Translation";
import Combine from "../Base/Combine";
import DeleteImage from "./DeleteImage";
export class ImageCarouselConstructor implements TagDependantUIElementConstructor {
IsKnown(properties: any): boolean {
@ -34,16 +36,21 @@ export class ImageCarouselConstructor implements TagDependantUIElementConstructo
export class ImageCarousel extends TagDependantUIElement {
public readonly searcher: ImageSearcher;
public readonly slideshow: SlideShow;
constructor(tags: UIEventSource<any>) {
super(tags);
this.searcher = new ImageSearcher(tags);
const uiElements = this.searcher.map((imageURLS: string[]) => {
const searcher : UIEventSource<{url:string}[]> = new ImageSearcher(tags);
const uiElements = searcher.map((imageURLS: {key: string, url:string}[]) => {
const uiElements: UIElement[] = [];
for (const url of imageURLS) {
const image = ImageSearcher.CreateImageElement(url);
let image = ImageSearcher.CreateImageElement(url.url);
if(url.key !== undefined){
image = new Combine([
image,
new DeleteImage(url.key, tags)
]);
}
uiElements.push(image);
}
return uiElements;

2
UI/Image/ImgurImage.ts
View file

@ -4,7 +4,7 @@ import {LicenseInfo} from "../../Logic/Web/Wikimedia";
import {Imgur} from "../../Logic/Web/Imgur";
export class ImgurImage extends UIElement {
export class ImgurImage extends UIElement {
/***

2
UI/Image/WikimediaImage.ts
View file

@ -35,7 +35,7 @@ export class WikimediaImage extends UIElement {
const wikimediaLink =
"<a href='https://commons.wikimedia.org/wiki/" + this._imageLocation + "' target='_blank'>" +
"<img class='wikimedia-link' src='./assets/wikimedia-commons-white.svg' alt='Wikimedia Commons Logo'/>" +
"<img style='width:2em;height: 2em' class='wikimedia-link' src='./assets/wikimedia-commons-white.svg' alt='Wikimedia Commons Logo'/>" +
"</a> ";
const attribution =

47
UI/LayerSelection.ts
View file

@ -1,10 +1,9 @@
import { UIElement } from "./UIElement";
import { FilteredLayer } from "../Logic/FilteredLayer";
import { CheckBox } from "./Input/CheckBox";
import {UIElement} from "./UIElement";
import {CheckBox} from "./Input/CheckBox";
import Combine from "./Base/Combine";
import {Utils} from "../Utils";
import {Img} from "./Img";
import {State} from "../State";
import Translations from "./i18n/Translations";
export class LayerSelection extends UIElement {
@ -15,37 +14,27 @@ export class LayerSelection extends UIElement {
this._checkboxes = [];
for (const layer of State.state.filteredLayers.data) {
const checkbox = `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 7.28571L10.8261 15L23 3" stroke="#003B8B" stroke-width="4" stroke-linejoin="round"/>
</svg>`;
let icon = "<img >";
const checkbox = Img.checkmark;
let icon = "";
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
icon = `<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`
icon = `<img width="20" height="20" src="${layer.layerDef.icon}">`
}
const name = layer.layerDef.name;
const name = Translations.WT(layer.layerDef.name).Clone()
.SetStyle("font-size:large;");
this._checkboxes.push(new CheckBox(
new Combine([checkbox, icon, name]),
new Combine([
Img.no_checkmark,
icon,
layer.layerDef.name]),
layer.isDisplayed));
}
new Combine([checkbox, icon, name]),
new Combine([Img.no_checkmark, icon, name]),
layer.isDisplayed)
.SetStyle("margin:0.3em;")
);
}
}
InnerRender(): string {
let html = ``;
for (const checkBox of this._checkboxes) {
const checkBoxHTML = checkBox.Render();
const checkBoxListItem = `<li>${checkBoxHTML}</li>`;
html = html + checkBoxListItem;
InnerRender(): string {
return new Combine(this._checkboxes)
.SetStyle("display:flex;flex-direction:column;")
.Render();
}
return `<ul>${html}</ul>`;
}
}

9
UI/SlideShow.ts
View file

@ -71,5 +71,12 @@ export class SlideShow extends UIElement {
index = index % this._embeddedElements.data.length;
this._currentSlide.setData(index);
}
Update() {
super.Update();
for (const uiElement of this._embeddedElements.data) {
uiElement.Update();
}
}
}
}

4
UI/i18n/Translations.ts
View file

@ -1015,6 +1015,10 @@ export default class Translations {
"</ul></p>" +
"<p>Merk je een bug of wil je een extra feature? Wil je helpen vertalen? Bezoek dan de <a href='https://github.com/pietervdvn/MapComplete' target='_blank'>broncode</a> en <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'>issue tracker</a></p>",
}),
backgroundMap: new T({
"en":"Background map",
"nl":"Achtergrondkaart"
})

253
index.css
View file

@ -1,56 +1,66 @@
html, body {
height: 100%;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
#leafletDiv {
height: 100%;
}
#leafletDiv {
height: 100%;
}
#geolocate-button {
position: absolute;
bottom: 25px;
right: 50px;
z-index: 999; /*Just below leaflets zoom*/
background-color: white;
border-radius: 5px;
border: solid 2px #0005;
cursor: pointer;
width: 43px;
height: 43px;
display: none; /*Hidden by default, only visible on mobile*/
}
#geolocate-button {
position: absolute;
bottom: 25px;
right: 50px;
z-index: 999; /*Just below leaflets zoom*/
background-color: white;
border-radius: 5px;
border: solid 2px #0005;
cursor: pointer;
width: 43px;
height: 43px;
display: none; /*Hidden by default, only visible on mobile*/
}
#geolocate-button img {
width: 31px;
height: 31px;
margin: 6px;
}
#geolocate-button img {
width: 31px;
height: 31px;
margin: 6px;
}
#geolocate-button > .uielement {
display: block;
}
#geolocate-button > .uielement {
display: block;
}
#help-button-mobile {
display: none;
}
#help-button-mobile {
display: none;
}
/**************** GENERIC ****************/
#layer-selection {
position: absolute;
bottom: 1em;
left: 1em;
z-index: 9000;
background-color: white;
border-radius: 1em;
cursor: pointer;
}
/**************** GENERIC ****************/
.alert {
background-color: #fee4d1;
font-weight: bold;
border-radius: 1em;
padding: 0.3em;
margin: 0.25em;
.alert {
background-color: #fee4d1;
font-weight: bold;
border-radius: 1em;
padding: 0.3em;
margin: 0.25em;
text-align: center;
padding-top: 0.15em;
padding-bottom: 0.15em;
@ -335,111 +345,6 @@
pointer-events: all;
}
/* filter ui */
.filter__popup {
position: absolute;
bottom: 0;
z-index: 500;
padding-left: 10px;
padding-bottom: 10px;
}
.filter__button {
outline: none;
border: none;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: white;
position: relative;
}
.filter__button svg {
vertical-align: middle;
}
#filter__selection{
}
#filter__selection form {
display: flex;
flex-flow: column;
width: 100%;
background-color: #ffffff;
border-radius: 15px;
border-bottom-left-radius: 30px;
border: none;
font-size: 16px;
transform: translateY(60px);
padding: 15px 0 60px 0;
}
#filter__selection label {
font-size: 16px;
background-color: #ffffff;
padding: 0 15px 12px 15px;
margin: 0;
color: #003B8B;
font-weight: 600;
}
#filter__selection select {
outline: none;
background-color: #F0EFEF;
border: none;
border-radius: 5px;
font-size: 14px;
padding: 5px;
margin: 0 15px;
max-width: 250px;
}
#filter__selection ul {
background-color: #ffffff;
padding: 10px 25px 18px 18px;
list-style: none;
margin: 0;
font-weight: 600;
transform: translateY(75px);
max-height: calc(50vh - 10em);
overflow-y: auto;
}
#filter__selection ul li span > span {
display: flex;
align-items: center;
}
#filter__selection ul svg {
padding: 10px 14px 10px 0;
border-right: 1px solid #003B8B;
}
#filter__selection ul img {
width: 20px;
height: auto;
margin: 0 10px 0 18px;
}
#filter__selection ul svg {
width: 20px;
height: auto;
margin: 0 10px 0 18px;
}
.filter__label {
font-size: 16px;
transform: translateY(75px);
background-color: #ffffff;
padding: 10px 15px;
margin: 0;
color: #003B8B;
font-weight: 600;
border-radius: 15px 15px 0 0;
}
#centermessage {
position: absolute;
@ -769,57 +674,3 @@
.add-ui {
font-size: large;
}
.custom-layer-panel-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
font-size: large;
margin: 0.5em;
background-color: white;
justify-content: flex-start;
align-items: center;
text-decoration: none;
color: black;
}
.custom-layer-panel-header-img img {
max-width: 3em;
max-height: 3em;
padding: 0.5em;
}
.custom-layer-panel-header-img {
min-width: 4em;
height: 4em;
}
.custom-layer-checkbox {
font-size: larger;
min-height: 2em;
background-color: #e5f5ff;
margin:0.3em;
display: flex;
justify-content: flex-start;
align-items: stretch;
text-decoration: none;
padding: 0.5em;
border-radius: 1em;
width: unset;
}
.custom-layer-checkbox img {
max-width: 1.5em;
max-height: 1.5em;
width: 100%;
height: 100%;
padding: 0.2em;
padding-right: 0.5em;
}
.custom-layer-checkbox svg {
max-width: 1.5em;
max-height: 1.5em;
padding: 0.2em;
padding-right: 0.5em;
}

3
index.html
View file

@ -50,8 +50,7 @@
<div id="help-button-mobile"></div>
</div>
<div id="filter__popup" class="filter__popup">
<div id="filter__selection"></div>
<div id="layer-selection">
</div>
<div id="centermessage">Loading MapComplete, hang on...</div>

13
test.ts
View file

@ -1,13 +1,4 @@
import {ImageCarousel} from "./UI/Image/ImageCarousel";
import {UIEventSource} from "./Logic/UIEventSource";
import {OsmConnection} from "./Logic/Osm/OsmConnection";
import DeleteImage from "./UI/Image/DeleteImage";
const connection = new OsmConnection(true, new UIEventSource<string>(undefined), "qsdf");
connection.AttemptLogin();
const imageCarousel = new ImageCarousel(new UIEventSource<any>({
"image": "https://i.imgur.com/kX3rl3v.jpg"
}), connection);
imageCarousel.AttachTo("maindiv")
new DeleteImage("image", new UIEventSource<any>({"image":"url"})).AttachTo("maindiv");