Fix UV iframe embed scenario

When we migrated UV to the CDN, we stopped serving UV assets from /public, which ended up breaking the iframe use case. This revives it by routing to a controller and rendering a view template. We're using a route & view rather than a static file in /public because we want to initialize UV with the same config options in both places which we can do with a partial. Additionally, if we were to serve the config as a url via a query parameter on the iframe src, UV ends up loading the attribution pop up before the config loads, which is not the exerience we want.
Minitex · Nov 25, 2024 · ee76c6a · ee76c6a
1 parent 04f720e
commit ee76c6a
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 71 deletions.
diff --git a/app/controllers/uv_controller.rb b/app/controllers/uv_controller.rb
@@ -0,0 +1,5 @@
+class UvController < ApplicationController
+  def iframe
+    render template: 'uv/iframe', layout: false
+  end
+end
diff --git a/app/views/catalog/_show_default.html.erb b/app/views/catalog/_show_default.html.erb
@@ -107,77 +107,13 @@
     urlAdapter.bindTo(uv);
 
     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"
-            }
-          },
-          openSeadragonCenterPanel: {
-            options: {
-              autoHideControls: false,
-              requiredStatementEnabled: false
-            }
-          },
-          mediaelementCenterPanel: {
-            options: {
-              requiredStatementEnabled: false
-            }
-          },
-          avCenterPanel: {
-            options: {
-              requiredStatementEnabled: false
-            }
-          },
-          centerPanel: {
-            options: {
-              requiredStatementEnabled: false
-            }
-          },
-          contentLeftPanel: {
-            options: {
-              panelOpen: <%= !borealis_doc.assets.first.playlist? %>,
-              defaultToTreeEnabled: true
-            }
-          },
-          searchFooterPanel: {
-            options: {
-              positionMarkerEnabled: true,
-              pageModeEnabled: false
-            }
-          },
-          footerPanel: {
-            options: {
-              downloadEnabled: true
-            }
-          }
-        }
-      });
+      cb(
+        <%= render(
+          partial: 'uv/viewer_config',
+          formats: [:js],
+          locals: { left_panel_open: !borealis_doc.assets.first.playlist? }
+        ) %>
+      );
     });
   </script>
 <% end %>
diff --git a/app/views/uv/_viewer_config.js.erb b/app/views/uv/_viewer_config.js.erb
@@ -0,0 +1,71 @@
+{
+  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"
+      }
+    },
+    openSeadragonCenterPanel: {
+      options: {
+        autoHideControls: false,
+        requiredStatementEnabled: false
+      }
+    },
+    mediaelementCenterPanel: {
+      options: {
+        requiredStatementEnabled: false
+      }
+    },
+    avCenterPanel: {
+      options: {
+        requiredStatementEnabled: false
+      }
+    },
+    centerPanel: {
+      options: {
+        requiredStatementEnabled: false
+      }
+    },
+    contentLeftPanel: {
+      options: {
+        panelOpen: <%= left_panel_open %>,
+        defaultToTreeEnabled: true
+      }
+    },
+    searchFooterPanel: {
+      options: {
+        positionMarkerEnabled: true,
+        pageModeEnabled: false
+      }
+    },
+    footerPanel: {
+      options: {
+        downloadEnabled: true
+      }
+    }
+  }
+}
diff --git a/app/views/uv/iframe.html.erb b/app/views/uv/iframe.html.erb
@@ -0,0 +1,67 @@
+<!--
+    This is what the embed iframe src links to. It doesn't need to communicate with the parent page, only fill the available space and look for #? parameters
+-->
+
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link rel="icon" href="favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/DanOlson/uv-dist@03f6459f71d9966908786dfad327d51e12ca06d0/dist/uv.css"
+    />
+    <script
+      type="application/javascript"
+      src="https://cdn.jsdelivr.net/gh/DanOlson/uv-dist@03f6459f71d9966908786dfad327d51e12ca06d0/dist/umd/UV.js"
+    ></script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="uv" class="uv"></div>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+        var urlAdapter = new UV.IIIFURLAdapter(true);
+
+        const data = urlAdapter.getInitialData({
+          embedded: true,
+        });
+
+        uv = UV.init("uv", data);
+
+        uv.on("configure", function({ config, cb }) {
+          cb(
+            <%= render(
+              partial: 'viewer_config',
+              formats: [:js],
+              locals: { left_panel_open: true }
+            ) %>
+          );
+        })
+
+        var $UV = document.getElementById("uv");
+
+        function resize() {
+          $UV.setAttribute("style", "width:" + window.innerWidth + "px");
+          $UV.setAttribute("style", "height:" + window.innerHeight + "px");
+        }
+
+        addEventListener("resize", function() {
+          resize();
+        });
+
+        resize();
+      });
+    </script>
+  </body>
+</html>
diff --git a/config/routes.rb b/config/routes.rb
@@ -19,6 +19,11 @@
     %w(catalog sidekiq indexing lists).exclude?(request.params[:page])
   }
 
+  ###
+  # For embedding UV in an iframe, set the src attribute to
+  # /uv/uv.html#?manifest=/iiif/:id/manifest.json
+  get 'uv/uv' => 'uv#iframe'
+
   require 'sidekiq/web'
   mount Sidekiq::Web => '/sidekiq'