diff --git a/css/60_photos.css b/css/60_photos.css index 729f2ba6f..6cec267d6 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -33,6 +33,15 @@ z-index: 50; } +.photoviewer button.set-mapillary-image-ID-field { + border-radius: 0; + padding: 5px; + position: absolute; + left: 5px; + top: 5px; + z-index: 50; +} + .photoviewer button.resize-handle-xy { border-radius: 0; position: absolute; diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js index 0d1240ff8..6c1f87635 100644 --- a/modules/ui/photoviewer.js +++ b/modules/ui/photoviewer.js @@ -6,7 +6,7 @@ import { t } from '../core/localizer'; import { dispatch as d3_dispatch } from 'd3-dispatch'; import { svgIcon } from '../svg/icon'; import { utilGetDimensions } from '../util/dimensions'; -import { utilRebind } from '../util'; +import { utilRebind , utilGetSetValue } from '../util'; import { services } from '../services'; export function uiPhotoviewer(context) { @@ -61,6 +61,64 @@ export function uiPhotoviewer(context) { buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true }) ); + if (services.mapillary) { + addMapillayIdButton(); + } + + // add set-mapillary-button in mapillary viewer + function addMapillayIdButton () { + + const service = services.mapillary; + selection + .append('button') + .attr('class', 'set-mapillary-image-ID-field') + .on('click', function(d3_event) { + d3_event.preventDefault(); + const editorPane = d3_select('.entity-editor-pane'); + const inspector_wrap = d3_select('.inspector-wrap'); + const mailallary_image_ID_field = d3_select('.wrap-form-field-mapillary'); + const changeEvent = new Event('change'); + if (!editorPane) return; + + if (!editorPane.classed('hide')&&!inspector_wrap.classed('inspector-hidden')){ + // check if mapillary image id field exist + if (!mailallary_image_ID_field.empty()) { + // insert id + const image = service.getActiveImage(); + const fieldInput = d3_select('.wrap-form-field-mapillary .identifier'); + utilGetSetValue(fieldInput,image.id); + + // trigger change at field + fieldInput.node().focus(); + fieldInput.node().dispatchEvent(changeEvent); + } else { + // open the Mapillary field + const comboboxInput = d3_select('.value.combobox-input'); + const EnterEvent = new KeyboardEvent('keydown',{keyCode : 13}); + utilGetSetValue(comboboxInput,'Mapillary Image ID'); + comboboxInput.node().focus(); + comboboxInput.node().dispatchEvent(EnterEvent); + + // insert id + const image = service.getActiveImage(); + const fieldInput = d3_select('.wrap-form-field-mapillary .identifier'); + utilGetSetValue(fieldInput,image.id); + + // trigger change at field + fieldInput.node().focus(); + fieldInput.node().dispatchEvent(changeEvent); + } + } else { + /* eslint-disable no-console */ + console.log('editorPane hide'); + /* eslint-disable no-console */ + } + }) + .append('div') + .call(svgIcon('#fas-rotate')) + .attr('title', t('inspector.set_mapillary')); + } + function buildResizeListener(target, eventName, dispatch, options) { var resizeOnX = !!options.resizeOnX;