Merged in task/dspace-cris-2023_02_x/IIIF-148 (pull request DSpace#3233)

[IIIF-148] Add canvas index param

Approved-by: Francesco Molinaro

Author: atarix83

src/app/item-page/mirador-viewer/mirador-viewer.component.html

@@ -1,4 +1,6 @@
 <p class="full-text-op">{{'iiifviewer.fullscreen.notice' | translate}}</p>
 <p *ngIf="!isViewerAvailable" id="viewer-message">{{viewerMessage}}</p>
-<iframe title="Mirador Viewer" allowtransparency="true" *ngIf="isViewerAvailable" [src]="iframeViewerUrl | async" id="mirador-viewer"></iframe>
+<ng-container *ngVar="(iframeViewerUrl | async) as iframeUrl">
+  <iframe title="Mirador Viewer" allowtransparency="true" *ngIf="isViewerAvailable && iframeUrl" [src]="(iframeUrl) | dsSafeUrl" id="mirador-viewer"></iframe>
+</ng-container>
 

src/app/item-page/mirador-viewer/mirador-viewer.component.spec.ts

@@ -13,6 +13,8 @@ import { of as observableOf } from 'rxjs';
 import { MiradorViewerService } from './mirador-viewer.service';
 import { HostWindowService } from '../../shared/host-window.service';
 import { BundleDataService } from '../../core/data/bundle-data.service';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
 
 
 function getItem(metadata: MetadataMap) {
@@ -44,7 +46,7 @@ describe('MiradorViewerComponent with search', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
@@ -65,6 +67,7 @@ describe('MiradorViewerComponent with search', () => {
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
       comp.searchable = true;
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 
@@ -107,7 +110,7 @@ describe('MiradorViewerComponent with multiple images', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
@@ -129,6 +132,7 @@ describe('MiradorViewerComponent with multiple images', () => {
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
       comp.searchable = false;
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 
@@ -167,7 +171,7 @@ describe('MiradorViewerComponent with a single image', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
@@ -188,6 +192,7 @@ describe('MiradorViewerComponent with a single image', () => {
       fixture = TestBed.createComponent(MiradorViewerComponent);
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 
@@ -220,7 +225,7 @@ describe('MiradorViewerComponent in development mode', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} }
       ],
@@ -241,6 +246,7 @@ describe('MiradorViewerComponent in development mode', () => {
       fixture = TestBed.createComponent(MiradorViewerComponent);
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 

src/app/item-page/mirador-viewer/mirador-viewer.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Item } from '../../core/shared/item.model';
 import { environment } from '../../../environments/environment';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
@@ -36,6 +36,11 @@ export class MiradorViewerComponent implements OnInit {
    */
   @Input() canvasId: string;
 
+  /**
+   * Is used as canvas index of the element to show.
+   */
+  @Input() canvasIndex: string;
+
   /**
    * Hides embedded viewer in dev mode.
    */
@@ -44,7 +49,7 @@ export class MiradorViewerComponent implements OnInit {
   /**
    * The url for the iframe.
    */
-  iframeViewerUrl: Observable<SafeResourceUrl>;
+  iframeViewerUrl: Observable<string>;
 
   /**
    * Sets the viewer to show or hide thumbnail side navigation menu.
@@ -70,7 +75,7 @@ export class MiradorViewerComponent implements OnInit {
    * Creates the url for the Mirador iframe. Adds parameters for the displaying the search panel, query results,
    * or  multi-page thumbnail navigation.
    */
-  setURL() {
+  getURL() {
     // The path to the REST manifest endpoint.
     const manifestApiEndpoint = encodeURIComponent(environment.rest.baseUrl + '/iiif/'
       + this.object.id + '/manifest');
@@ -98,9 +103,11 @@ export class MiradorViewerComponent implements OnInit {
     if (this.canvasId) {
       viewerPath += `&canvasId=${this.canvasId}`;
     }
+    if (this.canvasIndex) {
+      viewerPath += `&canvasIndex=${parseInt(this.canvasIndex, 10) - 1}`;
+    }
 
-    // TODO: Should the query term be trusted here?
-    return this.sanitizer.bypassSecurityTrustResourceUrl(viewerPath);
+    return viewerPath;
   }
 
   ngOnInit(): void {
@@ -130,7 +137,7 @@ export class MiradorViewerComponent implements OnInit {
         const observable = of('');
         this.iframeViewerUrl = observable.pipe(
           map((val) => {
-            return this.setURL();
+            return this.getURL();
           })
         );
       } else {
@@ -144,7 +151,7 @@ export class MiradorViewerComponent implements OnInit {
             if (c > 1) {
               this.multi = true;
             }
-            return this.setURL();
+            return this.getURL();
           })
         );
       }

src/app/item-page/mirador-viewer/mirador-viewer.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MiradorViewerComponent } from './mirador-viewer.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
 
 
 @NgModule({
@@ -13,7 +14,8 @@ import { TranslateModule } from '@ngx-translate/core';
   ],
   imports: [
     CommonModule,
-    TranslateModule
+    TranslateModule,
+    SharedModule
   ]
 })
 export class MiradorViewerModule { }

src/mirador-viewer/config.default.js

@@ -28,6 +28,7 @@ const multi = params.get('multi');
 const notMobile = params.get('notMobile');
 const isDownloadPluginEnabled = (params.get('enableDownloadPlugin') === 'true');
 const canvasId = params.get('canvasId');
+const canvasIndex = params.get('canvasIndex');
 
 let windowSettings = {};
 let sideBarPanel = 'info';
@@ -62,6 +63,8 @@ windowSettings.manifestId = manifest;
   if (canvasId && canvasId !== 'null') {
     windowSettings.canvasId =
       `${(manifest.replace(MANIFEST_URL_PART, ''))}/canvas/${canvasId}`;
+  } else if (canvasIndex) {
+    windowSettings.canvasIndex = parseInt(canvasIndex);
   }
 })();