From 55ffa485792a763dec9d6ef9a0accc1304b8e477 Mon Sep 17 00:00:00 2001
From: Avijit Das <rdas9237@gmail.com>
Date: Tue, 21 Jan 2025 19:03:59 +0530
Subject: [PATCH] Fix: issue 10611 add copy id feature to Panoramax

---
 css/60_photos.css             | 18 +++++++++
 modules/services/panoramax.js |  2 +-
 modules/ui/photoviewer.js     | 70 ++++++++++++++++++++++++++++++++++-
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/css/60_photos.css b/css/60_photos.css
index d48d025cd2..f00aa8aaee 100644
--- a/css/60_photos.css
+++ b/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;
diff --git a/modules/services/panoramax.js b/modules/services/panoramax.js
index 14fb109151..4955adc69e 100644
--- a/modules/services/panoramax.js
+++ b/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);
diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js
index e14ea62d1f..4545da30dd 100644
--- a/modules/ui/photoviewer.js
+++ b/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')) {