Update universalviewer from 3 to 4, use package via yarn

closes #5778
pulibrary · May 15, 2023 · 7a45036 · 7a45036
1 parent 2068588
commit 7a45036
Show file tree

Hide file tree

Showing 90 changed files with 2,426 additions and 144,326 deletions.
diff --git a/app/assets/stylesheets/components/viewer.scss b/app/assets/stylesheets/components/viewer.scss
@@ -31,4 +31,5 @@
     left: 0;
     width: 100%;
     height: 100%;
+    border: none;
 }
diff --git a/app/javascript/entrypoints/viewer.js b/app/javascript/entrypoints/viewer.js
@@ -1,9 +1,4 @@
 import UVManager from '@viewer/uv_manager'
 import 'leaflet/dist/leaflet.css'
 const UVManagerInstance = new UVManager()
-let timer = window.setInterval(() => {
-  if (window.UV !== undefined) {
-    UVManagerInstance.initialize()
-    window.clearInterval(timer)
-  }
-}, 5)
+UVManagerInstance.initialize()
diff --git a/app/javascript/viewer/uv_manager.js b/app/javascript/viewer/uv_manager.js
@@ -1,4 +1,5 @@
-/* global UV, $, createUV */
+import { init, IIIFURLAdapter } from "universalviewer";
+import "universalviewer/dist/esm/index.css";
 import CDLTimer from '@viewer/cdl_timer'
 import IIIFLogo from '@images/iiif-logo.svg'
 import StatementOnHarmfulContentIcon from '@images/statement.png'
@@ -94,21 +95,25 @@ export default class UVManager {
     this.tabManager.onTabSelect(() => setTimeout(() => this.resize(), 100))
     this.processTitle(graphqlData)
     this.uvElement.show()
-    this.uv = createUV('#uv', {
-      root: 'uv',
-      iiifResourceUri: this.manifest,
+    const opts = {
       configUri: this.configURI,
-      collectionIndex: Number(this.urlDataProvider.get('c', 0)),
-      manifestIndex: Number(this.urlDataProvider.get('m', 0)),
-      sequenceIndex: Number(this.urlDataProvider.get('s', 0)),
-      canvasIndex: Number(this.urlDataProvider.get('cv', 0)),
-      rangeId: this.urlDataProvider.get('rid', 0),
-      rotation: Number(this.urlDataProvider.get('r', 0)),
-      xywh: this.urlDataProvider.get('xywh', ''),
-      embedded: true
-    }, this.urlDataProvider)
+      manifest: this.manifest,
+      embedded: true,
+      collectionIndex:
+        this.iiifUrlAdapter.get('c') !== undefined
+          ? Number(this.iiifUrlAdapter.get('c'))
+          : undefined,
+      manifestIndex: Number(this.iiifUrlAdapter.get('m', 0)),
+      canvasIndex: Number(this.iiifUrlAdapter.get('cv', 0)),
+      rotation: Number(this.iiifUrlAdapter.get('r', 0)),
+      rangeId: this.iiifUrlAdapter.get('rid', ''),
+      xywh: this.iiifUrlAdapter.get('xywh', ''),
+      sequenceIndex: Number(this.iiifUrlAdapter.get('s', 0))
+    }
     this.cdlTimer = new CDLTimer(this.figgyId)
     this.cdlTimer.initializeTimer()
+
+    init("uv", opts);
   }
 
   addViewerIcons () {
@@ -186,7 +191,7 @@ export default class UVManager {
     if (this.isFiggyManifest) {
       return '/viewer/config/' + this.manifest.replace('/manifest', '').replace(/.*\//, '') + '.json'
     } else {
-      return this.urlDataProvider.get('config')
+      return this.iiifUrlAdapter.get('config')
     }
   }
 
@@ -236,12 +241,12 @@ export default class UVManager {
     })
   }
 
-  get urlDataProvider () {
-    return new UV.URLDataProvider(false)
+  get iiifUrlAdapter () {
+    return new IIIFURLAdapter();
   }
 
   get manifest () {
-    return this.urlDataProvider.get('manifest')
+    return this.iiifUrlAdapter.get('manifest')
   }
 
   get uvElement () {

diff --git a/app/views/layouts/viewer_layout.html.erb b/app/views/layouts/viewer_layout.html.erb
@@ -2,16 +2,11 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <%= csrf_meta_tag %>
-    <link rel="stylesheet" type="text/css" href="uv/uv.css">
     <%= vite_javascript_tag 'viewer' %>
     <%= stylesheet_link_tag 'viewer' %>
     <%= yield :head %>
-    <script type="text/javascript" src="/uv/lib/offline.js"></script>
-    <script type="text/javascript" src="/uv/lib/offline.js"></script>
-    <script type="text/javascript" src="/uv/helpers.js"></script>
   </head>
   <body>
     <%= yield %>
-    <script type="text/javascript" src="/uv/uv.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "rollup-plugin-gzip": "^3.1.0",
     "sass": "^1.62.1",
     "unfetch": "^4.0.1",
+    "universalviewer": "^4.0.19",
     "vue": "^2.5.17",
     "vue-details": "^1.1.0",
     "vue-loader": "^15.4.2",

diff --git a/public/uv/build.js.map b/public/uv/build.js.map
diff --git a/public/uv/favicon.ico b/public/uv/favicon.ico
diff --git a/public/uv/helpers.js b/public/uv/helpers.js
diff --git a/public/uv/img/pixel.gif b/public/uv/img/pixel.gif
diff --git a/public/uv/info.json b/public/uv/info.json