revert field button

data/core.yaml

@@ -789,8 +789,6 @@ en:
     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_photo_from_viewer: "Store this photo on the currently selected map object"
-    set_photo_from_field: "Use the currently displayed photo"
-    show_photo_from_field: "Open image in viewer"
     show_photo_from_field_error: "Invalid ID"
   background:
     title: Background

modules/ui/fields/input.js

@@ -13,7 +13,6 @@ 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,
@@ -31,8 +30,6 @@ 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 mapillarySetButton = d3_select(null);
     var wrap = d3_select(null);
     var _lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue());
     var _entityIDs = [];
@@ -172,12 +169,8 @@ export function uiFieldText(field, context) {
                     change()();
                 });
         } else if (field.type === 'identifier' && field.urlFormat && field.pattern) {
+
             input.attr('type', 'text');
-
-            if (field.id === 'mapillary') {
-                updateMapillaryImageIDField();
-            }
-
             outlinkButton = wrap.selectAll('.foreign-id-permalink')
                 .data([0]);
 
@@ -362,116 +355,6 @@ export function uiFieldText(field, context) {
         if (format) input.attr('placeholder', format);
     }
 
-    function updateMapillaryImageIDField() {
-        const service = services.mapillary;
-        // set button
-        mapillarySetButton = wrap.selectAll('.mapillary-set-current')
-            .data([0]);
-
-        mapillarySetButton.enter()
-            .append('button')
-            .attr('class', 'form-field-button mapillary-set-current')
-            .call(svgIcon('#fas-rotate'))
-            .attr('title', t('inspector.set_photo_from_field'))
-            .on('click', function(d3_event) {
-                d3_event.preventDefault();
-                const image = service.getActiveImage();
-                if (!image) return;
-                if (image.id === utilGetSetValue(input).trim()) return;
-                service
-                    .ensureViewerLoaded(context)
-                    .then(function() {
-                        utilGetSetValue(input, image.id);
-                        change()();
-                    });
-                mapillarySetButton.node()?.blur();
-            })
-            .merge(mapillarySetButton)
-            .classed('disabled', _debounce(() => {
-                const image = service.getActiveImage();
-                if (!image) return true;
-                if (image.id === utilGetSetValue(input).trim()) return true;
-                return false;
-            }), 100);
-
-        // view button
-        mapillaryViewButton = wrap.selectAll('.mapillary-show-view')
-            .data([0]);
-
-        mapillaryViewButton.enter()
-            .append('button')
-            .attr('class', 'form-field-button mapillary-show-view')
-            .call(svgIcon('#fas-eye'))
-            .attr('title', t('inspector.show_photo_from_field'))
-            .on('click', function(d3_event) {
-                d3_event.preventDefault();
-                const isHidden = context.container()
-                    .select('.photoviewer')
-                    .selectAll('.photo-wrapper.mly-wrapper.hide')
-                    .size();
-
-                if (isHidden) {
-                    if (!utilGetSetValue(input).trim()) return;
-
-                    service
-                        .ensureViewerLoaded(context)
-                        .then(function() {
-                            service
-                                .selectImage(context, utilGetSetValue(input).trim())
-                                .showViewer(context);
-                        });
-                    mapillaryViewButton.classed('disabled', true);
-                } else {
-                    if (!utilGetSetValue(input).trim()) return;
-                    const image = service.getActiveImage();
-                    if (!image) return;
-                    if (image.id === utilGetSetValue(input).trim()) return;
-
-                    service
-                        .ensureViewerLoaded(context)
-                        .then(function() {
-                            service
-                                .selectImage(context, utilGetSetValue(input).trim());
-                        });
-                }
-                mapillaryViewButton.node()?.blur();
-            })
-            .merge(mapillaryViewButton)
-            .classed('disabled', _debounce(() => {
-                if (!utilGetSetValue(input).trim()) return true;
-                const isHidden = context.container()
-                        .select('.photoviewer')
-                        .selectAll('.photo-wrapper.mly-wrapper.hide')
-                        .size();
-                if (isHidden) return false;
-                const image = service.getActiveImage();
-                if (!image) return true;
-                if (image.id === utilGetSetValue(input).trim()) return true;
-                return false;
-            }, 100));
-
-        service.on('imageChanged', function() {
-            mapillarySetButton.classed('disabled', () => {
-                const image = service.getActiveImage();
-                if (!image) return true;
-                if (image.id === utilGetSetValue(input).trim()) return true;
-                return false;
-            });
-            mapillaryViewButton.classed('disabled', () => {
-                const isHidden = context.container()
-                    .select('.photoviewer')
-                    .selectAll('.photo-wrapper.mly-wrapper.hide')
-                    .size();
-                if (isHidden) return false;
-                if (!utilGetSetValue(input).trim()) return true;
-                const image = service.getActiveImage();
-                if (!image) return true;
-                if (image.id === utilGetSetValue(input).trim()) return true;
-                return false;
-            });
-        });
-    }
-
 
     function validIdentifierValueForLink() {
         const value = utilGetSetValue(input).trim();
@@ -642,32 +525,6 @@ export function uiFieldText(field, context) {
             outlinkButton.classed('disabled', disabled);
         }
 
-        if (mapillarySetButton && !mapillarySetButton.empty()) {
-            const service = services.mapillary;
-            mapillarySetButton.classed('disabled', () => {
-                const image = service.getActiveImage();
-                if (!image) return true;
-                if (image.id === utilGetSetValue(input).trim()) return true;
-                return false;
-            });
-        }
-
-        if (mapillaryViewButton && !mapillaryViewButton.empty()) {
-            const service = services.mapillary;
-            mapillaryViewButton.classed('disabled', () => {
-                if (!utilGetSetValue(input).trim()) return true;
-                const isHidden = context.container()
-                                    .select('.photoviewer')
-                                    .selectAll('.photo-wrapper.mly-wrapper.hide')
-                                    .size();
-                if (isHidden) return false;
-                const image = service.getActiveImage();
-                if (!image) return true;
-                if (image.id === utilGetSetValue(input).trim()) return true;
-                return false;
-            });
-        }
-
         if (!isMixed) {
             _lengthIndicator.update(tags[field.key]);
         }

modules/ui/photoviewer.js

@@ -65,48 +65,64 @@ export function uiPhotoviewer(context) {
         context.container().on('click.setPhotoFromViewer', setPhotoFromViewerButton);
 
         function setPhotoFromViewerButton() {
-            const inspectorWrap = d3_select('.inspector-wrap');
-            const editorPane = d3_select('.entity-editor-pane');
-            const presetPane = d3_select('.preset-list-pane');
-            const button = selection.selectAll('.set-photo-from-viewer').data([0]);
-            const hash = utilStringQs(window.location.hash);
-            let [serviceId, photoId] = [];
-            let photo_overlay = [];
-            if (hash.photo) {
-                [serviceId, photoId] = hash.photo.split('/');
+            services.mapillary.on('imageChanged', function() {
+                let activeImageId;
+                const layers = context.layers();
+                function layerStatus(which) {
+                    const layer = layers.layer(which);
+                    return layer.enabled();
+                }
+
+                const hash = utilStringQs(window.location.hash);
+                let serviceId;
+                if (hash.photo) {
+                    let result = hash.photo.split('/');
+                    serviceId = result[0];
+                }
+                activeImageId = services.mapillary.getActiveImage()?.id;
+                // check layer enabled && currently only support mapillary && editorpane open
+                if (layerStatus('mapillary') && serviceId === 'mapillary' && paneCheck()) {
+                    const fieldInput = d3_select('.wrap-form-field-mapillary .identifier');
+                    if (!fieldInput.empty()) {
+                        if (activeImageId === utilGetSetValue(fieldInput)) return buttonRemove();
+                    }
+                    const buttonWithoutClickEvent = buttonCreate();
+                    buttonWithoutClickEvent.on('click', function () {
+                        setPhotoFromMapillaryViewer();
+                        buttonRemove();
+                    });
+                } else {
+                    buttonRemove();
+                }
+            });
+
+            function paneCheck() {
+                const inspectorWrap = d3_select('.inspector-wrap');
+                const editorPane = d3_select('.entity-editor-pane');
+                const presetPane = d3_select('.preset-list-pane');
+
+                return !inspectorWrap.classed('inspector-hidden') &&
+                        !editorPane.classed('hide') &&
+                        presetPane.classed('hide') &&
+                        context.mode().id === 'select';
             }
 
-            if (hash.photo_overlay) {
-                photo_overlay = hash.photo_overlay.split(',');
-            }
-
-            // check photoviewer open && photo and layer match && currently only support mapillary && editorpane open
-            if (serviceId &&
-                photo_overlay.includes(serviceId) &&
-                serviceId === 'mapillary' &&
-                !inspectorWrap.classed('inspector-hidden') &&
-                !editorPane.classed('hide') &&
-                presetPane.classed('hide') &&
-                context.mode().id === 'select') {
-                buttonCreate();
-                context.features().on('change.setPhotoFromViewerButtonCreate', buttonCreate);
-            } else {
-                // remove listener and button
-                context.features().on('change.setPhotoFromViewerButtonCreate', null);
-                const button = selection.selectAll('.set-photo-from-viewer');
-                button.remove();
-            }
 
             function buttonCreate() {
-                button.enter()
+                const button = selection.selectAll('.set-photo-from-viewer').data([0]);
+                const buttonEnter = button.enter()
                     .append('button')
                     .attr('class', 'set-photo-from-viewer')
-                    .on('click', function () {
-                        if (serviceId === 'mapillary' && services.mapillary) { setPhotoFromMapillaryViewer(); }
-                    })
                     .append('div')
                     .call(svgIcon('#iD-operation-merge'))
                     .attr('title', t('inspector.set_photo_from_viewer'));
+
+                return buttonEnter;
+            }
+
+            function buttonRemove() {
+                const button = selection.selectAll('.set-photo-from-viewer').data([0]);
+                button?.remove();
             }
         }