Update universalviewer to v4

.github/workflows/validate-pull-request.yaml

@@ -47,8 +47,6 @@ jobs:
         run: yarn install
       - name: Setup DB
         run: bin/rails db:schema:load
-      - name: Prep UV
-        run: ./prep_uv.sh
       - name: Run Backend Tests
         run: bundle exec rspec --tag ~skip_ci
       - name: Upload Capybara Saved Pages

README.md

@@ -141,7 +141,7 @@ When you update certain frontend elements of the app, you'll need to rebuild the
 
 5) Remove the images
 
-    `docker rm $IMAGE_ID`
+    `docker rmi $IMAGE_ID`
 
 6) Build the new image (assuming you're done making changes for now)
 

app/assets/javascripts/application.js

@@ -10,22 +10,22 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
-//= require 'blacklight_advanced_search'
 
 //= require jquery3
 //= require rails-ujs
 //= require popper
 //= require twitter/typeahead
 //= require bootstrap
 //= require chosen-jquery
+
 // Required by Blacklight
+//= require blacklight_advanced_search
 //= require blacklight/blacklight
 
 //= require_tree .
 
 
 // For blacklight_range_limit built-in JS, if you don't want it you don't need
 // this:
-//= require 'blacklight_range_limit'
+//= require blacklight_range_limit
 

app/views/catalog/_show_default.html.erb

@@ -23,7 +23,7 @@
   </div>
   <div class="col-md-3">
     <div id="sidebar">
-       <%= render_document_sidebar_partial(@document) %>
+      <%= render_document_sidebar_partial(@document) %>
     </div>
   </div>
 </div>
@@ -37,8 +37,15 @@
 %>
 
 <% content_for(:head) do %>
-  <link rel="stylesheet" href="/uv/uv.css">
-  <%= javascript_pack_tag 'universalviewer' %>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/uv.css"
+  />
+  <script
+    type="application/javascript"
+    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/UV.js"
+  ></script>
+  <script type="text/javascript">window.$ = jQuery;</script>
 <% end %>
 
 <% content_for(:webpack_bundles) do %>
@@ -63,36 +70,92 @@
     if (queryParams.uvcv && queryParams.uvcv.length) {
       window.location.hash = `?${queryParams.uvcv}`;
     }
-    window.addEventListener('uvLoaded', function (e) {
-      const urlDataProvider = new UV.URLDataProvider();
-      const collectionIndex = urlDataProvider.get('c');
 
-      // If we were given a legacy anchor, such as #/image/4, parse
-      // out the 4 and use it as the canvasIndex in the UV config.
-      const legacyAnchorMatch = /\/image\/(\d+)$/.exec(window.location.hash) || [0];
-      let canvasIndexFallback = queryParams.uvcv || legacyAnchorMatch.pop();
-      if (legacyAnchorMatch.length) {
-        window.location.hash = '';
-      }
+    const urlAdapter = new UV.IIIFURLAdapter();
+    const collectionIndex = urlAdapter.get("c");
+    // If we were given a legacy anchor, such as #/image/4, parse
+    // out the 4 and use it as the canvasIndex in the UV config.
+    const legacyAnchorMatch = /\/image\/(\d+)$/.exec(window.location.hash) || [0];
+    let canvasIndexFallback = queryParams.uvcv || legacyAnchorMatch.pop();
+    if (legacyAnchorMatch.length) {
+      window.location.hash = '';
+    }
+
+    const data = {
+      manifest: "<%= manifest_url %>",
+      collectionIndex: (collectionIndex !== undefined) ? Number(collectionIndex) : undefined,
+      canvasIndex: Number(urlAdapter.get("cv", canvasIndexFallback)),
+      manifestIndex: Number(urlAdapter.get("m", 0)),
+      rotation: Number(urlAdapter.get("r", 0)),
+      rangeId: urlAdapter.get("rid", ""),
+      xywh: urlAdapter.get("xywh", ""),
+      target: urlAdapter.get("target", "")
+    };
 
-      createUV('#uv', {
-        iiifResourceUri: '<%= manifest_url %>',
-        root: '../../../uv/',
-        configUri: '/uv/config.json',
-        collectionIndex: (collectionIndex !== undefined) ? Number(collectionIndex) : undefined,
-        manifestIndex: Number(urlDataProvider.get('m', 0)),
-        sequenceIndex: Number(urlDataProvider.get('s', 0)),
-        canvasIndex: Number(urlDataProvider.get('cv', canvasIndexFallback)),
-        rotation: Number(urlDataProvider.get('r', 0)),
-        rangeId: urlDataProvider.get('rid', ''),
-        xywh: urlDataProvider.get('xywh', '')
-      }, urlDataProvider);
+    const uv = UV.init("uv", data);
+    urlAdapter.bindTo(uv);
 
-      $(document).on('click', 'button.download', function () {
-        // We don't want to offer the full-size image download option
-        $('#wholeImageHighRes, #wholeImageHighReslabel').remove();
-      })
-    }, false);
+    uv.on("configure", ({ config, cb}) => {
+      cb({
+        options: {
+          dropEnabled: true,
+          footerPanelEnabled: true,
+          headerPanelEnabled: true,
+          leftPanelEnabled: true,
+          limitLocales: false,
+          overrideFullScreen: false,
+          pagingEnabled: true,
+          rightPanelEnabled: true,
+          termsOfUseEnabled: true,
+          zoomToSearchResultEnabled: true,
+          zoomToBoundsEnabled: false
+        },
+        modules: {
+          downloadDialogue: {
+            options: {
+              downloadCurrentViewEnabled: false,
+              downloadWholeImageHighResEnabled: false
+            }
+          },
+          headerPanel: {
+            options: {
+              localeToggleEnabled: false
+            }
+          },
+          moreInfoRightPanel: {
+            options: {
+              manifestDisplayOrder: "Contributing Organization,Title,Creator,Contributor,Description,Date of Creation,Dimensions,Minnesota Reflections Topic,Item Type,Item Physical Format,Formal Subject Headings,Locally Assigned Subject Headings,Minnesota City or Township,Minnesota County,State or Province,Country,GeoNames URI,Language,Local Identifier,Fiscal Sponsor,Rights Management,Contact Information"
+            }
+          },
+          seadragonCenterPanel: {
+            options: {
+              autoHideControls: false,
+              requiredStatementEnabled: false
+            }
+          },
+          avCenterPanel: {
+            options: {
+              requiredStatementEnabled: false
+            }
+          },
+          centerPanel: {
+            options: {
+              requiredStatementEnabled: false
+            }
+          },
+          searchFooterPanel: {
+            options: {
+              positionMarkerEnabled: true,
+              pageModeEnabled: false
+            }
+          },
+          footerPanel: {
+            options: {
+              downloadEnabled: true
+            }
+          }
+        }
+      });
+    });
   </script>
-  <%= javascript_pack_tag 'universalviewer_lib' %>
 <% end %>

local-dev-init.sh

@@ -16,8 +16,4 @@ done
 bundle exec rake db:migrate db:test:prepare db:seed
 yarn install
 
-# Copy UV assets to their expected locations in public/
-echo "Preparing UniversalViewer assets..."
-./prep_uv.sh
-
 echo "Finished ✅"

package.json

@@ -38,7 +38,6 @@
     "sass-loader": "^6.0.6",
     "script-loader": "^0.7.2",
     "style-loader": "^0.19.0",
-    "universalviewer": "3.1.4",
     "webpack": "^4.46.0",
     "webpack-cli": "4.10",
     "webpack-manifest-plugin": "3.2.0",

spec/features/search_by_mdl_identifier_spec.rb

@@ -10,7 +10,8 @@
       click_on 'Search'
       result_link = find_link('A Statewide Movement for the Collection and Preservation of Minnesota\'s War Records')
       result_link.click
-      expect(page).to have_selector('.searchResults', text: 'image 9 of 24')
+      page_input = page.find('.autocompleteText')
+      expect(page_input.value).to eq('9')
     end
   end
 end