From 109978f779536bd10013d66169bdb57f20af3e04 Mon Sep 17 00:00:00 2001 From: mdelez <60604010+mdelez@users.noreply.github.com> Date: Thu, 9 Dec 2021 13:53:48 +0100 Subject: [PATCH] feat(still-image): display iiif url under the image caption (DEV-243) (#613) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../still-image/still-image.component.html | 10 +++++++++- .../still-image/still-image.component.scss | 20 ++++++++++++------- .../still-image/still-image.component.spec.ts | 16 ++++++++++++++- .../still-image/still-image.component.ts | 3 +-- .../resource/resource.component.html | 1 + .../workspace/resource/resource.component.ts | 19 +++++++++++++++--- 6 files changed, 55 insertions(+), 14 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 a57584e966..a35d674987 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 @@ -1,8 +1,16 @@
+
+
+ {{imageCaption}} +
+
+ {{iiifUrl}} +
+
- {{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 a8cd074068..1e509d556b 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 @@ -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%; + } + } + } + } } /* 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 39b084bb31..33b5ff97fc 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 @@ -74,6 +74,7 @@ function makeRegion(geomString: string[], iri: string): ReadResource { template: ` @@ -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']; 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 2bf5fbdfb0..a8da85d601 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 @@ -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(); @Output() regionAdded = new EventEmitter(); - 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 diff --git a/src/app/workspace/resource/resource.component.html b/src/app/workspace/resource/resource.component.html index 9c6713debf..a2877fc194 100644 --- a/src/app/workspace/resource/resource.component.html +++ b/src/app/workspace/resource/resource.component.html @@ -8,6 +8,7 @@ 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