[IIIF-148] fix location plugin, configure message listeners

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

@@ -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, {
@@ -222,15 +229,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 {
+  canvasId: string;
+  type: string;
+  param: 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;
 
@@ -63,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,
+  ) {
+
   }
 
   /**
@@ -116,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();
@@ -158,4 +173,28 @@ 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 param = data.param;
+      // Use URL API for easier query param manipulation
+      const url = new URL(window.location.origin + currentPath);
+      console.log(url);
+      // Set or update the query param
+      url.searchParams.set(param, canvasId);
+      const newPathWithQuery = url.pathname + url.search;
+      // Replace the current state (no reload, no new history entry)
+      console.log('newPathWithQuery', newPathWithQuery);
+      this.location.replaceState(newPathWithQuery);
+    }
+  };
 }

src/mirador-viewer/config.default.js

@@ -16,7 +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 myPlugin from './locationPlugin';
+import locationPlugin from './locationPlugin';
 
 const MANIFEST_URL_PART = /\/manifest$/;
 
@@ -186,7 +186,7 @@ let miradorPlugins = [
   miradorShareDialogPlugin,
   miradorSharePlugin,
   miradorDownloadDialog,
-  myPlugin
+  locationPlugin
 ];
 
 (() => {
@@ -197,14 +197,3 @@ let miradorPlugins = [
 })();
 
 Mirador.viewer(miradorConfiguration, miradorPlugins);
-/*miradorInstance?.store?.subscribe((store) => {
-  console.log(miradorInstance?.store, store);
-  const state = store?.getState();
-  const lastAction = state?.lastAction;
-  console.log(state, lastAction);
-
-  if (lastAction && lastAction.type === 'SELECT_CANVAS') {
-    const canvasId = lastAction.canvasId;
-    console.log('Canvas cliccato:', canvasId);
-  }
-});*/

src/mirador-viewer/locationPlugin.js

@@ -1,24 +1,36 @@
-import takeEvery from 'redux-saga/effects';
+import { takeEvery } from 'redux-saga/effects';
 import ActionTypes from 'mirador/dist/es/src/state/actions/action-types';
 
+export
+
 /** This will be called every time the SET_CANVAS action is dispatched */
 const onCanvasChange = function* (action) {
-  console.log(action);
+  console.log('SET_CANVAS action: ', action);
+  if(action.canvasId) {
+    // IDs are in the format of "https://dspaceglam7dev.4science.cloud/server/iiif/392363fe-015f-41e6-8cdd-b5c754605787/canvas/03c322b7-0182-44fa-8dc3-5d2efcece237"
+    const id = action.canvasId.split('/').pop();
+    const message = {
+      type: 'update-url',
+      param: 'canvasId',
+      canvasId: id
+    };
+    console.log('POSTING MESSAGE: ', message);
+    if (id && id !== 'undefined') {
+      window.parent.postMessage(message, '*');
+    }
+  }
 }
 
 const pluginSaga = function* () {
   /* `takeEvery` calls the associated function every time the action is dispatched */
   yield takeEvery([
     ActionTypes.SET_CANVAS,
-    ActionTypes.RECEIVE_SEARCH,
-    ActionTypes.REMOVE_SEARCH,
-    ActionTypes.SET_WINDOW_VIEW_TYPE,
   ], onCanvasChange);
 }
 
-const myPlugin = {
+const locationPlugin = {
   component: () => null,
   saga: pluginSaga,
 }
 
-export default myPlugin;
+export default locationPlugin;

yarn.lock

@@ -2469,6 +2469,19 @@
     redux "^4.0.4"
     typescript-tuple "^2.2.1"
 
+"@redux-saga/core@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.3.0.tgz#2ce08b73d407fc6ea9e7f7d83d2e97d981a3a8b8"
+  integrity sha512-L+i+qIGuyWn7CIg7k1MteHGfttKPmxwZR5E7OsGikCL2LzYA0RERlaUY00Y3P3ZV2EYgrsYlBrGs6cJP5OKKqA==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@redux-saga/deferred" "^1.2.1"
+    "@redux-saga/delay-p" "^1.2.1"
+    "@redux-saga/is" "^1.1.3"
+    "@redux-saga/symbols" "^1.1.3"
+    "@redux-saga/types" "^1.2.1"
+    typescript-tuple "^2.2.1"
+
 "@redux-saga/deferred@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.2.1.tgz#aca373a08ccafd6f3481037f2f7ee97f2c87c3ec"
@@ -11778,6 +11791,13 @@ redux-saga@^1.1.3:
   dependencies:
     "@redux-saga/core" "^1.2.3"
 
+redux-saga@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.3.0.tgz#a59ada7c28010189355356b99738c9fcb7ade30e"
+  integrity sha512-J9RvCeAZXSTAibFY0kGw6Iy4EdyDNW7k6Q+liwX+bsck7QVsU78zz8vpBRweEfANxnnlG/xGGeOvf6r8UXzNJQ==
+  dependencies:
+    "@redux-saga/core" "^1.3.0"
+
 redux-thunk@^2.3.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"