Merged in task/ux-plus-2023_02_x/IIIF-148 (pull request #55)

Task/ux plus 2023 02 x/IIIF-148

Approved-by: Giuseppe Digilio

Author: FrancescoMolinaro

package.json

@@ -84,8 +84,8 @@
     "@angular/platform-browser-dynamic": "^15.2.10",
     "@angular/platform-server": "^15.2.10",
     "@angular/router": "^15.2.10",
-    "@babel/runtime": "7.26.0",
     "@asymmetrik/ngx-leaflet": "^15.0.0",
+    "@babel/runtime": "7.26.0",
     "@datadog/browser-rum": "^5.7.0",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
@@ -146,14 +146,15 @@
     "ng2-pdfjs-viewer": "^15.0.0",
     "ngx-infinite-scroll": "^15.0.0",
     "ngx-pagination": "6.0.3",
+    "ngx-quill": "21.0.2",
     "ngx-skeleton-loader": "^7.0.0",
     "nouislider": "^15.8.1",
     "pem": "1.14.8",
-    "ngx-quill": "21.0.2",
     "prop-types": "^15.8.1",
     "quill": "1.3.7",
     "quill-emoji": "^0.2.0",
     "react-copy-to-clipboard": "^5.1.0",
+    "redux-saga": "^1.3.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.0",
     "sanitize-html": "^2.14.0",
@@ -221,8 +222,8 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "ngx-export-as": "~1.15.1",
     "ng-mocks": "^14.13.2",
+    "ngx-export-as": "~1.15.1",
     "ngx-mask": "13.1.7",
     "nodemon": "^2.0.22",
     "postcss": "^8.5",

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

@@ -4,7 +4,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import { createRelationshipsObservable } from '../simple/item-types/shared/item.component.spec';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, PLATFORM_ID } from '@angular/core';
 import { MetadataMap } from '../../core/shared/metadata.models';
 import { Item } from '../../core/shared/item.model';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -13,6 +13,7 @@ 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 { NativeWindowRef, NativeWindowService } from '../../core/services/window.service';
 
 
 function getItem(metadata: MetadataMap) {
@@ -48,7 +49,9 @@ describe('MiradorViewerComponent with search', () => {
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
-        { provide: HostWindowService, useValue: mockHostWindowService }
+        { provide: HostWindowService, useValue: mockHostWindowService },
+        { provide: NativeWindowService, useValue: new NativeWindowRef() },
+        { provide: Location, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MiradorViewerComponent, {
@@ -111,7 +114,9 @@ describe('MiradorViewerComponent with multiple images', () => {
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
-        { provide: HostWindowService, useValue: mockHostWindowService  }
+        { provide: HostWindowService, useValue: mockHostWindowService  },
+        { provide: NativeWindowService, useValue: new NativeWindowRef() },
+        { provide: Location, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MiradorViewerComponent, {
@@ -171,7 +176,9 @@ describe('MiradorViewerComponent with a single image', () => {
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
-        { provide: HostWindowService, useValue: mockHostWindowService }
+        { provide: HostWindowService, useValue: mockHostWindowService },
+        { provide: NativeWindowService, useValue: new NativeWindowRef() },
+        { provide: Location, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MiradorViewerComponent, {
@@ -200,7 +207,58 @@ describe('MiradorViewerComponent with a single image', () => {
     it('should call mirador service image count', () => {
       expect(viewerService.getImageCount).toHaveBeenCalled();
     });
+  });
+
+});
 
+describe('MiradorViewerComponent on browser in prod mode', () => {
+  let comp: MiradorViewerComponent;
+  let fixture: ComponentFixture<MiradorViewerComponent>;
+  const viewerService = jasmine.createSpyObj('MiradorViewerService', ['showEmbeddedViewer', 'getImageCount']);
+
+  beforeEach(waitForAsync(() => {
+    viewerService.showEmbeddedViewer.and.returnValue(true);
+    viewerService.getImageCount.and.returnValue(observableOf(1));
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [MiradorViewerComponent],
+      providers: [
+        { provide: BitstreamDataService, useValue: {} },
+        { provide: BundleDataService, useValue: {} },
+        { provide: HostWindowService, useValue: mockHostWindowService },
+        { provide: NativeWindowService, useValue: new NativeWindowRef() },
+        { provide: Location, useValue: {} },
+        { provide: PLATFORM_ID, useValue: 'browser' },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(MiradorViewerComponent, {
+      set: {
+        providers: [
+          { provide: MiradorViewerService, useValue: viewerService }
+        ]
+      }
+    }).compileComponents();
+  }));
+
+  describe('viewer init', () => {
+    beforeEach(waitForAsync(() => {
+      fixture = TestBed.createComponent(MiradorViewerComponent);
+      comp = fixture.componentInstance;
+      comp.object = getItem(noMetadata);
+      fixture.detectChanges();
+    }));
+
+    it('should set iframe listener', () => {
+      const compAsAny = comp as any;
+      spyOn(compAsAny._window.nativeWindow, 'addEventListener');
+      compAsAny.ngOnInit();
+      expect(compAsAny._window.nativeWindow.addEventListener).toHaveBeenCalled();
+    });
   });
 
 });
@@ -222,15 +280,17 @@ describe('MiradorViewerComponent in development mode', () => {
       })],
       declarations: [MiradorViewerComponent],
       providers: [
-        { provide: BitstreamDataService, useValue: {} }
+        { provide: BitstreamDataService, useValue: {} },
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MiradorViewerComponent, {
       set: {
         providers: [
           { provide: MiradorViewerService, useValue: viewerService },
           { provide: BundleDataService, useValue: {} },
-          { provide: HostWindowService, useValue: mockHostWindowService  }
+          { provide: HostWindowService, useValue: mockHostWindowService  },
+          { provide: NativeWindowService, useValue: new NativeWindowRef() },
+          { provide: Location, useValue: {} },
         ]
       }
     }).compileComponents();

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

@@ -1,14 +1,23 @@
-import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Item } from '../../core/shared/item.model';
 import { environment } from '../../../environments/environment';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import { Observable, of } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser, Location } from '@angular/common';
 import { MiradorViewerService } from './mirador-viewer.service';
 import { HostWindowService, WidthCategory } from '../../shared/host-window.service';
 import { BundleDataService } from '../../core/data/bundle-data.service';
+import { NativeWindowRef, NativeWindowService } from '../../core/services/window.service';
+
+const IFRAME_UPDATE_URL_MESSAGE = 'update-url';
+
+interface IFrameMessageData {
+  type: string;
+  canvasId: string;
+  canvasIndex: string;
+}
 
 @Component({
   selector: 'ds-mirador-viewer',
@@ -17,7 +26,7 @@ import { BundleDataService } from '../../core/data/bundle-data.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [ MiradorViewerService ]
 })
-export class MiradorViewerComponent implements OnInit {
+export class MiradorViewerComponent implements OnInit, OnDestroy {
 
   @Input() object: Item;
 
@@ -36,6 +45,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.
    */
@@ -58,12 +72,17 @@ export class MiradorViewerComponent implements OnInit {
 
   viewerMessage = 'Sorry, the Mirador viewer is not currently available in development mode.';
 
-  constructor(private sanitizer: DomSanitizer,
-              private viewerService: MiradorViewerService,
-              private bitstreamDataService: BitstreamDataService,
-              private bundleDataService: BundleDataService,
-              private hostWindowService: HostWindowService,
-              @Inject(PLATFORM_ID) private platformId: any) {
+  constructor(
+    private sanitizer: DomSanitizer,
+    private viewerService: MiradorViewerService,
+    private bitstreamDataService: BitstreamDataService,
+    private bundleDataService: BundleDataService,
+    private hostWindowService: HostWindowService,
+    private location: Location,
+    @Inject(PLATFORM_ID) private platformId: any,
+    @Inject(NativeWindowService) protected _window: NativeWindowRef,
+  ) {
+
   }
 
   /**
@@ -95,6 +114,9 @@ export class MiradorViewerComponent implements OnInit {
     if (this.canvasId) {
       viewerPath += `&canvasId=${this.canvasId}`;
     }
+    if (this.canvasIndex) {
+      viewerPath += `&canvasIndex=${parseInt(this.canvasIndex, 10) - 1}`;
+    }
     if (environment.mirador.enableDownloadPlugin) {
       viewerPath += '&enableDownloadPlugin=true';
     }
@@ -108,6 +130,7 @@ export class MiradorViewerComponent implements OnInit {
      * Initializes the iframe url observable.
      */
     if (isPlatformBrowser(this.platformId)) {
+      this._window.nativeWindow.addEventListener('message', this.iframeMessageListener);
 
       // Viewer is not currently available in dev mode so hide it in that case.
       this.isViewerAvailable = this.viewerService.showEmbeddedViewer();
@@ -150,4 +173,27 @@ export class MiradorViewerComponent implements OnInit {
       }
     }
   }
+
+  ngOnDestroy(): void {
+    this._window.nativeWindow.removeEventListener('message', this.iframeMessageListener);
+  }
+
+
+  iframeMessageListener = (event: MessageEvent) => {
+    const data: IFrameMessageData = event.data;
+
+    if (data.type === IFRAME_UPDATE_URL_MESSAGE) {
+      const currentPath = this.location.path();
+      const canvasId = data.canvasId;
+      const canvasIndex = data.canvasIndex;
+      // Use URL API for easier query param manipulation
+      const url = new URL(window.location.origin + currentPath);
+      // Set or update the query param
+      url.searchParams.set('canvasId', canvasId);
+      url.searchParams.set('canvasIndex', canvasIndex);
+      const newPathWithQuery = url.pathname + url.search;
+      // Replace the current state (no reload, no new history entry)
+      this.location.replaceState(newPathWithQuery);
+    }
+  };
 }

src/app/item-page/viewer-provider/viewers/item-viewers/iiif-item-viewer/iiif-item-viewer.component.html

@@ -5,5 +5,6 @@
     [searchable]="isSearchable$ | async"
     [query]="query$ | async"
     [canvasId]="canvasId$ | async"
+    [canvasIndex]="canvasIndex$ | async"
   ></ds-mirador-viewer>
 </div>

src/app/item-page/viewer-provider/viewers/item-viewers/iiif-item-viewer/iiif-item-viewer.component.ts

@@ -14,11 +14,13 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
 export class IIIFItemViewerComponent extends BaseItemViewerComponent implements OnInit {
 
   private readonly CANVAS_PARAM: string = 'canvasId';
+  private readonly CANVASIDX_PARAM: string = 'canvasIndex';
   private readonly QUERY_PARAM: string = 'query';
 
   isSearchable$: Observable<boolean>;
   query$: Observable<string>;
   canvasId$: Observable<string>;
+  canvasIndex$: Observable<string>;
 
   constructor(
     private readonly routeService: RouteService,
@@ -34,6 +36,9 @@ export class IIIFItemViewerComponent extends BaseItemViewerComponent implements
     this.canvasId$ = queryParams$.pipe(
       this.extractParam(queryMap => queryMap.get(this.CANVAS_PARAM))
     );
+    this.canvasIndex$ = queryParams$.pipe(
+      this.extractParam(queryMap => queryMap.get(this.CANVASIDX_PARAM))
+    );
     this.isSearchable$ = this.item$.pipe(
       map((item) => isIiifSearchEnabled(item))
     );

src/mirador-viewer/config.default.js

@@ -16,6 +16,7 @@ import miradorShareDialogPlugin from 'mirador-share-plugin/es/MiradorShareDialog
 import miradorSharePlugin from 'mirador-share-plugin/es/miradorSharePlugin';
 import miradorDownloadPlugin from 'mirador-dl-plugin/es/miradorDownloadPlugin';
 import miradorDownloadDialog from 'mirador-dl-plugin/es/MiradorDownloadDialog';
+import locationPlugin from './locationPlugin';
 
 const MANIFEST_URL_PART = /\/manifest$/;
 
@@ -28,6 +29,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 +64,8 @@ windowSettings.manifestId = manifest;
   if (canvasId && canvasId !== 'null') {
     windowSettings.canvasId =
       `${(manifest.replace(MANIFEST_URL_PART, ''))}/canvas/${canvasId}`;
+  } else if (canvasIndex) {
+    windowSettings.canvasIndex = parseInt(canvasIndex);
   }
 })();
 
@@ -182,6 +186,7 @@ let miradorPlugins = [
   miradorShareDialogPlugin,
   miradorSharePlugin,
   miradorDownloadDialog,
+  locationPlugin
 ];
 
 (() => {

src/mirador-viewer/locationPlugin.js

@@ -0,0 +1,46 @@
+import { takeEvery, select } from 'redux-saga/effects';
+import ActionTypes from 'mirador/dist/es/src/state/actions/action-types';
+import { getCanvasIndex } from 'mirador/dist/es/src/state/selectors';
+
+/**
+ * Extract id from the url.
+ * URLs are in the format of "https://domain-name/server/iiif/392363fe-015f-41e6-8cdd-b5c754605787/canvas/03c322b7-0182-44fa-8dc3-5d2efcece237"
+ */
+const extractCanvasId = (canvasUrl) => canvasUrl.split('/').pop();
+
+/** This will be called every time the SET_CANVAS action is dispatched */
+const onCanvasChange = function* (action) {
+  const { windowId, canvasId } = action;
+  if (windowId && canvasId) {
+    const canvasIndex = yield select(getCanvasIndex, { windowId });
+    const canvasId = extractCanvasId(action.canvasId);
+
+    const message = {
+      type: 'update-url',
+      // index here starts from 0, whilst for setting the index it starts from 1.
+      canvasIndex: canvasIndex + 1,
+      canvasId: canvasId
+    };
+
+    const isValidId = canvasId && canvasId !== 'undefined';
+    const isBrowserEnvironment = typeof window !== 'undefined';
+
+    if (isValidId && isBrowserEnvironment) {
+      window.parent.postMessage(message, '*');
+    }
+  }
+}
+
+const pluginSaga = function* () {
+  /* `takeEvery` calls the associated function every time the action is dispatched */
+  yield takeEvery([
+    ActionTypes.SET_CANVAS,
+  ], onCanvasChange);
+}
+
+const locationPlugin = {
+  component: () => null,
+  saga: pluginSaga,
+}
+
+export default locationPlugin;