Lots of styling, mobile friendliness, better UI flows
This commit is contained in:
Pieter Vander Vennet
parent
0b4016b65d
commit
57c9fcc5aa
28 changed files with 440 additions and 117 deletions
|
|
@ -27,10 +27,34 @@ export class CommonTagMappings {
|
|||
public static osmLink = new TagMappingOptions({
|
||||
key: "id",
|
||||
mapping: {
|
||||
"node/-1": "<span class='osmlink'>Over enkele momenten sturen we je punt naar OpenStreetMap</span>"
|
||||
"node/-1": ""
|
||||
},
|
||||
template: "<span class='osmlink'><a href='https://osm.org/{id}' target='_blank'>" +
|
||||
Img.osmAbstractLogo +
|
||||
"</a></span>"
|
||||
})
|
||||
});
|
||||
|
||||
public static wikipediaLink = new TagMappingOptions({
|
||||
key: "wikipedia",
|
||||
missing: "",
|
||||
freeform: (value: string) => {
|
||||
let link = "";
|
||||
// @ts-ignore
|
||||
if (value.startsWith("https")) {
|
||||
link = value;
|
||||
} else {
|
||||
|
||||
const splitted = value.split(":");
|
||||
const language = splitted[0];
|
||||
splitted.shift();
|
||||
const page = splitted.join(":");
|
||||
link = 'https://' + language + '.wikipedia.org/wiki/' + page;
|
||||
|
||||
}
|
||||
return "<span class='wikipedialink'>" +
|
||||
"<a href='" + link + "' target='_blank'>" +
|
||||
"<img width='64px' src='./assets/wikipedia.svg' alt='wikipedia'" +
|
||||
"</a></span>";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -65,8 +65,8 @@ export class KnownSet {
|
|||
"\n" +
|
||||
"<p>De data komt van <b>OpenStreetMap</b> en je antwoorden worden daar ook opgeslaan. " +
|
||||
"Omdat iedereen aan deze data bijdraagt, kunnen we geen garantie op correctheid bieden en heeft deze data geen juridische waarde</p>\n" +
|
||||
"<p>Je <b>privacy</b> is belangrijk. We tellen wel hoeveel personen de website bezoeken. Om je niet dubbel te tellen wordt er één coockie bijgehouden waar geen persoonlijke informatie in staat. " +
|
||||
"Als je inlogt, komt er een tweede coockie bij met je inloggegevens.</p>\n",
|
||||
"<p>Je <b>privacy</b> is belangrijk. We tellen wel hoeveel personen de website bezoeken. Om je niet dubbel te tellen wordt er één cookie bijgehouden waar geen persoonlijke informatie in staat. " +
|
||||
"Als je inlogt, komt er een tweede cookie bij met je inloggegevens.</p>\n",
|
||||
" <p>Wil je meehelpen? <br/>\n" +
|
||||
" Begin dan met <a href=\"https://www.openstreetmap.org/user/new\" target=\"_blank\">een account\n" +
|
||||
" te maken</a> of\n" +
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {Quests} from "../Quests";
|
|||
import {TagMappingOptions} from "../UI/TagMapping";
|
||||
import L from "leaflet"
|
||||
import {CommonTagMappings} from "./CommonTagMappings";
|
||||
import {Tag} from "../Logic/TagsFilter";
|
||||
import {Or, Tag} from "../Logic/TagsFilter";
|
||||
|
||||
export class Park extends LayerDefinition {
|
||||
|
||||
|
|
@ -11,7 +11,8 @@ export class Park extends LayerDefinition {
|
|||
super();
|
||||
this.name = "park";
|
||||
this.icon = "./assets/tree_white_background.svg";
|
||||
this.overpassFilter = new Tag("leisure","park");
|
||||
this.overpassFilter =
|
||||
new Or([new Tag("leisure","park"), new Tag("landuse","village_green")]);
|
||||
this.newElementTags = [new Tag("leisure", "park"),
|
||||
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")];
|
||||
this.removeTouchingElements = true;
|
||||
|
|
|
|||
|
|
@ -62,22 +62,21 @@ export class Basemap {
|
|||
center: [location.data.lat, location.data.lon],
|
||||
zoom: location.data.zoom,
|
||||
layers: [this.osmLayer],
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
L.control.attribution({
|
||||
position: 'bottomleft'
|
||||
}).addTo(this.map);
|
||||
|
||||
this.Location = location;
|
||||
const layerControl = L.control.layers(this.baseLayers, null,
|
||||
{
|
||||
position: 'bottomleft',
|
||||
position: 'bottomright',
|
||||
hideSingleBase: true
|
||||
})
|
||||
layerControl.addTo(this.map);
|
||||
|
||||
this.map.zoomControl.setPosition("bottomleft");
|
||||
|
||||
|
||||
|
||||
this.map.zoomControl.setPosition("bottomright");
|
||||
const self = this;
|
||||
|
||||
this.map.on("moveend", function () {
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ export class Imgur {
|
|||
$.ajax(settings).done(function (response) {
|
||||
response = JSON.parse(response);
|
||||
handleSuccessfullUpload(response.data.link);
|
||||
}).fail((reason) => {
|
||||
console.log("Uploading to IMGUR failed", reason)
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -90,12 +90,13 @@ export class OsmConnection {
|
|||
*/
|
||||
registerActivateOsmAUthenticationClass() {
|
||||
|
||||
const self = this;
|
||||
const authElements = document.getElementsByClassName("activate-osm-authentication");
|
||||
for (let i = 0; i < authElements.length; i++) {
|
||||
let element = authElements.item(i);
|
||||
// @ts-ignore
|
||||
element.onclick = function () {
|
||||
this.AttemptLogin();
|
||||
self.AttemptLogin();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,16 +5,20 @@ import {UIEventSource} from "../UI/UIEventSource";
|
|||
import {ImageUploadFlow} from "../UI/ImageUploadFlow";
|
||||
import {Changes} from "./Changes";
|
||||
import {UserDetails} from "./OsmConnection";
|
||||
import {SlideShow} from "../UI/SlideShow";
|
||||
|
||||
export class OsmImageUploadHandler {
|
||||
private _tags: UIEventSource<any>;
|
||||
private _changeHandler: Changes;
|
||||
private _userdetails: UIEventSource<UserDetails>;
|
||||
private _slideShow: SlideShow;
|
||||
|
||||
constructor(tags: UIEventSource<any>,
|
||||
userdetails: UIEventSource<UserDetails>,
|
||||
changeHandler: Changes
|
||||
changeHandler: Changes,
|
||||
slideShow : SlideShow
|
||||
) {
|
||||
this._slideShow = slideShow; // To move the slideshow (if any) to the last, just added element
|
||||
if (tags === undefined || userdetails === undefined || changeHandler === undefined) {
|
||||
throw "Something is undefined"
|
||||
}
|
||||
|
|
@ -25,6 +29,7 @@ export class OsmImageUploadHandler {
|
|||
|
||||
private generateOptions(license: string) {
|
||||
const tags = this._tags.data;
|
||||
const self = this;
|
||||
|
||||
const title = tags.name ?? "Unknown area";
|
||||
const description = [
|
||||
|
|
@ -46,6 +51,7 @@ export class OsmImageUploadHandler {
|
|||
}
|
||||
console.log("Adding image:" + freeIndex, url);
|
||||
changes.addChange(tags.id, "image:" + freeIndex, url);
|
||||
self._slideShow.MoveTo(-1); // set the last (thus newly added) image) to view
|
||||
},
|
||||
allDone: function () {
|
||||
changes.uploadAll(function () {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export class Quests {
|
|||
|
||||
static nameOf(name: string) : QuestionDefinition {
|
||||
return QuestionDefinition.noNameOrNameQuestion("<b>Wat is de <i>officiële</i> naam van dit " + name + "?</b><br />" +
|
||||
"Gelieve geen naam uit te vinden",
|
||||
"Veel gebieden hebben geen naam. Duid dit dan ook zo aan.",
|
||||
"Dit " + name + " heeft geen naam", 20);
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ export class Quests {
|
|||
"operator",
|
||||
[{text: "Natuurpunt", value: "Natuurpunt"},
|
||||
{text: "Het Agenschap voor Natuur en Bos", value: "Agentschap Natuur en Bos"},
|
||||
{text: "Een prive-eigenaar beheert dit", value: "private"}
|
||||
{text: "Een prive-eigenaar", value: "private"}
|
||||
]
|
||||
).addUnrequiredTag("access", "private")
|
||||
.addUnrequiredTag("access", "no");
|
||||
|
|
|
|||
10
README.md
10
README.md
|
|
@ -57,3 +57,13 @@ Images are fetched from:
|
|||
Images are uplaoded to imgur, as their API was way easier to handle. The URL is written into the changes
|
||||
|
||||
The idea is that one in a while, the images are transfered to wikipedia
|
||||
|
||||
|
||||
|
||||
|
||||
# Attributions:
|
||||
|
||||
Data from OpenStreetMap
|
||||
Images from Wikipedia/Wikimedia
|
||||
|
||||
https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg
|
||||
|
|
|
|||
47
UI/DropDownUI.ts
Normal file
47
UI/DropDownUI.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import {UIElement} from "./UIElement";
|
||||
import {UIEventSource} from "./UIEventSource";
|
||||
|
||||
export class DropDownUI extends UIElement {
|
||||
|
||||
selectedElement: UIEventSource<string>
|
||||
private _label: string;
|
||||
private _values: { value: string; shown: string }[];
|
||||
|
||||
constructor(label: string, values: { value: string, shown: string }[]) {
|
||||
super(undefined);
|
||||
this._label = label;
|
||||
this._values = values;
|
||||
this.selectedElement = new UIEventSource<string>(values[0].value);
|
||||
|
||||
}
|
||||
|
||||
|
||||
protected InnerRender(): string {
|
||||
|
||||
let options = "";
|
||||
for (const value of this._values) {
|
||||
options += "<option value='" + value.value + "'>" + value.shown + "</option>"
|
||||
}
|
||||
|
||||
return "<form>" +
|
||||
"<label for='dropdown-" + this.id + "'>" + this._label + "</label>" +
|
||||
"<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
|
||||
options +
|
||||
"</select>" +
|
||||
"</form>";
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
super.InnerUpdate(htmlElement);
|
||||
|
||||
const self = this;
|
||||
const e = document.getElementById("dropdown-" + this.id);
|
||||
e.onchange = function () {
|
||||
// @ts-ignore
|
||||
const selectedValue = e.options[e.selectedIndex].value;
|
||||
|
||||
self.selectedElement.setData(selectedValue);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@ import {UserDetails} from "../Logic/OsmConnection";
|
|||
import {Img} from "./Img";
|
||||
import {CommonTagMappings} from "../Layers/CommonTagMappings";
|
||||
import {Tag} from "../Logic/TagsFilter";
|
||||
import {ImageUploadFlow} from "./ImageUploadFlow";
|
||||
|
||||
export class FeatureInfoBox extends UIElement {
|
||||
|
||||
|
|
@ -27,6 +28,8 @@ export class FeatureInfoBox extends UIElement {
|
|||
private _changes: Changes;
|
||||
private _userDetails: UIEventSource<UserDetails>;
|
||||
private _imageElement: ImageCarousel;
|
||||
private _pictureUploader: UIElement;
|
||||
private _wikipedialink: UIElement;
|
||||
|
||||
|
||||
constructor(
|
||||
|
|
@ -66,27 +69,37 @@ export class FeatureInfoBox extends UIElement {
|
|||
this._infoElements = infoboxes;
|
||||
|
||||
this._osmLink = new TagMapping(CommonTagMappings.osmLink, this._tagsES);
|
||||
this._wikipedialink = new TagMapping(CommonTagMappings.wikipediaLink, this._tagsES);
|
||||
this._pictureUploader = new OsmImageUploadHandler(tagsES, userDetails, changes, this._imageElement.slideshow).getUI();
|
||||
|
||||
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
|
||||
let questions = "";
|
||||
|
||||
if (this._userDetails.data.loggedIn) {
|
||||
questions = this._questions.HideOnEmpty(true).Render();
|
||||
}
|
||||
|
||||
return "<div class='featureinfobox'>" +
|
||||
"<div class='featureinfoboxtitle'>" +
|
||||
"<span>" + this._title.Render() + "</span>" +
|
||||
this._wikipedialink.Render() +
|
||||
this._osmLink.Render() +
|
||||
"</div>" +
|
||||
|
||||
"<div class='infoboxcontents'>" +
|
||||
|
||||
this._imageElement.Render() +
|
||||
this._pictureUploader.Render() +
|
||||
|
||||
new VerticalCombine(this._infoElements, 'infobox-information').HideOnEmpty(true).Render() +
|
||||
|
||||
questions +
|
||||
|
||||
|
||||
new VerticalCombine(this._infoElements).Render() +
|
||||
" <span class='infobox-questions'>" +
|
||||
this._questions.Render() +
|
||||
" </span>" +
|
||||
"</div>" +
|
||||
"" +
|
||||
"</div>";
|
||||
|
|
@ -95,21 +108,12 @@ export class FeatureInfoBox extends UIElement {
|
|||
Activate() {
|
||||
super.Activate();
|
||||
this._imageElement.Activate();
|
||||
this._pictureUploader.Activate();
|
||||
}
|
||||
|
||||
Update() {
|
||||
super.Update();
|
||||
this._imageElement.Update();
|
||||
}
|
||||
|
||||
private generateInfoBox() {
|
||||
var infoboxes: UIElement[] = [];
|
||||
|
||||
infoboxes.push(new OsmImageUploadHandler(
|
||||
this._tagsES, this._userDetails, this._changes
|
||||
).getUI());
|
||||
|
||||
|
||||
return new VerticalCombine(infoboxes);
|
||||
this._pictureUploader.Update();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class ImageCarousel extends UIElement {
|
|||
*/
|
||||
private readonly searcher: ImageSearcher;
|
||||
|
||||
private readonly slideshow: SlideShow;
|
||||
public readonly slideshow: SlideShow;
|
||||
|
||||
constructor(tags: UIEventSource<any>) {
|
||||
super(tags);
|
||||
|
|
@ -32,8 +32,8 @@ export class ImageCarousel extends UIElement {
|
|||
}
|
||||
return uiElements;
|
||||
});
|
||||
|
||||
this.slideshow = new SlideShow(
|
||||
new FixedUiElement("<b>Afbeeldingen</b>"),
|
||||
uiElements,
|
||||
new FixedUiElement("")).HideOnEmpty(true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import {UIElement} from "./UIElement";
|
||||
import {UIEventSource} from "./UIEventSource";
|
||||
import {UIRadioButton} from "./UIRadioButton";
|
||||
import {VariableUiElement} from "./VariableUIElement";
|
||||
import $ from "jquery"
|
||||
import {Imgur} from "../Logic/Imgur";
|
||||
import {UserDetails} from "../Logic/OsmConnection";
|
||||
import {DropDownUI} from "./DropDownUI";
|
||||
|
||||
export class ImageUploadFlow extends UIElement {
|
||||
private _licensePicker: UIRadioButton;
|
||||
private _licensePicker: UIElement;
|
||||
private _selectedLicence: UIEventSource<string>;
|
||||
private _licenseExplanation: UIElement;
|
||||
private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
|
||||
private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
|
||||
|
|
@ -28,26 +29,32 @@ export class ImageUploadFlow extends UIElement {
|
|||
this.ListenTo(userInfo);
|
||||
this._uploadOptions = uploadOptions;
|
||||
this.ListenTo(this._isUploading);
|
||||
this._licensePicker = UIRadioButton.FromStrings(
|
||||
|
||||
const licensePicker = new DropDownUI("Jouw foto wordt gepubliceerd ",
|
||||
|
||||
[
|
||||
"CC-BY-SA",
|
||||
"CC-BY",
|
||||
"CC0"
|
||||
{value: "CC0", shown: "in het publiek domein"},
|
||||
{value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
|
||||
{value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"}
|
||||
]
|
||||
);
|
||||
this._licensePicker = licensePicker;
|
||||
this._selectedLicence = licensePicker.selectedElement;
|
||||
|
||||
|
||||
const licenseExplanations = {
|
||||
"CC-BY-SA":
|
||||
"CC-BY-SA 4.0":
|
||||
"<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
|
||||
"Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.",
|
||||
"CC-BY":
|
||||
"CC-BY 4.0":
|
||||
"<b>Creative Commonse met naamsvermelding</b> <br/>" +
|
||||
"Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
|
||||
"CC0":
|
||||
"<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
|
||||
}
|
||||
this._licenseExplanation = new VariableUiElement(
|
||||
this._licensePicker.SelectedElementIndex.map((license) => {
|
||||
return licenseExplanations[license?.value]
|
||||
this._selectedLicence.map((license) => {
|
||||
return licenseExplanations[license]
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
@ -58,37 +65,57 @@ export class ImageUploadFlow extends UIElement {
|
|||
if (!this._userdetails.data.loggedIn) {
|
||||
return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen</div>";
|
||||
}
|
||||
|
||||
if (this._isUploading.data == 1) {
|
||||
return "<b>Bezig met een foto te uploaden...</b>"
|
||||
}
|
||||
if (this._isUploading.data > 0) {
|
||||
return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
|
||||
}
|
||||
|
||||
return "<b>Foto's toevoegen</b><br/>" +
|
||||
'Kies een licentie:<br/>' +
|
||||
return "" +
|
||||
"<div class='imageflow'>" +
|
||||
|
||||
"<label for='fileselector-" + this.id + "'>" +
|
||||
|
||||
"<div class='imageflow-file-input-wrapper'>" +
|
||||
"<img src='./assets/camera-plus.svg' alt='upload image'/> " +
|
||||
"<span class='imageflow-add-picture'>Voeg foto toe</span>" +
|
||||
"<div class='break'></div>"+
|
||||
"</div>" +
|
||||
this._licensePicker.Render() +
|
||||
this._licenseExplanation.Render() + "<br/>" +
|
||||
'<input type="file" accept="image/*" name="picField" id="fileselector-' + this.id + '" size="24" multiple="multiple" alt=""/><br/>'
|
||||
|
||||
"</label>" +
|
||||
|
||||
"<input id='fileselector-" + this.id + "' " +
|
||||
"type='file' " +
|
||||
"class='imageflow-file-input' " +
|
||||
"accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
|
||||
"/>" +
|
||||
|
||||
"</div>"
|
||||
;
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
super.InnerUpdate(htmlElement);
|
||||
const user = this._userdetails.data;
|
||||
if(!user.loggedIn){
|
||||
htmlElement.onclick = function(){
|
||||
|
||||
htmlElement.onclick = function () {
|
||||
if (!user.loggedIn) {
|
||||
user.osmConnection.AttemptLogin();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this._licensePicker.Update();
|
||||
const selector = document.getElementById('fileselector-' + this.id);
|
||||
const self = this;
|
||||
if (selector != null) {
|
||||
selector.onchange = function (event) {
|
||||
selector.onchange = function () {
|
||||
const files = $(this).get(0).files;
|
||||
self._isUploading.setData(files.length);
|
||||
|
||||
const opts = self._uploadOptions(self._licensePicker.SelectedElementIndex.data.value);
|
||||
const opts = self._uploadOptions(self._selectedLicence.data);
|
||||
|
||||
Imgur.uploadMultiple(opts.title, opts.description, files,
|
||||
function (url) {
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ export class MessageBoxHandler {
|
|||
this.listenTo(uielement);
|
||||
this.update();
|
||||
|
||||
new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart > </h2>"),
|
||||
new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart</h2>"),
|
||||
(htmlElement) => {
|
||||
htmlElement.onclick = function () {
|
||||
document.getElementById("to-the-map").onclick = function () {
|
||||
uielement.setData(undefined);
|
||||
onClear();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,9 @@ export class QuestionPicker extends UIElement {
|
|||
return "";
|
||||
}
|
||||
|
||||
return highestQ.CreateHtml(this.source).Render();
|
||||
return "<div class='infobox-questions'>" +
|
||||
highestQ.CreateHtml(this.source).Render() +
|
||||
"</div>";
|
||||
}
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ export class SlideShow extends UIElement {
|
|||
private readonly _noimages: UIElement;
|
||||
|
||||
constructor(
|
||||
title: UIElement,
|
||||
embeddedElements: UIEventSource<UIElement[]>,
|
||||
noImages: UIElement) {
|
||||
super(embeddedElements);
|
||||
|
|
@ -24,7 +23,9 @@ export class SlideShow extends UIElement {
|
|||
}
|
||||
|
||||
if (this._embeddedElements.data.length == 1) {
|
||||
return "<div class='image-slideshow'>"+this._embeddedElements.data[0].Render()+"</div>";
|
||||
return "<div class='image-slideshow'><div class='slides'><div class='slide'>" +
|
||||
this._embeddedElements.data[0].Render() +
|
||||
"</div></div></div>";
|
||||
}
|
||||
|
||||
const prevBtn = "<div class='prev-button' id='prevbtn-"+this.id+"'></div>"
|
||||
|
|
@ -46,26 +47,29 @@ export class SlideShow extends UIElement {
|
|||
+ "</div>";
|
||||
}
|
||||
|
||||
public MoveTo(index: number) {
|
||||
if (index < 0) {
|
||||
index = this._embeddedElements.data.length - 1;
|
||||
}
|
||||
index = index % this._embeddedElements.data.length;
|
||||
this._currentSlide.setData(index);
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement) {
|
||||
const nextButton = document.getElementById("nextbtn-"+this.id);
|
||||
if(nextButton === undefined || nextButton === null){
|
||||
const nextButton = document.getElementById("nextbtn-" + this.id);
|
||||
if (nextButton === undefined || nextButton === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const prevButton = document.getElementById("prevbtn-"+this.id);
|
||||
const prevButton = document.getElementById("prevbtn-" + this.id);
|
||||
const self = this;
|
||||
nextButton.onclick = () => {
|
||||
const current = self._currentSlide.data;
|
||||
const next = (current + 1) % self._embeddedElements.data.length;
|
||||
self._currentSlide.setData(next);
|
||||
self.MoveTo(current + 1);
|
||||
}
|
||||
prevButton.onclick = () => {
|
||||
const current = self._currentSlide.data;
|
||||
let prev = (current - 1);
|
||||
if (prev < 0) {
|
||||
prev = self._embeddedElements.data.length - 1;
|
||||
}
|
||||
self._currentSlide.setData(prev);
|
||||
self.MoveTo(current - 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,20 @@ export class TagMappingOptions {
|
|||
mapping?: any;// dictionary for specific values, the values are substituted
|
||||
template?: string; // The template, where {key} will be substituted
|
||||
missing?: string// What to show when the key is not there
|
||||
freeform?: ((string) => string) // Freeform template function, only applied on the value if nothing matches
|
||||
|
||||
constructor(options: {
|
||||
key: string,
|
||||
mapping?: any,
|
||||
template?: string,
|
||||
missing?: string
|
||||
freeform?: ((string) => string)
|
||||
}) {
|
||||
this.key = options.key;
|
||||
this.mapping = options.mapping;
|
||||
this.template = options.template;
|
||||
this.missing = options.missing;
|
||||
this.freeform = options.freeform;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -60,12 +63,16 @@ export class TagMapping extends UIElement {
|
|||
}
|
||||
}
|
||||
|
||||
if (o.template === undefined) {
|
||||
console.log("Warning: no match for " + o.key + "=" + v);
|
||||
return v;
|
||||
if (o.template !== undefined) {
|
||||
return o.template.replace("{" + o.key + "}", v);
|
||||
}
|
||||
|
||||
return o.template.replace("{" + o.key + "}", v);
|
||||
if(o.freeform !== undefined){
|
||||
return o.freeform(v);
|
||||
}
|
||||
|
||||
console.log("Warning: no match for " + o.key + "=" + v);
|
||||
return v;
|
||||
}
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,29 @@ import {UIElement} from "./UIElement";
|
|||
|
||||
export class VerticalCombine extends UIElement {
|
||||
private _elements: UIElement[];
|
||||
private _className: string;
|
||||
|
||||
constructor(elements: UIElement[]) {
|
||||
constructor(elements: UIElement[], className: string = undefined) {
|
||||
super(undefined);
|
||||
this._elements = elements;
|
||||
this._className = className;
|
||||
}
|
||||
|
||||
protected InnerRender(): string {
|
||||
let html = "";
|
||||
for (const element of this._elements){
|
||||
for (const element of this._elements) {
|
||||
if (!element.IsEmpty()) {
|
||||
html += "<div>" + element.Render() + "</div><br />";
|
||||
html += "<div>" + element.Render() + "</div>";
|
||||
}
|
||||
}
|
||||
if(html === ""){
|
||||
return "";
|
||||
}
|
||||
if (this._className === undefined) {
|
||||
return html;
|
||||
}
|
||||
return "<div class='"+this._className+"'>" + html + "</div>";
|
||||
}
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
for (const element of this._elements){
|
||||
element.Update();
|
||||
|
|
|
|||
2
assets/camera-centered.svg
Normal file
2
assets/camera-centered.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1950 1950"><path d="m975.19 549.05q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5m704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224m-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5"/></svg>
|
||||
|
After Width: | Height: | Size: 529 B |
79
assets/camera-plus.svg
Normal file
79
assets/camera-plus.svg
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 -256 1950 1950"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="camera.svg"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1680"
|
||||
inkscape:window-height="1013"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.1711561"
|
||||
inkscape:cx="1154.0868"
|
||||
inkscape:cy="749.93142"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="m 881.19,449.05 c 79.33333,0 147.1667,28.16667 203.5,84.5 56.3333,56.33333 84.5,124.16667 84.5,203.5 0,79.33333 -28.1667,147.16667 -84.5,203.5 -56.3333,56.3333 -124.16667,84.5 -203.5,84.5 -79.33333,0 -147.16667,-28.1667 -203.5,-84.5 -56.33333,-56.33333 -84.5,-124.16667 -84.5,-203.5 0,-79.33333 28.16667,-147.16667 84.5,-203.5 56.33333,-56.33333 124.16667,-84.5 203.5,-84.5 m 798,-316 c 70.6667,0 131,25 181,75 50,50 75,110.33333 75,181 v 896 c 0,70.6667 -25,131 -75,181 -50,50 -110.3333,75 -181,75 h -1408 c -70.66667,0 -131,-25 -181,-75 -50,-50 -75,-110.3333 -75,-181 v -896 c 0,-70.66667 25,-131 75,-181 50,-50 110.33333,-75 181,-75 h 130 l 51,-136 c 12.66667,-32.666667 35.83333,-60.833333 69.5,-84.5 33.66667,-23.66667 68.16667,-35.5 103.5,-35.5 h 512 c 35.3333,0 69.8333,11.83333 103.5,35.5 33.6667,23.666667 56.8333,51.833333 69.5,84.5 l 51,136 h 318 m -798,1052 c 123.3333,0 228.8333,-43.8333 316.5,-131.5 87.6667,-87.6667 131.5,-193.16667 131.5,-316.5 0,-123.33333 -43.8333,-228.83333 -131.5,-316.5 -87.6667,-87.66667 -193.1667,-131.5 -316.5,-131.5 -123.33333,0 -228.83333,43.83333 -316.5,131.5 -87.66667,87.66667 -131.5,193.16667 -131.5,316.5 0,123.33333 43.83333,228.8333 131.5,316.5 87.66667,87.6667 193.16667,131.5 316.5,131.5"
|
||||
id="path2"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="csssssssccsssssssssssccssssccccsssssssc" />
|
||||
<g
|
||||
id="g854"
|
||||
transform="translate(259.86064,302.45965)">
|
||||
<g
|
||||
id="g847">
|
||||
<circle
|
||||
style="fill:#7ebc6f;fill-opacity:1;stroke:none;stroke-width:21.93531036;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="path819"
|
||||
cx="1351.3682"
|
||||
cy="1044.5065"
|
||||
r="335.30353" />
|
||||
</g>
|
||||
<g
|
||||
id="g844">
|
||||
<path
|
||||
style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 1154.7797,1044.3443 h 389.1358"
|
||||
id="path821"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 1349.9206,849.36269 V 1238.4985"
|
||||
id="path821-3"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
3
assets/wikipedia.svg
Normal file
3
assets/wikipedia.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 164 KiB |
130
index.css
130
index.css
|
|
@ -144,7 +144,7 @@ img {
|
|||
|
||||
#welcomeMessage {
|
||||
display: inline-block;
|
||||
width: 30em;
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -152,14 +152,6 @@ img {
|
|||
display: none; /*Only shown on small screens*/
|
||||
}
|
||||
|
||||
#messagesboxmobile {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
#messagesbox {
|
||||
/*Only shown on big screens*/
|
||||
padding: 2em;
|
||||
|
|
@ -192,12 +184,40 @@ img {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#messagesboxmobile-scroll {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 9em);
|
||||
padding-top: 1em;
|
||||
padding-bottom: 2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#messagesboxmobile {
|
||||
margin: 1em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#to-the-map {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
padding-right: 2em;
|
||||
color: white;
|
||||
background-color: #7ebc6f;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 4em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#logo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -279,6 +299,7 @@ img {
|
|||
}
|
||||
|
||||
.slides {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prev-button {
|
||||
|
|
@ -380,6 +401,54 @@ img {
|
|||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/**************** Image upload flow ***************/
|
||||
|
||||
.imageflow {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.imageflow-file-input-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5em;
|
||||
border-radius: 1em;
|
||||
border: 3px solid black;
|
||||
}
|
||||
|
||||
.imageflow-add-picture {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
.imageflow-file-input-wrapper img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0.1em;
|
||||
margin-top: 5px;
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.license-picker {
|
||||
background-color: orange;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.imageflow > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/***************** Info box (box containing features and questions ******************/
|
||||
|
||||
.featureinfobox {
|
||||
|
|
@ -394,9 +463,21 @@ img {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.osm-logo path {
|
||||
fill: #80cf36;
|
||||
fill: #7ebc6f;
|
||||
}
|
||||
|
||||
.wikipedialink {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.wikipedialink img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -412,24 +493,21 @@ img {
|
|||
|
||||
|
||||
.infoboxcontents {
|
||||
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.infboxcontents-left {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
.infboxcontents-right {
|
||||
padding: 0.1em;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
.infobox-information {
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.infobox-questions {
|
||||
max-width: 25em;
|
||||
display: inline-block;
|
||||
margin-top: 1em;
|
||||
background-color: #e5f5ff;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
margin-right: 1em;
|
||||
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MapComplete</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
|
||||
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
|
||||
|
|
@ -13,12 +14,15 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="messagesboxmobilewrapper">
|
||||
<div id="to-the-map">Return to map</div>
|
||||
<div id="messagesboxmobile-scroll">
|
||||
<div id="messagesboxmobile"> </div>
|
||||
</div>
|
||||
<div id="to-the-map">Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is blocking it.</div>
|
||||
</div>
|
||||
|
||||
<div id="topleft-tools">
|
||||
<div id="userbadge">
|
||||
Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is blocking it.
|
||||
</div>
|
||||
<br/>
|
||||
<div id="messagesbox">
|
||||
|
|
|
|||
3
index.ts
3
index.ts
|
|
@ -26,7 +26,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
|
|||
dryRun = true;
|
||||
// If you have a testfile somewhere, enable this to spoof overpass
|
||||
// This should be hosted independantly, e.g. with `cd assets; webfsd -p 8080` + a CORS plugin to disable cors rules
|
||||
Overpass.testUrl = "http://127.0.0.1:8080/test.json";
|
||||
// Overpass.testUrl = "http://127.0.0.1:8080/test.json";
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -124,7 +124,6 @@ addButton.Update();
|
|||
* Show the questions and information for the selected element on the leftMessage
|
||||
*/
|
||||
selectedElement.addCallback((data) => {
|
||||
console.log("Got selection");
|
||||
// Which is the applicable set?
|
||||
for (const layer of questSetToRender.layers) {
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link href="index.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="maindiv" style="border: 5px dashed red">Hello World</div>
|
||||
<div id="maindiv"e>Hello World</div>
|
||||
<script src="./test.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
24
test.ts
24
test.ts
|
|
@ -12,6 +12,8 @@ import {TagMapping, TagMappingOptions} from "./UI/TagMapping";
|
|||
import {CommonTagMappings} from "./Layers/CommonTagMappings";
|
||||
import {ImageCarousel} from "./UI/Image/ImageCarousel";
|
||||
import {WikimediaImage} from "./UI/Image/WikimediaImage";
|
||||
import {OsmImageUploadHandler} from "./Logic/OsmImageUploadHandler";
|
||||
import {DropDownUI} from "./UI/DropDownUI";
|
||||
|
||||
const centerMessage = new UIEventSource<string>("");
|
||||
|
||||
|
|
@ -60,11 +62,25 @@ const tags ={
|
|||
operator: "Natuurpunt Brugge",
|
||||
phone: "+32 50 82 26 97",
|
||||
website: "https://natuurpuntbrugge.be/schobbejakshoogte/",
|
||||
wikidata: "Q4499623",
|
||||
wikipedia: "nl:Schobbejakshoogte"
|
||||
// wikidata: "Q4499623",
|
||||
wikipedia: "nl:Schobbejakshoogte",
|
||||
};
|
||||
const tagsES = allElements.addElement({properties: tags});
|
||||
|
||||
new ImageCarousel(tagsES).AttachTo("maindiv").Activate();
|
||||
|
||||
// new WikimediaImage(new UIEventSource<string>("File:Brugge_cobblestone_path.jpg")).AttachTo("maindiv");
|
||||
/*
|
||||
new OsmImageUploadHandler(tagsES, osmConnection.userDetails, changes)
|
||||
.getUI().AttachTo("maindiv");
|
||||
|
||||
/*/
|
||||
|
||||
new FeatureInfoBox(
|
||||
tagsES,
|
||||
layer.elementsToShow,
|
||||
layer.questions,
|
||||
changes,
|
||||
osmConnection.userDetails
|
||||
).AttachTo("maindiv").Activate();
|
||||
//*/
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue