From 87f001474f41730e807730e1cbb8cf712cece964 Mon Sep 17 00:00:00 2001
From: NaVis0mple <109860906+NaVis0mple@users.noreply.github.com>
Date: Wed, 20 Dec 2023 20:05:49 +0800
Subject: [PATCH] Add set button and view button at mapillary field (#9339)

more info see https://github.com/openstreetmap/iD/issues/6196#issuecomment-751460516
I do the b. (set button) and c. (view button)
order: click OSM object -> click mapillary layer will close the OSM input field. need to do in reverse order
---
 data/core.yaml             |  2 ++
 modules/ui/fields/input.js | 60 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/data/core.yaml b/data/core.yaml
index 864efd53d..b07669557 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -786,6 +786,8 @@ en:
       inch: in
     max_length_reached: "This string is longer than the maximum length of {maxChars} characters. Anything exceeding that length will be truncated."
     set_today: "Sets the value to today."
+    set_mapillary: "Sets the current ID of mapillary"
+    show_mapillary_from_field: "Show image on viewer"
   background:
     title: Background
     description: Background Settings
diff --git a/modules/ui/fields/input.js b/modules/ui/fields/input.js
index c5061b5ea..107e9e10f 100644
--- a/modules/ui/fields/input.js
+++ b/modules/ui/fields/input.js
@@ -13,6 +13,7 @@ import { isColourValid } from '../../osm/tags';
 import { uiLengthIndicator } from '..';
 import { uiTooltip } from '../tooltip';
 import { isEqual } from 'lodash-es';
+import { services } from '../../services';
 
 export {
     uiFieldText as uiFieldColour,
@@ -30,6 +31,7 @@ export function uiFieldText(field, context) {
     var dispatch = d3_dispatch('change');
     var input = d3_select(null);
     var outlinkButton = d3_select(null);
+    var mapillaryViewButton = d3_select(null);
     var wrap = d3_select(null);
     var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue());
     var _entityIDs = [];
@@ -169,8 +171,60 @@ export function uiFieldText(field, context) {
                     change()();
                 });
         } else if (field.type === 'identifier' && field.urlFormat && field.pattern) {
-
             input.attr('type', 'text');
+
+            if (field.id==='mapillary'){
+                const service = services.mapillary;
+                // set button
+                wrap.selectAll('.mapillary-set-current')
+                    .data([0])
+                    .enter()
+                    .append('button')
+                    .attr('class', 'form-field-button mapillary-set-current')
+                    .call(svgIcon('#fas-rotate'))
+                    .call(uiTooltip().title(() => t.append('inspector.set_mapillary')))
+                    .on('click', function(d3_event) {
+                        d3_event.preventDefault();
+                        const image = service.getActiveImage();
+                        if (!image) return;
+                        service
+                            .ensureViewerLoaded(context)
+                            .then(function() {
+                                service
+                                    .showViewer(context)
+                                    .selectImage(context, image.id)
+                                    .initViewer(context);
+                                utilGetSetValue(input, image.id);
+                                change()();
+                            });
+                    })
+                    .merge(wrap.selectAll('.mapillary-set-current'))
+                    .classed('disabled', () => !service.getActiveImage());
+                // view button
+                mapillaryViewButton = wrap.selectAll('.mapillary-show-view')
+                    .data([0])
+                    .enter()
+                    .append('button')
+                    .attr('class', 'form-field-button mapillary-show-view')
+                    .call(svgIcon('#fas-eye'))
+                    .call(uiTooltip().title(() => t.append('inspector.show_mapillary_from_field')))
+                    .on('click', function(d3_event) {
+                        d3_event.preventDefault();
+                        if ( !utilGetSetValue(input).trim()) return;
+                        service
+                            .ensureViewerLoaded(context)
+                            .then(function() {
+                                service
+                                    .showViewer(context)
+                                    .selectImage(context, utilGetSetValue(input).trim())
+                                    .initViewer(context);
+                            });
+
+                    })
+                    .merge(wrap.selectAll('.mapillary-show-view'))
+                    .classed('disabled', () => !utilGetSetValue(input).trim());
+            }
+
             outlinkButton = wrap.selectAll('.foreign-id-permalink')
                 .data([0]);
 
@@ -525,6 +579,10 @@ export function uiFieldText(field, context) {
             outlinkButton.classed('disabled', disabled);
         }
 
+        if (mapillaryViewButton && !mapillaryViewButton.empty()) {
+            mapillaryViewButton.classed('disabled', !utilGetSetValue(input).trim());
+        }
+
         if (!isMixed) {
             _lengthIndicator.update(tags[field.key]);
         }