Reincorporate iiif gallery component back into main application (#1472)

Author: K8Sewell

__tests__/test.js

@@ -67,6 +67,49 @@ describe("Universal Viewer", () => {
     expect(labelOverflowAfterToggle).toBe("visible");
   });
 
+  it("can toggle gallery view", async () => {
+    // gallery view is not default view
+    const galleryViewBeforeToggle = await page.evaluate(() => {
+      const galleryViewOverlay = document.querySelector(
+        ".iiif-gallery-component .header"
+      );
+      return getComputedStyle(galleryViewOverlay).overflowX;
+    });
+    expect(galleryViewBeforeToggle).toBe("hidden");
+
+    // gallery toggle icon is visible
+    await page.waitForSelector(".uv-icon-gallery");
+    const galleryViewToggle = await page.evaluate(() => {
+      const toggle = document.querySelector(".uv-icon-gallery");
+      return getComputedStyle(toggle).overflowX;
+    });
+    expect(galleryViewToggle).toBe("visible");
+
+    // gallery view can be toggled on
+    await page.evaluate(() => {
+      document.querySelector(".uv-icon-gallery").click();
+    });
+    const galleryViewAfterToggle = await page.evaluate(() => {
+      const galleryViewOverlay = document.querySelector(
+        ".iiif-gallery-component"
+      );
+      return getComputedStyle(galleryViewOverlay).overflowX;
+    });
+    expect(galleryViewAfterToggle).toBe("visible");
+
+    // gallery view can be toggled off
+    await page.evaluate(() => {
+      document.querySelector(".uv-icon-two-up").click();
+    });
+    const galleryViewAfterTwoUpToggle = await page.evaluate(() => {
+      const galleryViewOverlay = document.querySelector(
+        ".iiif-gallery-component .header"
+      );
+      return getComputedStyle(galleryViewOverlay).overflowX;
+    });
+    expect(galleryViewAfterTwoUpToggle).toBe("hidden");
+  });
+
   it("settings button is visible", async () => {
     await page.waitForSelector(".btn.imageBtn.settings");
 

package-lock.json

@@ -98,12 +98,12 @@
   },
   "dependencies": {
     "@edsilv/http-status-codes": "1.0.3",
+    "@edsilv/jquery-plugins": "^1.0.9",
     "@edsilv/key-codes": "1.0.0",
     "@edsilv/utils": "^1.0.2",
     "@google/model-viewer": "^4.0.0",
     "@iiif/base-component": "2.0.1",
     "@iiif/iiif-av-component": "1.2.4",
-    "@iiif/iiif-gallery-component": "^1.1.23",
     "@iiif/manifold": "^2.1.1",
     "@iiif/presentation-3": "^1.0.5",
     "@iiif/vocabulary": "^1.0.23",

package.json

@@ -1,7 +1,7 @@
 import { IIIFEvents } from "../../IIIFEvents";
 import { ContentLeftPanel } from "../../extensions/config/ContentLeftPanel";
 import { BaseView } from "../uv-shared-module/BaseView";
-import { GalleryComponent } from "@iiif/iiif-gallery-component";
+import { GalleryComponent } from "../uv-shared-module/GalleryComponent";
 import $ from "jquery";
 
 export class GalleryView extends BaseView<ContentLeftPanel> {

src/content-handlers/iiif/modules/uv-contentleftpanel-module/GalleryView.ts

@@ -1,4 +1,4 @@
-@import "@iiif/iiif-gallery-component/dist-css/styles.less";
+@import "../../uv-shared-module/css/iiif-gallery-component.less";
 @import "../../uv-shared-module/css/iiif-tree-component.less";
 @import "../../uv-shared-module/css/thumbs-view.less";
 

src/content-handlers/iiif/modules/uv-contentleftpanel-module/css/styles.less

@@ -4,7 +4,7 @@ import { Dialogue } from "../uv-shared-module/Dialogue";
 import OpenSeadragonExtension from "../../extensions/uv-openseadragon-extension/Extension";
 import { Mode } from "../../extensions/uv-openseadragon-extension/Mode";
 import { Bools } from "@edsilv/utils";
-import { GalleryComponent } from "@iiif/iiif-gallery-component";
+import { GalleryComponent } from "../uv-shared-module/GalleryComponent";
 // import { GalleryComponent } from "../../GalleryComponent";
 import { MultiSelectState } from "@iiif/manifold";
 import { Config } from "../../extensions/uv-openseadragon-extension/config/Config";