Update UV v3 to Manifesto v4 and Manifold v2 (UniversalViewer#759)

* Supporting changes for dependency loading * Node module resolution * Typescript import updates * Dependency name changes * Updated dependencies
rosetta-development · Oct 22, 2020 · b2a2569 · b2a2569
1 parent d5db98e
commit b2a2569
Show file tree

Hide file tree

Showing 69 changed files with 919 additions and 13,569 deletions.
diff --git a/config.js b/config.js
@@ -12,12 +12,15 @@ module.exports = function () {
             'node_modules/@edsilv/jquery-plugins/dist/jquery-plugins.js',
             'node_modules/@edsilv/jquery-tiny-pubsub/dist/ba-tiny-pubsub.js',
             'node_modules/@edsilv/key-codes/dist/KeyCodes.js',
-            'node_modules/manifesto.js/dist/client/manifesto.js',
-            'node_modules/@iiif/manifold/dist/manifold.js',
+            'node_modules/manifesto.js/dist-umd/manifesto.js',
+            'node_modules/@iiif/manifold/dist-umd/manifold.js',
+            'node_modules/@iiif/vocabulary/dist-umd/vocabulary.js',
+            'node_modules/@iiif/iiif-metadata-component/dist-umd/IIIFMetadataComponent.js',
+            'node_modules/@iiif/iiif-gallery-component/dist-umd/GalleryComponent.js',
             'node_modules/pdfjs-dist/build/pdf.combined.js',
             'node_modules/@edsilv/utils/dist/Utils.js',
             'node_modules/xss/dist/xss.min.js',
-            'node_modules/whatwg-fetch/dist/fetch.umd.js'
+            'node_modules/whatwg-fetch/dist/fetch.umd.js',
         ],
         offline: [ // when offline, make these libs available as they can't be loaded from a cdn
             'node_modules/jquery/dist/jquery.min.js',
@@ -44,9 +47,9 @@ module.exports = function () {
         uvMediaElementExtension: './src/extensions/uv-mediaelement-extension',
         uvPdfExtension: './src/extensions/uv-pdf-extension',
         uvSeadragonExtension: './src/extensions/uv-seadragon-extension',
-        uvVirtexExtension: './src/extensions/uv-virtex-extension'
+        uvVirtexExtension: './src/extensions/uv-virtex-extension',
     };
     this.themes = {
 
     }
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "scripts": {
     "postinstall": "opencollective postinstall",
     "server": "node_modules/.bin/http-server -p 4444",
+    "build": "grunt",
     "test": "jest",
     "version": "echo { \"version\": \"%npm_package_version%\" } > ./dist/info.json && cp ./dist/info.json ./examples/uv"
   },
@@ -72,10 +73,11 @@
     "@edsilv/utils": "0.2.6",
     "@iiif/base-component": "1.1.4",
     "@iiif/iiif-av-component": "0.0.93",
-    "@iiif/iiif-gallery-component": "1.1.13",
-    "@iiif/iiif-metadata-component": "1.1.13",
+    "@iiif/iiif-gallery-component": "1.1.19",
+    "@iiif/iiif-metadata-component": "1.1.19",
     "@iiif/iiif-tree-component": "1.1.16",
-    "@iiif/manifold": "1.2.38",
+    "@iiif/vocabulary": "1.0.19",
+    "@iiif/manifold": "2.0.2",
     "@types/modernizr": "3.2.29",
     "@types/requirejs": "2.1.28",
     "@types/three": "0.84.20",
@@ -90,7 +92,7 @@
     "jquery-ui-dist": "1.12.1",
     "jquery-ui-touch-punch": "0.2.3",
     "jsviews": "0.9.83",
-    "manifesto.js": "3.0.12",
+    "manifesto.js": "4.0.1",
     "mediaelement": "4.0.2",
     "opencollective": "1.0.3",
     "openseadragon": "2.2.1",

diff --git a/src/SynchronousRequire.ts b/src/SynchronousRequire.ts
@@ -1,3 +1,8 @@
+declare global {
+    let define: (load: () => any) => void;
+    let requirejs: any;
+}
+
 export class SynchronousRequire {
 
     static load(deps: string[], cb: (index: number, dep: any) => void): Promise<void> {
@@ -44,10 +49,11 @@ export class DependencyLoader {
         var that = this;
 
         return new Promise<void>((resolve) => {
+            // @ts-ignore
             requirejs([that._dep], (dep: any) => {
                 that._cb(that._index, dep);
                 resolve();
             });
         });
     }
-}
+}
diff --git a/src/UVComponent.ts b/src/UVComponent.ts
@@ -1,3 +1,6 @@
+import { Annotation, AnnotationBody, Canvas, Sequence } from 'manifesto.js';
+import { Helper, loadManifest } from '@iiif/manifold';
+import { ExternalResourceType, IIIFResourceType, MediaType, RenderingFormat } from '@iiif/vocabulary';
 import {BaseEvents} from "./modules/uv-shared-module/BaseEvents";
 import {Extension as AVExtension} from "./extensions/uv-av-extension/Extension";
 import {Extension as DefaultExtension} from "./extensions/uv-default-extension/Extension";
@@ -41,22 +44,22 @@ export default class UVComponent extends _Components.BaseComponent implements IU
 
         this._extensions = <IExtension[]>{};
 
-        this._extensions[manifesto.ResourceType.canvas().toString()] = {
+        this._extensions[IIIFResourceType.CANVAS.toString()] = {
             type: OpenSeadragonExtension,
             name: 'uv-seadragon-extension'
         };
 
-        this._extensions[manifesto.ResourceType.image().toString()] = {
+        this._extensions[ExternalResourceType.IMAGE.toString()] = {
             type: OpenSeadragonExtension,
             name: 'uv-seadragon-extension'
         };
 
-        this._extensions[manifesto.ResourceType.movingimage().toString()] = {
+        this._extensions[ExternalResourceType.MOVING_IMAGE.toString()] = {
             type: MediaElementExtension,
             name: 'uv-mediaelement-extension'
         };
 
-        this._extensions[manifesto.ResourceType.physicalobject().toString()] = {
+        this._extensions[ExternalResourceType.PHYSICAL_OBJECT.toString()] = {
             type: VirtexExtension,
             name: 'uv-virtex-extension'
         };
@@ -66,39 +69,39 @@ export default class UVComponent extends _Components.BaseComponent implements IU
             name: 'uv-virtex-extension'
         };
 
-        this._extensions[manifesto.ResourceType.sound().toString()] = {
+        this._extensions[ExternalResourceType.SOUND.toString()] = {
             type: MediaElementExtension,
             name: 'uv-mediaelement-extension'
         };
 
-        this._extensions[manifesto.RenderingFormat.pdf().toString()] = {
+        this._extensions[RenderingFormat.PDF.toString()] = {
             type: PDFExtension,
             name: 'uv-pdf-extension'
         };
 
         // presentation 3
 
-        this._extensions[manifesto.MediaType.jpg().toString()] = {
+        this._extensions[MediaType.JPG.toString()] = {
             type: OpenSeadragonExtension,
             name: 'uv-seadragon-extension'
         };
 
-        this._extensions[manifesto.MediaType.pdf().toString()] = {
+        this._extensions[MediaType.PDF.toString()] = {
             type: PDFExtension,
             name: 'uv-pdf-extension'
         };
 
-        this._extensions[manifesto.MediaType.mp4().toString()] = {
+        this._extensions[MediaType.VIDEO_MP4.toString()] = {
             type: AVExtension,
             name: 'uv-av-extension'
         };
 
-        this._extensions[manifesto.MediaType.webm().toString()] = {
+        this._extensions[MediaType.WEBM.toString()] = {
             type: AVExtension,
             name: 'uv-av-extension'
         };
 
-        this._extensions[manifesto.MediaType.threejs().toString()] = {
+        this._extensions[MediaType.THREEJS.toString()] = {
             type: VirtexExtension,
             name: 'uv-virtex-extension'
         };
@@ -259,21 +262,23 @@ export default class UVComponent extends _Components.BaseComponent implements IU
 
         const that = this;
 
-        Manifold.loadManifest(<Manifold.IManifoldOptions>{
-            iiifResourceUri: data.iiifResourceUri,
+        loadManifest({
+            manifestUri: data.iiifResourceUri as string,
             collectionIndex: data.collectionIndex, // this has to be undefined by default otherwise it's assumed that the first manifest is within a collection
             manifestIndex: data.manifestIndex || 0,
             sequenceIndex: data.sequenceIndex || 0,
             canvasIndex: data.canvasIndex || 0,
             rangeId: data.rangeId,
             locale: (data.locales) ? data.locales[0].name : undefined
-        }).then((helper: Manifold.IHelper) => {
+        }).then((helper) => {
 
-            let trackingLabel: string = helper.getTrackingLabel();
-            trackingLabel += ', URI: ' + (window.location !== window.parent.location) ? document.referrer : document.location;
-            window.trackingLabel = trackingLabel;
+            let trackingLabel = helper.getTrackingLabel() as string;
+            if (trackingLabel) {
+                trackingLabel += ', URI: ' + (window.location !== window.parent.location) ? document.referrer : document.location;
+                window.trackingLabel = trackingLabel;
+            }
 
-            let sequence: Manifesto.ISequence | undefined;
+            let sequence: Sequence | undefined;
 
             if (data.sequenceIndex !== undefined) {
                 sequence = helper.getSequenceByIndex(data.sequenceIndex);
@@ -284,7 +289,7 @@ export default class UVComponent extends _Components.BaseComponent implements IU
                 }
             }
 
-            let canvas: Manifesto.ICanvas | undefined;
+            let canvas: Canvas | undefined;
 
             if (data.canvasIndex !== undefined) {
                 canvas = helper.getCanvasByIndex(data.canvasIndex);
@@ -306,28 +311,28 @@ export default class UVComponent extends _Components.BaseComponent implements IU
                 // canvasType will always be "canvas" in IIIF presentation 3.0
                 // to determine the correct extension to use, we need to inspect canvas.content.items[0].format
                 // which is an iana media type: http://www.iana.org/assignments/media-types/media-types.xhtml
-                const content: Manifesto.IAnnotation[] = canvas.getContent();
+                const content: Annotation[] = canvas.getContent();
 
                 if (content.length) {
-                    const annotation: Manifesto.IAnnotation = content[0];
-                    const body: Manifesto.IAnnotationBody[] = annotation.getBody();
+                    const annotation: Annotation = content[0];
+                    const body: AnnotationBody[] = annotation.getBody();
 
                     if (body && body.length) {
-                        const format: Manifesto.MediaType | null = body[0].getFormat();
+                        const format: MediaType | null = body[0].getFormat();
 
                         if (format) {
                             extension = that._extensions[format.toString()];
 
                             if (!extension) {
                                 // try type
-                                const type: Manifesto.ResourceType | null = body[0].getType();
+                                const type: ExternalResourceType | null = body[0].getType();
 
                                 if (type) {
                                     extension = that._extensions[type.toString()];
                                 }
                             }
                         } else {
-                            const type: Manifesto.ResourceType | null = body[0].getType();
+                            const type: ExternalResourceType | null = body[0].getType();
 
                             if (type) {
                                 extension = that._extensions[type.toString()];
@@ -336,7 +341,7 @@ export default class UVComponent extends _Components.BaseComponent implements IU
                     }
 
                 } else {
-                    const canvasType: Manifesto.ResourceType | null = canvas.getType();
+                    const canvasType: ExternalResourceType | null = canvas.getType();
 
                     if (canvasType) {
                         // try using canvasType
@@ -461,7 +466,7 @@ export default class UVComponent extends _Components.BaseComponent implements IU
         }
     }
 
-    private _createExtension(extension: any, data: IUVData, helper: Manifold.IHelper): void {
+    private _createExtension(extension: any, data: IUVData, helper: Helper): void {
         this.extension = new extension.type();
         if (this.extension) {
             this.extension.component = this;