Skip to content
Permalink
Browse files
feat(still-image): display iiif url under the image caption (DEV-243) (
…#613)

* feat(still-image): adds iiif url under the image caption

* chore(still-image): makes the iiifUrl string a link that can be clicked on the open the image in a new tab

Co-authored-by: André Kilchenmann <github@milchkannen.ch>
  • Loading branch information
mdelez and kilchenmann committed Dec 9, 2021
1 parent 9a9da6a commit 109978f779536bd10013d66169bdb57f20af3e04
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 14 deletions.
@@ -1,8 +1,16 @@
<!-- openseadragon (osd) viewer -->
<div class="osd-container" [class.drawing]="regionDrawMode">
<div class="action horizontal top overlay">
<div class="captions-container">
<div class="top">
<span class="caption mat-caption">{{imageCaption}}</span>
</div>
<div class="bottom">
<a href="{{iiifUrl}}" target="_blank" class="iiif mat-caption">{{iiifUrl}}</a>
</div>
</div>
<!-- caption -->
<span class="caption mat-caption">{{imageCaption}}</span>

<span class="fill-remaining-space"></span>
<!-- image action tools e.g. zoom, rotate and flip -->
<span>
@@ -16,11 +16,6 @@ $bright: #ccc;
height: 300px;
}

// .content {
// // min-height: $full-height;
// height: 100%;
// width: 100%;

.osd-container {
color: $bright;
background-color: $dark;
@@ -33,9 +28,20 @@ $bright: #ccc;
&.fullscreen {
max-width: 100vw;
}
}

// }
.captions-container {
.top, .bottom {
text-align: left;
.iiif {
padding: 0px 0px 0px 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50%;
}
}
}
}
}

/*
@@ -74,6 +74,7 @@ function makeRegion(geomString: string[], iri: string): ReadResource {
template: `
<app-still-image [images]="stillImageFileRepresentations"
[imageCaption]="caption"
[iiifUrl]="iiifUrl"
[activateRegion]="inputActivateRegion"
[currentTab]="'annotations'"
(regionClicked)="regHovered($event)">
@@ -85,6 +86,7 @@ class TestHostComponent implements OnInit {

stillImageFileRepresentations: FileRepresentation[] = [];
caption = 'test image';
iiifUrl = 'https://iiif.test.dasch.swiss:443/0803/incunabula_0000003840.jp2/full/3210,5144/0/default.jpg';
inputActivateRegion: string;

activeRegion: string;
@@ -174,13 +176,25 @@ describe('StillImageComponent', () => {
const hostCompDe = testHostFixture.debugElement;
const stillImageComponentDe = hostCompDe.query(By.directive(StillImageComponent));

const captionDebugElement = stillImageComponentDe.query(By.css('.mat-caption'));
const captionDebugElement = stillImageComponentDe.query(By.css('.caption'));
const captionEle = captionDebugElement.nativeElement;

expect(captionEle.innerText).toEqual('test image');

});

it('should display the iiifUrl of the image', () => {

const hostCompDe = testHostFixture.debugElement;
const stillImageComponentDe = hostCompDe.query(By.directive(StillImageComponent));

const iiifUrlDebugElement = stillImageComponentDe.query(By.css('.iiif'));
const iiifUrlEle = iiifUrlDebugElement.nativeElement;

expect(iiifUrlEle.innerText).toEqual('https://iiif.test.dasch.swiss:443/0803/incunabula_0000003840.jp2/full/3210,5144/0/default.jpg');

});

it('should have 1 test region loaded (rectangle)', () => {

const osd = testHostComponent.osdViewerComp['_viewer'];
@@ -99,6 +99,7 @@ export class StillImageComponent implements OnChanges, OnDestroy {

@Input() images: FileRepresentation[];
@Input() imageCaption?: string;
@Input() iiifUrl?: string;
@Input() resourceIri: string;
@Input() project: string;
@Input() activateRegion?: string; // highlight a region
@@ -110,7 +111,6 @@ export class StillImageComponent implements OnChanges, OnDestroy {
@Output() regionClicked = new EventEmitter<string>();

@Output() regionAdded = new EventEmitter<string>();

regionDrawMode: Boolean = false; // stores whether viewer is currently drawing a region
private _regionDragInfo; // stores the information of the first click for drawing a region
private _viewer: OpenSeadragon.Viewer;
@@ -543,7 +543,6 @@ export class StillImageComponent implements OnChanges, OnDestroy {
const sipiBasePath = image.iiifBaseUrl + '/' + image.filename;
const width = image.dimX;
const height = image.dimY;

// construct OpenSeadragon tileSources according to https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#open
tileSources.push({
// construct IIIF tileSource configuration according to
@@ -8,6 +8,7 @@
<app-still-image #stillImage class="dsp-representation" *ngSwitchCase="representationConstants.stillImage"
[images]="representationsToDisplay"
[imageCaption]="(incomingResource ? resource.res.label + ': ' + incomingResource.res.label : resource.res.label)"
[iiifUrl]="iiifUrl"
[compoundNavigation]="compoundPosition"
[resourceIri]="incomingResource ? incomingResource.res.id : resource.res.id"
[project]="resource.res.attachedToProject"
@@ -67,6 +67,8 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {

selectedTabLabel: string;

iiifUrl: string;

// list of representations to be displayed
// --> TODO: will be expanded with | MovingImageRepresentation[] | AudioRepresentation[] etc.
representationsToDisplay: FileRepresentation[] = [];
@@ -215,6 +217,12 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
(response: ReadResource) => {
const res = new DspResource(response);
this.resource = res;

// if there is no incomingResource and the resource has a still image property, assign the iiiUrl to be passed as an input to the still-image component
if (!this.incomingResource && this.resource.res.properties[Constants.HasStillImageFileValue]){
this.iiifUrl = (this.resource.res.properties[Constants.HasStillImageFileValue][0] as ReadStillImageFileValue).fileUrl;
}

this.selectedTabLabel = this.resource.res.entityInfo?.classes[this.resource.res.type].label;

// get information about the logged-in user, if one is logged-in
@@ -275,6 +283,12 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
const res = new DspResource(response);

this.incomingResource = res;

// if the resource is a still image, assign the iiiUrl to be passed as an input to the still-image component
if (this.incomingResource.res.properties[Constants.HasStillImageFileValue]){
this.iiifUrl = (this.incomingResource.res.properties[Constants.HasStillImageFileValue][0] as ReadStillImageFileValue).fileUrl;
}

res.resProps = this.initProps(response);
res.systemProps = this.incomingResource.res.entityInfo.getPropertyDefinitionsByType(SystemPropertyDefinition);

@@ -363,7 +377,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
// --> TODO: should be a general object for all kind of representations
const representations: FileRepresentation[] = [];

// --> TODO: use a switch here to go throught the different representation types
// --> TODO: use a switch here to go through the different representation types
if (resource.res.properties[Constants.HasStillImageFileValue]) {
// --> TODO: check if resources is a StillImageRepresentation using the ontology responder (support for subclass relations required)
// resource has StillImageFileValues that are directly attached to it (properties)
@@ -476,8 +490,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
// request incoming regions --> TODO: add case to get incoming sequences in case of video and audio
if (resource.res.properties[Constants.HasStillImageFileValue] ||
resource.res.properties[Constants.HasDocumentFileValue] ||
resource.res.properties[Constants.HasAudioFileValue] ||
resource.res.properties[Constants.HasArchiveFileValue]) {
resource.res.properties[Constants.HasAudioFileValue]) {
// --> TODO: check if resources is a StillImageRepresentation using the ontology responder (support for subclass relations required)
// the resource is a StillImageRepresentation, check if there are regions pointing to it

0 comments on commit 109978f

Please sign in to comment.