feat(still-image): IIIF URL copy button (DEV-524) (#690)

* feat(copy-button): add copy button next to iiif url * refactor(still-image): rename html class name * feat(still-image): use notification service to notify user that the IIIF URL has been copied to the clipboard
dasch-swiss · Mar 22, 2022 · b0d72a6 · b0d72a6
1 parent 613100d
commit b0d72a6
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 10 deletions.
diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.html b/src/app/workspace/resource/representation/still-image/still-image.component.html
@@ -6,7 +6,18 @@
                 <span class="caption mat-caption">{{imageCaption}}</span>
             </div>
             <div class="bottom">
-                <a href="{{iiifUrl}}" target="_blank" class="iiif mat-caption">{{iiifUrl}}</a>
+                <div class="iiif-url">
+                    <a href="{{iiifUrl}}" target="_blank" class="mat-caption">{{iiifUrl}}</a>
+                </div>
+                <div class="copy-button">
+                    <button
+                        mat-icon-button
+                        matTooltip="Copy IIIF URL to clipboard"
+                        [cdkCopyToClipboard]="iiifUrl"
+                        (click)="openSnackBar('IIIF URL copied to clipboard!')">
+                        <mat-icon>content_copy</mat-icon>
+                    </button>
+                </div>
             </div>
         </div>
         <!-- caption -->

diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.scss b/src/app/workspace/resource/representation/still-image/still-image.component.scss
@@ -32,12 +32,25 @@ $bright: #ccc;
     .captions-container {
       .top, .bottom {
         text-align: left;
-        .iiif {
-          padding: 0px 0px 0px 16px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          max-width: 50%;
+        .iiif-url, .copy-button {
+          display: inline-block;
+        }
+        .iiif-url {
+          a {
+            padding: 0px 0px 0px 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 50%;
+          }
+        }
+        .copy-button button {
+          background: none;
+          border: none;
+          color: white;
+          mat-icon {
+            font-size: 16px;
+          }
         }
       }
     }

diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.spec.ts b/src/app/workspace/resource/representation/still-image/still-image.component.spec.ts
@@ -188,7 +188,7 @@ describe('StillImageComponent', () => {
         const hostCompDe = testHostFixture.debugElement;
         const stillImageComponentDe = hostCompDe.query(By.directive(StillImageComponent));
 
-        const iiifUrlDebugElement = stillImageComponentDe.query(By.css('.iiif'));
+        const iiifUrlDebugElement = stillImageComponentDe.query(By.css('.iiif-url a'));
         const iiifUrlEle = iiifUrlDebugElement.nativeElement;
 
         expect(iiifUrlEle.innerText).toEqual('https://iiif.test.dasch.swiss:443/0803/incunabula_0000003840.jp2/full/3210,5144/0/default.jpg');

diff --git a/src/app/workspace/resource/representation/still-image/still-image.component.ts b/src/app/workspace/resource/representation/still-image/still-image.component.ts
@@ -26,6 +26,7 @@ import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 import { DspCompoundPosition } from '../../dsp-resource';
 import { FileRepresentation } from '../file-representation';
 import * as OpenSeadragon from 'openseadragon';
+import { NotificationService } from 'src/app/main/services/notification.service';
 
 
 /**
@@ -117,7 +118,11 @@ export class StillImageComponent implements OnChanges, OnDestroy {
     private _regions: PolygonsForRegion = {};
 
     constructor(
-        @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection, private _elementRef: ElementRef, private _dialog: MatDialog, private _errorHandler: ErrorHandlerService
+        @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
+        private _elementRef: ElementRef,
+        private _dialog: MatDialog,
+        private _errorHandler: ErrorHandlerService,
+        private _notification: NotificationService
     ) {
         OpenSeadragon.setString('Tooltips.Home', '');
         OpenSeadragon.setString('Tooltips.ZoomIn', '');
@@ -306,6 +311,13 @@ export class StillImageComponent implements OnChanges, OnDestroy {
         this._viewer.clearOverlays();
     }
 
+    /**
+    * display message to confirm the copy of the citation link (ARK URL)
+    */
+    openSnackBar(message: string) {
+        this._notification.openSnackBar(message);
+    }
+
     /**
      * opens the dialog to enter further properties for the region after it has been drawn and calls the function to upload the region after confirmation
      * @param startPoint the start point of the drawing

diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss
@@ -331,7 +331,7 @@ a,
     }
 
     &.horizontal {
-      height: $panel-height;
+      height: auto;
       width: 100%;
       left: 0;
       flex-direction: row;