midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Lots of styling, mobile friendliness, better UI flows

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-06-28 00:06:23 +02:00
parent 0b4016b65d
commit 57c9fcc5aa
28 changed files with 440 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

47
UI/DropDownUI.ts Normal file
View 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);
}
}
}

36
UI/FeatureInfoBox.ts
View file

@ -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();
}
}

4
UI/Image/ImageCarousel.ts
View file

@ -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);
}

67
UI/ImageUploadFlow.ts
View file

@ -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) {

4
UI/MessageBoxHandler.ts
View file

@ -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();
}

4
UI/QuestionPicker.ts
View file

@ -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) {
}

30
UI/SlideShow.ts
View file

@ -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);
}
}

15
UI/TagMapping.ts
View file

@ -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) {
}

20
UI/VerticalCombine.ts
View file

@ -2,20 +2,28 @@ import {UIElement} from "./UIElement";
export class VerticalCombine extends UIElement {
private _elements: UIElement[];
constructor(elements: UIElement[]) {
private _className: string;
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>";
}
}
return html;
}
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){