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}}
+
+
+
-
{{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