Fix: issue 10611 add copy id feature to Panoramax

css/60_photos.css

@@ -47,6 +47,24 @@ li.list-item-photos.active:after {
     z-index: 50;
 }
 
+.photoviewer button.copy-id-btn {
+    border-radius: 0;
+    padding: 5px;
+    position: absolute;
+    left: 5px;
+    bottom: 5px;
+    z-index: 50;
+}
+.photoviewer .info{
+    border-radius: 5px;
+    padding: 6px;
+    position: absolute;
+    left: 25px;
+    bottom: 15px;
+    z-index: 100;
+    background-color: #ffffff;
+    color: #000;
+}
 .photoviewer button.set-photo-from-viewer {
     border-radius: 0;
     padding: 5px;

modules/services/panoramax.js

@@ -215,7 +215,7 @@ function loadTileDataToCache(data, tile, zoom) {
 async function getImageData(collection_id, image_id){
     const requestUrl = imageDataUrl.replace('{collectionId}', collection_id)
         .replace('{itemId}', image_id);
-
+        
     const response = await fetch(requestUrl, { method: 'GET' });
     if (!response.ok) {
         throw new Error(response.status + ' ' + response.statusText);

modules/ui/photoviewer.js

@@ -33,6 +33,74 @@ export function uiPhotoviewer(context) {
             })
             .append('div')
             .call(svgIcon('#iD-icon-close'));
+//add copy button
+selection
+    .append('button')
+
+    .attr('class', 'copy-id-btn')
+
+    .attr('title', 'copy id') // Or a more specific title like "Copy Image ID"
+
+    .call(svgIcon('#iD-operation-paste'))
+
+    .on('click',  function() {
+
+       // Determine the current service (Mapillary, Panoramax, etc.)
+
+       // add copy functionlity
+       let currentService;
+
+       if (services.mapillary.isViewerOpen()) {
+         currentService = 'mapillary';
+       } else if (services.panoramax.isViewerOpen()) {
+         currentService = 'panoramax';
+       } 
+       // Add more conditions for other services if needed
+
+       if (currentService) {
+         const service = services[currentService]; 
+         const activeImage = service.getActiveImage(); 
+
+         if (activeImage && activeImage.id) {
+           navigator.clipboard.writeText(activeImage.id)
+             .then(() => {
+               //  display a success message 
+
+                const info=document.querySelector('#info')
+
+                info.style.display="block"
+
+               // Remove the tooltip after a short delay
+
+                    setTimeout(() => {
+
+                        info.style.display="none"
+
+                    }, 1500); // Remove after 1.5 seconds
+
+             })
+             .catch(err => {
+               console.error('Failed to copy: ', err);
+             });
+         } else {
+           console.warn('No active image or ID available.');
+         }
+       } else {
+         console.warn('No active image service detected.');
+       }
+    });
+
+    selection
+
+    .append('span')
+
+    .attr('class','info')
+
+    .style('display', 'none')
+
+    .attr('id','info')
+
+    .text("Copied!")
 
         function preventDefault(d3_event) {
             d3_event.preventDefault();
@@ -73,7 +141,7 @@ export function uiPhotoviewer(context) {
             setPhotoFromViewerButton();
         });
 
-
+        
         function setPhotoFromViewerButton() {
             if (services.mapillary.isViewerOpen()) {
                 if (context.mode().id !== 'select' || !(layerStatus('mapillary') && getServiceId() === 'mapillary')) {