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

Preparation for delete button

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-07 15:08:52 +02:00
parent 41341470db
commit 1cd4745c3a
8 changed files with 98 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Logic/FilteredLayer.ts
View file

@ -190,15 +190,16 @@ export class FilteredLayer {
});
const uiElement = self._showOnPopup(eventSource);
layer.bindPopup(uiElement.Render());
layer.on("click", function (e) {
console.log("Selected ", feature)
self._selectedElement.setData(feature.properties);
const uiElement = self._showOnPopup(eventSource);
const popup = L.popup()
.setContent(uiElement.Render())
.setLatLng(e.latlng)
.openOn(self._map.map);
uiElement.Update();
uiElement.Activate();
L.DomEvent.stop(e); // Marks the event as consumed
});

57
Logic/ImageSearcher.ts
View file

@ -3,6 +3,7 @@ import {ImagesInCategory, Wikidata, Wikimedia} from "./Wikimedia";
import {WikimediaImage} from "../UI/Image/WikimediaImage";
import {SimpleImageElement} from "../UI/Image/SimpleImageElement";
import {UIElement} from "../UI/UIElement";
import {Changes} from "./Changes";
/**
@ -15,18 +16,20 @@ export class ImageSearcher extends UIEventSource<string[]> {
private readonly _wdItem = new UIEventSource<string>("");
private readonly _commons = new UIEventSource<string>("");
private _activated: boolean = false;
constructor(tags: UIEventSource<any>) {
private _changes: Changes;
constructor(tags: UIEventSource<any>,
changes: Changes) {
super([]);
this._tags = tags;
this._changes = changes;
const self = this;
this._wdItem.addCallback(() => {
// Load the wikidata item, then detect usage on 'commons'
let wikidataId = self._wdItem.data;
// @ts-ignore
// Load the wikidata item, then detect usage on 'commons'
let wikidataId = self._wdItem.data;
// @ts-ignore
if (wikidataId.startsWith("Q")) {
wikidataId = wikidataId.substr(1);
}
@ -34,6 +37,7 @@ export class ImageSearcher extends UIEventSource<string[]> {
self.AddImage(wd.image);
Wikimedia.GetCategoryFiles(wd.commonsWiki, (images: ImagesInCategory) => {
for (const image of images.images) {
// @ts-ignore
if (image.startsWith("File:")) {
self.AddImage(image);
}
@ -67,17 +71,48 @@ export class ImageSearcher extends UIEventSource<string[]> {
}
private AddImage(url: string) {
if(url === undefined || url === null){
if (url === undefined || url === null) {
return;
}
if (this.data.indexOf(url) < 0) {
this.data.push(url);
this.ping();
for (const el of this.data) {
if (el === url) {
return;
}
}
this.data.push(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...");
// this._changes.addChange(this._tags.data.id, key, "");
}
public Activate() {
if(this._activated){
if (this._activated) {
return;
}
this._activated = true;

2
UI/FeatureInfoBox.ts
View file

@ -44,7 +44,7 @@ export class FeatureInfoBox extends UIElement {
this._userDetails = userDetails;
this.ListenTo(userDetails);
this._imageElement = new ImageCarousel(this._tagsES);
this._imageElement = new ImageCarousel(this._tagsES, changes);
this._infoboxes = [];
for (const tagRenderingOption of elementsToShow) {

45
UI/Image/ImageCarousel.ts
View file

@ -3,6 +3,9 @@ import {ImageSearcher} from "../../Logic/ImageSearcher";
import {UIEventSource} from "../UIEventSource";
import {SlideShow} from "../SlideShow";
import {FixedUiElement} from "../Base/FixedUiElement";
import {VerticalCombine} from "../Base/VerticalCombine";
import {Changes} from "../../Logic/Changes";
import {VariableUiElement} from "../Base/VariableUIElement";
export class ImageCarousel extends UIElement {
/**
@ -20,26 +23,54 @@ export class ImageCarousel extends UIElement {
public readonly slideshow: SlideShow;
constructor(tags: UIEventSource<any>) {
private readonly _uiElements: UIEventSource<UIElement[]>;
private readonly _deleteButtonText = new UIEventSource<string>("");
private readonly _deleteButton: UIElement;
constructor(tags: UIEventSource<any>, changes: Changes) {
super(tags);
this.searcher = new ImageSearcher(tags);
const self = this;
this.searcher = new ImageSearcher(tags, changes);
let uiElements = this.searcher.map((imageURLS: string[]) => {
this._uiElements = this.searcher.map((imageURLS: string[]) => {
const uiElements: UIElement[] = [];
for (const url of imageURLS) {
uiElements.push(ImageSearcher.CreateImageElement(url));
const image = ImageSearcher.CreateImageElement(url);
uiElements.push(image);
}
return uiElements;
});
this.slideshow = new SlideShow(
uiElements,
this._uiElements,
new FixedUiElement("")).HideOnEmpty(true);
this._deleteButtonText = this.slideshow._currentSlide.map((i) => {
if(self.searcher.IsDeletable(self.searcher.data[i])){
return "DELETE";
}else{
return "";
}
});
this._deleteButton = new VariableUiElement(this._deleteButtonText)
.HideOnEmpty(true)
.onClick(() => {
self.searcher.Delete(self.searcher.data[self.slideshow._currentSlide.data]);
});
}
InnerRender(): string {
return this.slideshow.Render();
return this.slideshow.Render() ;
// + this._deleteButton.Render();
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
this._deleteButton.Update();
}

4
UI/SlideShow.ts
View file

@ -6,7 +6,7 @@ export class SlideShow extends UIElement {
private readonly _embeddedElements: UIEventSource<UIElement[]>
private readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
private readonly _noimages: UIElement;
private _prev: FixedUiElement;
private _next: FixedUiElement;
@ -84,6 +84,8 @@ export class SlideShow extends UIElement {
for (const embeddedElement of this._embeddedElements.data) {
embeddedElement.Activate();
}
this._next.Update();
this._prev.Update();
}
}

1
UI/UIElement.ts
View file

@ -1,5 +1,4 @@
import {UIEventSource} from "./UIEventSource";
import {Playground} from "../Layers/Playground";
export abstract class UIElement {

9
index.css
View file

@ -457,14 +457,15 @@ body {
text-align: center;
}
.slide > span {
max-height: 40vh;
}
.slide > span img {
height: auto;
width: auto;
max-width: 100%;
max-height: 50vh;
max-height: 30vh;
border-radius: 1em;
}
@ -497,7 +498,7 @@ body {
position: absolute;
bottom: 0;
left: 5em; /* Offset for the go left button*/
left: 6em; /* Offset for the go left button*/
padding: 0.25em;
margin-bottom: 0.25em;
border-radius: 0.5em;

1
index.html
View file

@ -9,7 +9,6 @@
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href="./index.css"/>
<link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
</head>
<body>