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

UX: add zoom-cursor to clickable images

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-09 16:04:35 +01:00
parent f95a1a8039
commit 6205da9d41
3 changed files with 17 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/UI/Image/ImageCarousel.ts
View file

@ -14,17 +14,24 @@ import AttributedImage from "./AttributedImage.svelte"
export class ImageCarousel extends Toggle {
constructor(
images: Store<{ id:string, key: string; url: string; provider: ImageProvider }[]>,
images: Store<{ id: string; key: string; url: string; provider: ImageProvider }[]>,
tags: Store<any>,
state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig, previewedImage?: UIEventSource<ProvidedImage> },
state: {
osmConnection?: OsmConnection
changes?: Changes
layout: LayoutConfig
previewedImage?: UIEventSource<ProvidedImage>
},
feature: Feature
) {
const uiElements = images.map(
(imageURLS: { key: string; url: string; provider: ImageProvider, id: string }[]) => {
(imageURLS: { key: string; url: string; provider: ImageProvider; id: string }[]) => {
const uiElements: BaseUIElement[] = []
for (const url of imageURLS) {
try {
let image: BaseUIElement = new SvelteUIElement(AttributedImage, {image: url})
let image: BaseUIElement = new SvelteUIElement(AttributedImage, {
image: url,
})
if (url.key !== undefined) {
image = new Combine([
@ -35,7 +42,7 @@ export class ImageCarousel extends Toggle {
]).SetClass("relative")
}
image
.SetClass("w-full block")
.SetClass("w-full block cursor-zoom-in")
.SetStyle("min-width: 50px; background: grey;")
.onClick(() => state.previewedImage.setData(url))
uiElements.push(image)