From b0d72a646efb53d00a1616beb90d5ac452284ffa Mon Sep 17 00:00:00 2001
From: mdelez <60604010+mdelez@users.noreply.github.com>
Date: Tue, 22 Mar 2022 15:52:41 +0100
Subject: [PATCH] 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
---
.../still-image/still-image.component.html | 13 +++++++++-
.../still-image/still-image.component.scss | 25 ++++++++++++++-----
.../still-image/still-image.component.spec.ts | 2 +-
.../still-image/still-image.component.ts | 14 ++++++++++-
src/assets/style/_elements.scss | 2 +-
5 files changed, 46 insertions(+), 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
index a35d674987..5587fa61a1 100644
--- 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 @@
{{imageCaption}}
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
index 1e509d556b..8a8496dd6c 100644
--- 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
index 80f3716ddd..117cf22da5 100644
--- 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
index 40e92dd24b..4332b749b2 100644
--- 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
index eb22b2f3dc..31a5d484e2 100644
--- 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;