Skip to content
Permalink
Browse files
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
  • Loading branch information
mdelez committed Mar 22, 2022
1 parent 613100d commit b0d72a646efb53d00a1616beb90d5ac452284ffa
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 10 deletions.
@@ -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 -->
@@ -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;
}
}
}
}
@@ -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');
@@ -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
@@ -331,7 +331,7 @@ a,
}

&.horizontal {
height: $panel-height;
height: auto;
width: 100%;
left: 0;
flex-direction: row;

0 comments on commit b0d72a6

Please sign in to comment.