Merge develop

src/UI/SpecialVisualizations.ts

@@ -58,18 +58,6 @@ import LanguagePicker from "./LanguagePicker"
 import Link from "./Base/Link"
 import LayerConfig from "../Models/ThemeConfig/LayerConfig"
 import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig"
-import NearbyImages, {
-    NearbyImageOptions,
-    P4CPicture,
-    SelectOneNearbyImage,
-} from "./Popup/NearbyImages"
-import { Tag } from "../Logic/Tags/Tag"
-import ChangeTagAction from "../Logic/Osm/Actions/ChangeTagAction"
-import { And } from "../Logic/Tags/And"
-import { SaveButton } from "./Popup/SaveButton"
-import Lazy from "./Base/Lazy"
-import { CheckBox } from "./Input/Checkboxes"
-import Slider from "./Input/Slider"
 import { OsmTags, WayId } from "../Models/OsmFeature"
 import MoveWizard from "./Popup/MoveWizard"
 import SplitRoadWizard from "./Popup/SplitRoadWizard"
@@ -83,19 +71,17 @@ import DeleteWizard from "./Popup/DeleteFlow/DeleteWizard.svelte"
 import { OpenJosm } from "./BigComponents/OpenJosm"
 import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
 import FediverseValidator from "./InputElement/Validators/FediverseValidator"
+import SendEmail from "./Popup/SendEmail.svelte"
+import NearbyImages from "./Popup/NearbyImages.svelte"
+import NearbyImagesCollapsed from "./Popup/NearbyImagesCollapsed.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
     args: { name: string; defaultValue?: string; doc: string; required?: boolean }[] = [
         {
             name: "mode",
-            defaultValue: "expandable",
-            doc: "Indicates how this component is initialized. Options are: \n\n- `open`: always show and load the pictures\n- `collapsable`: show the pictures, but a user can collapse them\n- `expandable`: shown by default; but a user can collapse them.",
-        },
-        {
-            name: "mapillary",
-            defaultValue: "true",
-            doc: "If 'true', includes a link to mapillary on this location.",
+            defaultValue: "closed",
+            doc: "Either `open` or `closed`. If `open`, then the image carousel will always be shown",
         },
     ]
     docs =
@@ -104,110 +90,21 @@ class NearbyImageVis implements SpecialVisualization {
 
     constr(
         state: SpecialVisualizationState,
-        tagSource: UIEventSource<Record<string, string>>,
+        tags: UIEventSource<Record<string, string>>,
         args: string[],
         feature: Feature,
         layer: LayerConfig
     ): BaseUIElement {
-        const t = Translations.t.image.nearbyPictures
-        const mode: "open" | "expandable" | "collapsable" = <any>args[0]
+        const isOpen = args[0] === "open"
         const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
-        const id: string = tagSource.data["id"]
-        const canBeEdited: boolean = !!id?.match("(node|way|relation)/-?[0-9]+")
-        const selectedImage = new UIEventSource<P4CPicture>(undefined)
-
-        let saveButton: BaseUIElement = undefined
-        if (canBeEdited) {
-            const confirmText: BaseUIElement = new SubstitutedTranslation(
-                t.confirm,
-                tagSource,
-                state
-            )
-
-            const onSave = async () => {
-                console.log("Selected a picture...", selectedImage.data)
-                const osmTags = selectedImage.data.osmTags
-                const tags: Tag[] = []
-                for (const key in osmTags) {
-                    tags.push(new Tag(key, osmTags[key]))
-                }
-                await state?.changes?.applyAction(
-                    new ChangeTagAction(id, new And(tags), tagSource.data, {
-                        theme: state?.layout.id,
-                        changeType: "link-image",
-                    })
-                )
-            }
-            saveButton = new SaveButton(selectedImage, state, confirmText, t.noImageSelected)
-                .onClick(onSave)
-                .SetClass("flex justify-end")
-        }
-
-        const nearby = new Lazy(() => {
-            const towardsCenter = new CheckBox(t.onlyTowards, false)
-
-            const maxSearchRadius = 100
-            const stepSize = 10
-            const defaultValue = Math.floor(maxSearchRadius / (2 * stepSize)) * stepSize
-            const fromOsmPreferences = state?.osmConnection
-                ?.GetPreference("nearby-images-radius", "" + defaultValue)
-                .sync(
-                    (s) => Number(s),
-                    [],
-                    (i) => "" + i
-                )
-            const radiusValue = new UIEventSource(fromOsmPreferences.data)
-            radiusValue.addCallbackAndRunD((v) => fromOsmPreferences.setData(v))
-
-            const radius = new Slider(stepSize, maxSearchRadius, {
-                value: radiusValue,
-                step: 10,
-            })
-            const alreadyInTheImage = AllImageProviders.LoadImagesFor(tagSource)
-            const options: NearbyImageOptions & { value } = {
-                lon,
-                lat,
-                searchRadius: maxSearchRadius,
-                shownRadius: radius.GetValue(),
-                value: selectedImage,
-                blacklist: alreadyInTheImage,
-                towardscenter: towardsCenter.GetValue(),
-                maxDaysOld: 365 * 3,
-            }
-            const slideshow = canBeEdited
-                ? new SelectOneNearbyImage(options, state.indexedFeatures)
-                : new NearbyImages(options, state.indexedFeatures)
-            const controls = new Combine([
-                towardsCenter,
-                new Combine([
-                    new VariableUiElement(
-                        radius.GetValue().map((radius) => t.withinRadius.Subs({ radius }))
-                    ),
-                    radius,
-                ]).SetClass("flex justify-between"),
-            ]).SetClass("flex flex-col")
-            return new Combine([
-                slideshow,
-                controls,
-                saveButton,
-                new MapillaryLinkVis().constr(state, tagSource, [], feature).SetClass("mt-6"),
-            ])
+        return new SvelteUIElement(isOpen ? NearbyImages : NearbyImagesCollapsed, {
+            tags,
+            state,
+            lon,
+            lat,
+            feature,
+            layer,
         })
-
-        let withEdit: BaseUIElement = nearby
-        if (canBeEdited) {
-            withEdit = new Combine([t.hasMatchingPicture, nearby]).SetClass("flex flex-col")
-        }
-
-        if (mode === "open") {
-            return withEdit
-        }
-        const toggleState = new UIEventSource<boolean>(mode === "collapsable")
-        return new Toggle(
-            new Combine([new Title(t.title), withEdit]),
-            new Title(t.browseNearby).onClick(() => toggleState.setData(true)),
-            toggleState
-        )
     }
 }
 
@@ -1237,28 +1134,12 @@ export default class SpecialVisualizations {
                     },
                 ],
                 constr(__, tags, args) {
-                    return new VariableUiElement(
-                        tags.map((tags) => {
-                            const [to, subject, body, button_text] = args.map((str) =>
-                                Utils.SubstituteKeys(str, tags)
-                            )
-                            const url =
-                                "mailto:" +
-                                to +
-                                "?subject=" +
-                                encodeURIComponent(subject) +
-                                "&body=" +
-                                encodeURIComponent(body)
-                            return new SubtleButton(Svg.envelope_svg(), button_text, {
-                                url,
-                            })
-                        })
-                    )
+                    return new SvelteUIElement(SendEmail, { args, tags })
                 },
             },
             {
                 funcName: "link",
-                docs: "Construct a link. By using the 'special' visualisation notation, translation should be easier",
+                docs: "Construct a link. By using the 'special' visualisation notation, translations should be easier",
                 args: [
                     {
                         name: "text",