Universal Viewer UI Overhaul

.github/workflows/build-test.yml

@@ -11,8 +11,8 @@ jobs:
 
     name: Node ${{ matrix.node }} build
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/cache@v5
+      - uses: actions/checkout@v5
+      - uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-${{ matrix.node }}-npm-${{ hashFiles('**/package-lock.lock') }}

.github/workflows/lint-and-prettify.yml

@@ -14,7 +14,7 @@ jobs:
           node-version: "20"
 
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install npm dependencies
         run: npm install
@@ -29,7 +29,7 @@ jobs:
         run: npm run prettify
 
       - name: Auto-commit fixes
-        uses: EndBug/add-and-commit@v10
+        uses: EndBug/add-and-commit@v9
         with:
           default_author: github_actions
           add: "['src/']"

.github/workflows/release.yml

@@ -4,17 +4,32 @@ on:
   push:
     tags: ['v*']
 
-permissions:
-  id-token: write  # Required for OIDC
-  contents: read
-
 jobs:
-  publish:
+  build:
+    runs-on: ubuntu-latest
+    name: Node build
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-${{ matrix.node }}-npm-${{ hashFiles('**/package-lock.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+      - name: Setup node
+        uses: actions/setup-node@v6
+        with:
+          node-version: '20.x'
+      - run: npm ci
+      - run: npm run build
+
+  release:
+    needs: [build]
     runs-on: ubuntu-latest
     name: Release
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/cache@v5
+      - uses: actions/checkout@v5
+      - uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-${{ matrix.node }}-npm-${{ hashFiles('**/package-lock.lock') }}
@@ -23,27 +38,15 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v6
         with:
-          node-version: '24'
-          registry-url: 'https://registry.npmjs.org'
+          node-version: '20.x'
 
       - name: Set tag
         id: tagName
-        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
-
-      # Ensure npm 11.5.1 or later is installed
-      - name: Update npm
-        run: npm install -g npm@latest
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
 
       - run: npm ci
+      - run: npm run prepublishOnly
 
-      - name: Publish a release candidate
-        if: contains(steps.tagName.outputs.tag, 'rc')
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npm publish --tag=rc
-
-      - name: Publish a regular release
-        if: false == contains(steps.tagName.outputs.tag, 'rc')
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npm publish
+      - uses: JS-DevTools/npm-publish@v4
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

.nvmrc

@@ -0,0 +1 @@
+v14.18.1

.stylelintrc.json

@@ -5,7 +5,6 @@
   "rules": {
     "block-no-empty": true,
     "at-rule-no-unknown": null,
-    "color-function-notation": null,
     "color-no-invalid-hex": true,
     "less/color-no-invalid-hex": null,
     "rule-empty-line-before": null,

__tests__/test.js

@@ -6,72 +6,6 @@ describe("Universal Viewer", () => {
   let browser;
   let page;
 
-  const getRotationFromNavigator = async () => {
-    return await page.evaluate(() => {
-      const el = document.querySelector(".displayregioncontainer");
-      if (!el) return 0;
-
-      const transform = el.style.transform || "";
-      const match = transform.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
-      if (!match) return 0;
-
-      const deg = Number(match[1]);
-      return ((deg % 360) + 360) % 360;
-    });
-  };
-
-  const waitForRotation = async (expectedRotation) => {
-    await page.waitForFunction(
-      (expected) => {
-        const el = document.querySelector(".displayregioncontainer");
-        if (!el) return false;
-
-        const transform = el.style.transform || "";
-        const match = transform.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
-        const current = match ? Number(match[1]) : 0;
-
-        return ((current % 360) + 360) % 360 === expected;
-      },
-      {},
-      expectedRotation
-    );
-  };
-
-  const getCanvasValue = (url) => {
-    const match = url.match(/(?:^|[?&#])(cv|canvas|page)=([^&#]*)/);
-    if (!match) return 0;
-
-    const rawValue = match[2];
-    if (rawValue === "") return 0;
-
-    const value = Number(rawValue);
-    if (Number.isNaN(value)) return 0;
-
-    return value;
-  };
-
-  const waitForCanvasValue = async (page, expected) => {
-    await page.waitForFunction(
-      (expectedValue) => {
-        const match = window.location.href.match(/(?:^|[?&#])(cv|canvas|page)=([^&#]*)/);
-        if (!match) return expectedValue === 0;
-
-        const rawValue = match[2];
-        if (rawValue === "") return expectedValue === 0;
-
-        const value = Number(rawValue);
-        return value === expectedValue;
-      },
-      {},
-      expected
-    );
-  };
-
-  const getXywhValue = (url) => {
-    const match = url.match(/[?&#]xywh=([^&]+)/);
-    return match ? decodeURIComponent(match[1]) : null;
-  };
-
   beforeAll(async () => {
     browser = await puppeteer.launch();
     page = await browser.newPage();
@@ -133,193 +67,16 @@ 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");
+  // it('settings button is visible', async () => {
 
-    // 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");
+  //   await page.waitForSelector('.btn.imageBtn.settings');
 
-    // 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");
-
-    const isSettingsButtonVisible = await page.evaluate(() => {
-      const settingsButton = document.querySelector(".btn.imageBtn.settings");
-      const style = window.getComputedStyle(settingsButton);
-      return (
-        style.getPropertyValue("visibility") !== "hidden" &&
-        style.getPropertyValue("display") !== "none"
-      );
-    });
-
-    expect(isSettingsButtonVisible).toBe(true);
-  });
-
-  describe("viewer controls", () => {
-    afterEach(async () => {
-      await page.goto("http://localhost:4444");
-    });
+  //   const isSettingsButtonVisible = await page.evaluate(() => {
+  //     const settingsButton = document.querySelector('.btn.imageBtn.settings');
+  //     const style = window.getComputedStyle(settingsButton);
+  //     return style.getPropertyValue('visibility') !== 'hidden' && style.getPropertyValue('display') !== 'none';
+  //   });
 
-    // can navigate back and forth
-    it("can navigate back and forth", async () => {
-      await page.waitForSelector(".btn.imageBtn.next", { visible: true });
-      await page.waitForSelector(".btn.imageBtn.prev", { visible: true });
-
-      const startValue = getCanvasValue(page.url());
-
-      const isPrevDisabledInitially = await page.$eval(
-        ".btn.imageBtn.prev",
-        (btn) => btn.disabled
-      );
-      expect(isPrevDisabledInitially).toBe(true);
-
-      await page.click(".btn.imageBtn.next");
-      await waitForCanvasValue(page, 1);
-
-      const nextValue = getCanvasValue(page.url());
-      const isPrevDisabledAfterNext = await page.$eval(
-        ".btn.imageBtn.prev",
-        (btn) => btn.disabled
-      );
-      expect(isPrevDisabledAfterNext).toBe(false);
-
-      await page.click(".btn.imageBtn.prev");
-      await waitForCanvasValue(page, 0);
-
-      const previousValue = getCanvasValue(page.url());
-      const isPrevDisabledAgain = await page.$eval(
-        ".btn.imageBtn.prev",
-        (btn) => btn.disabled
-      );
-      expect(isPrevDisabledAgain).toBe(true);
-
-      expect(startValue).toBe(0);
-      expect(nextValue).toBe(1);
-      expect(previousValue).toBe(0);
-    });
-
-    // zoom in and zoom out
-    it("can zoom in and zoom out", async () => {
-      await page.waitForSelector(".zoomIn.viewportNavButton", {
-        visible: true,
-      });
-      await page.waitForSelector(".zoomOut.viewportNavButton", {
-        visible: true,
-      });
-
-      const initialUrl = page.url();
-      const initialXywh = getXywhValue(initialUrl);
-
-      await page.click(".zoomIn.viewportNavButton");
-      await page.waitForFunction(
-        (prev) => window.location.href !== prev,
-        {},
-        initialUrl
-      );
-
-      const zoomInUrl = page.url();
-      const zoomInXywh = getXywhValue(zoomInUrl);
-
-      expect(zoomInXywh).not.toBeNull();
-      expect(zoomInXywh).not.toBe(initialXywh);
-      expect(zoomInXywh).toMatch(/^-?\d+,-?\d+,\d+,\d+$/);
-
-      await page.click(".zoomOut.viewportNavButton");
-      await page.waitForFunction(
-        (prev) => window.location.href !== prev,
-        {},
-        zoomInUrl
-      );
-
-      const zoomOutUrl = page.url();
-      const zoomOutXywh = getXywhValue(zoomOutUrl);
-
-      expect(zoomOutXywh).not.toBeNull();
-      expect(zoomOutXywh).not.toBe(zoomInXywh);
-      expect(zoomOutXywh).toMatch(/^-?\d+,-?\d+,\d+,\d+$/);
-    });
-
-    // rotate image
-    it("can rotate image", async () => {
-      await page.waitForSelector(".rotate.viewportNavButton", {
-        visible: true,
-      });
-
-      const initialRot = await getRotationFromNavigator();
-
-      await page.click(".rotate.viewportNavButton");
-      await waitForRotation(90);
-
-      const rotatedRot = await getRotationFromNavigator();
-      expect(initialRot).toBe(0);
-      expect(rotatedRot).toBe(90);
-    });
-
-    // open and close adjust image control
-    it("can open and close adjust image control", async () => {
-      const btn = "button.viewportNavButton.adjustImage";
-      const overlay = "div.overlay.adjustImage";
-      const heading = "div.overlay.adjustImage .content .heading";
-      const closeBtn = ".btn.btn-default.close";
-
-      await page.waitForSelector(btn, { visible: true });
-      await page.click(btn);
-
-      await page.waitForSelector(overlay, { visible: true });
-
-      const text = await page.$eval(heading, (el) => el.textContent.trim());
-      expect(text).toBe("Adjust image");
-
-      await page.$eval(closeBtn, (el) => el.click());
-
-      const isOverlayVisible = await page.evaluate(() => {
-        const isOverlayVisible = document.querySelector(
-          "div.overlay.adjustImage"
-        );
-        const style = window.getComputedStyle(isOverlayVisible);
-
-        return (
-          style.getPropertyValue("display") === "none" ||
-          style.getPropertyValue("visibility") === "hidden"
-        );
-      });
-      expect(isOverlayVisible).toBe(false);
-    });
-  });
-});
+  //   expect(isSettingsButtonVisible).toBe(true);
+  // });
+});