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

Fixed part of the special renderings

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-14 19:21:33 +02:00
parent eec762b71f
commit e480c97676
11 changed files with 156 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

29
UI/Image/ImageCarousel.ts
View file

@ -1,4 +1,3 @@
import {UIElement} from "../UIElement";
import {SlideShow} from "./SlideShow";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "../Base/Combine";
@ -8,33 +7,35 @@ import {ImgurImage} from "./ImgurImage";
import {MapillaryImage} from "./MapillaryImage";
import BaseUIElement from "../BaseUIElement";
import Img from "../Base/Img";
import Toggle from "../Input/Toggle";
export class ImageCarousel extends UIElement{
export class ImageCarousel extends Toggle {
public readonly slideshow: BaseUIElement;
constructor(images: UIEventSource<{key: string, url:string}[]>, tags: UIEventSource<any>) {
super(images);
const uiElements = images.map((imageURLS: {key: string, url:string}[]) => {
constructor(images: UIEventSource<{ key: string, url: string }[]>, tags: UIEventSource<any>) {
const uiElements = images.map((imageURLS: { key: string, url: string }[]) => {
const uiElements: BaseUIElement[] = [];
for (const url of imageURLS) {
let image = ImageCarousel.CreateImageElement(url.url)
if(url.key !== undefined){
if (url.key !== undefined) {
image = new Combine([
image,
new DeleteImage(url.key, tags).SetClass("delete-image-marker absolute top-0 left-0 pl-3")
]).SetClass("relative");
}
image
.SetClass("w-full block")
image
.SetClass("w-full block")
.SetStyle("min-width: 50px; background: grey;")
uiElements.push(image);
}
return uiElements;
});
this.slideshow = new SlideShow(uiElements);
super(
new SlideShow(uiElements).SetClass("w-full"),
undefined,
uiElements.map(els => els.length > 0)
)
this.SetClass("block w-full");
this.slideshow.SetClass("w-full");
}
/***
@ -57,8 +58,4 @@ export class ImageCarousel extends UIElement{
return new Img(url);
}
}
InnerRender() {
return this.slideshow;
}
}

46
UI/Image/ImageUploadFlow.ts
View file

@ -1,5 +1,4 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import State from "../../State";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
@ -13,22 +12,9 @@ import ImgurUploader from "../../Logic/Web/ImgurUploader";
import UploadFlowStateUI from "../BigComponents/UploadFlowStateUI";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
export class ImageUploadFlow extends UIElement {
private readonly _element: BaseUIElement;
private readonly _tags: UIEventSource<any>;
private readonly _selectedLicence: UIEventSource<string>;
private readonly _imagePrefix: string;
export class ImageUploadFlow extends Toggle {
constructor(tagsSource: UIEventSource<any>, imagePrefix: string = "image") {
super(State.state.osmConnection.userDetails);
this._imagePrefix = imagePrefix;
const uploader = new ImgurUploader(url => {
// A file was uploaded - we add it to the tags of the object
@ -50,9 +36,10 @@ export class ImageUploadFlow extends UIElement {
const t = Translations.t.image;
const label = new Combine([
Svg.camera_plus_svg().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"),
Translations.t.image.addPicture
]).SetClass("image-upload-flow-button")
Svg.camera_plus_ui().SetClass("block w-12 h-12 p-1"),
Translations.t.image.addPicture.Clone().SetClass("block align-middle mt-1 ml-3")
]).SetClass("p-2 border-4 border-black rounded-full text-4xl font-bold h-full align-middle w-full flex justify-center")
const fileSelector = new FileSelectorButton(label)
fileSelector.GetValue().addCallback(filelist => {
if (filelist === undefined) {
@ -60,13 +47,13 @@ export class ImageUploadFlow extends UIElement {
}
console.log("Received images from the user, starting upload")
const license = this._selectedLicence.data ?? "CC0"
const license = licensePicker.GetValue().data ?? "CC0"
const tags = this._tags.data;
const tags = tagsSource.data;
const layout = State.state.layoutToUse.data
const layout = State.state?.layoutToUse?.data
let matchingLayer: LayerConfig = undefined
for (const layer of layout.layers) {
for (const layer of layout?.layers ?? []) {
if (layer.source.osmTags.matchesProperties(tags)) {
matchingLayer = layer;
break;
@ -90,30 +77,27 @@ export class ImageUploadFlow extends UIElement {
const uploadFlow: BaseUIElement = new Combine([
fileSelector,
Translations.t.image.respectPrivacy.SetStyle("font-size:small;"),
Translations.t.image.respectPrivacy.Clone().SetStyle("font-size:small;"),
licensePicker,
uploadStateUi
]).SetClass("image-upload-flow")
.SetStyle("margin-top: 1em;margin-bottom: 2em;text-align: center;");
]).SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center")
const pleaseLoginButton = t.pleaseLogin.Clone()
.onClick(() => State.state.osmConnection.AttemptLogin())
.SetClass("login-button-friendly");
this._element = new Toggle(
super(
new Toggle(
/*We can show the actual upload button!*/
uploadFlow,
/* User not logged in*/ pleaseLoginButton,
State.state.osmConnection.userDetails.map(userinfo => userinfo.loggedIn)
State.state?.osmConnection?.isLoggedIn
),
undefined /* Nothing as the user badge is disabled*/, State.state.featureSwitchUserbadge
undefined /* Nothing as the user badge is disabled*/,
State.state.featureSwitchUserbadge
)
}
protected InnerRender(): string | BaseUIElement {
return this._element;
}
}

74
UI/Image/SlideShow.ts
View file

@ -1,41 +1,59 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import $ from "jquery"
export class SlideShow extends BaseUIElement {
private readonly _element: HTMLElement;
constructor(
embeddedElements: UIEventSource<BaseUIElement[]>) {
super()
const el = document.createElement("div")
this._element = el;
el.classList.add("slick-carousel")
require("slick-carousel")
// @ts-ignore
el.slick({
autoplay: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',
variableWidth: true,
centerMode: true,
centerPadding: "60px",
adaptive: true
});
embeddedElements.addCallbackAndRun(elements => {
for (const element of elements ?? []) {
element.SetClass("slick-carousel-content")
}
});
private readonly embeddedElements: UIEventSource<BaseUIElement[]>;
constructor(embeddedElements: UIEventSource<BaseUIElement[]>) {
super()
this.embeddedElements = embeddedElements;
}
protected InnerConstructElement(): HTMLElement {
return this._element;
const el = document.createElement("div")
el.classList.add("slic-carousel")
el.onchange = () => {
console.log("Parent is now ", el.parentElement)
}
const mutationObserver = new MutationObserver(mutations => {
console.log("Mutations are: ", mutations)
mutationObserver.disconnect()
require("slick-carousel")
// @ts-ignore
el.slick({
autoplay: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',
variableWidth: true,
centerMode: true,
centerPadding: "60px",
adaptive: true
});
})
mutationObserver.observe(el, {
childList: true,
characterData: true,
subtree: true
})
this.embeddedElements.addCallbackAndRun(elements => {
for (const element of elements ?? []) {
element.SetClass("slick-carousel-content")
el.appendChild(element.ConstructElement())
}
});
return el;
}
}