feat: initial commit

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "env": {},
+  "extends": ["airbnb", "plugin:jest/recommended"],
+  "globals": {
+    "document": true
+  },
+  "parser": "@babel/eslint-parser",
+  "plugins": ["babel", "jest", "react", "react-hooks"],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
+    "no-console": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/jsx-fragments": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/prefer-stateless-function": "off",
+    "react/function-component-definition": "off"
+  }
+}

.github/workflows/node.js.yml

@@ -0,0 +1,49 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+      - run: npm install -g codecov
+      - run: npm install
+      # - run: npm test
+      # - run: codecov
+      - run: npm run build:demo
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist repository
+          path: "./demo/dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,9 @@
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*
+
+package-lock.json

CONTRIBUTING.md

@@ -0,0 +1,25 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= 6 must be installed.
+
+## Installation
+
+- Running `npm install` in the component's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Running Tests
+
+- `npm test` will run the tests once.
+
+- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `npm run clean` will delete built resources.

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 The Board of Trustees of the Leland Stanford Junior University
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -0,0 +1,46 @@
+# mirador-disable-zoom
+
+![Node.js CI](https://github.com/nakamura196/mirador-disable-zoom/workflows/Node.js%20CI/badge.svg)
+[![npm version](https://badge.fury.io/js/mirador-disable-zoom.svg)](https://badge.fury.io/js/mirador-disable-zoom)
+
+`mirador-disable-zoom` is a [Mirador 3](https://github.com/projectmirador/mirador) plugin that allows users to disable (and re-enable) zoom controls per window.
+
+This plugin is based on the [mirador-disable-zoom](https://github.com/UCLALibrary/mirador-disable-zoom) plugin by UCLA Library.
+
+![Mirador disable zoom example](./assets/example.png)
+
+When interacting with Mirador on touch devices, users report that they sometimes unintentionally change the zoom level. This plugin adds a button to each window in Mirador that a user can click/touch to disable zooming on that window, until the user does one of the following:
+
+- replaces the current window object with a new object (via the list of loaded manifests)
+- moves to a different canvas in the same object
+- changes the view type (BookView -> ImageView, and vice versa)
+
+## Configuration
+
+Several configuration options are available on windows that use mirador-disable-zoom.
+
+| Configuration        | type    | default | description           |
+| -------------------- | ------- | ------- | --------------------- |
+| `disableZoomEnabled` | boolean | false   | Disable zoom controls |
+
+Example configuration:
+
+```javascript
+const config = {
+  id: "demo",
+  windows: [
+    {
+      disableZoomEnabled: true,
+      manifestId: "https://purl.stanford.edu/sn904cj3429/iiif/manifest",
+    },
+  ],
+};
+```
+
+## Installing `mirador-disable-zoom`
+
+`mirador-disable-zoom` requires an instance of Mirador 3. See the [Mirador wiki](https://github.com/ProjectMirador/mirador/wiki) for examples of embedding Mirador within an application. See the [live demo's index.js](https://github.com/ProjectMirador/mirador-disable-zoom/blob/master/demo/src/index.js) for an example of importing the `mirador-disable-zoom` plugin and configuring the adapter.
+
+## Contribute
+
+Mirador's development, design, and maintenance is driven by community needs and ongoing feedback and discussion. Join us at our regularly scheduled community calls, on [IIIF slack #mirador](http://bit.ly/iiif-slack), or the [mirador-tech](https://groups.google.com/forum/#!forum/mirador-tech) and [iiif-discuss](https://groups.google.com/forum/#!forum/iiif-discuss) mailing lists. To suggest features, report bugs, and clarify usage, please submit a GitHub issue.

__tests__/MiradorDisableZoom.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import MiradorDisableZoomMenuItem from '../src/plugins/MiradorDisableZoomMenuItem';
+// import '@testing-library/jest-dom/extend-expect';
+
+describe('MiradorDisableZoomMenuItem', () => {
+  const mockUpdateWindow = jest.fn();
+  const windowId = 'window-1';
+  const t = (key) => key; // simplistic translation function for testing
+
+  it('should render lock icon when enabled', () => {
+    render(
+      <MiradorDisableZoomMenuItem
+        enabled
+        t={t}
+        updateWindow={mockUpdateWindow}
+        windowId={windowId}
+      />,
+    );
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'disableZoom');
+    expect(screen.getByRole('button')).toContainElement(screen.getByTestId('LockIcon'));
+  });
+
+  it('should render lock open icon when not enabled', () => {
+    render(
+      <MiradorDisableZoomMenuItem
+        enabled={false}
+        t={t}
+        updateWindow={mockUpdateWindow}
+        windowId={windowId}
+      />,
+    );
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'enableZoom');
+    expect(screen.getByRole('button')).toContainElement(screen.getByTestId('LockOpenIcon'));
+  });
+
+  it('should toggle the enabled state on click', () => {
+    render(
+      <MiradorDisableZoomMenuItem
+        enabled
+        t={t}
+        updateWindow={mockUpdateWindow}
+        windowId={windowId}
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(mockUpdateWindow).toHaveBeenCalledWith(windowId, { DisableZoomEnabled: false });
+
+    fireEvent.click(button);
+    expect(mockUpdateWindow).toHaveBeenCalledWith(windowId, { DisableZoomEnabled: true });
+  });
+});

__tests__/test-utils.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { createStore, applyMiddleware } from 'redux';
+import { thunk } from 'redux-thunk';
+import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import createRootReducer from 'mirador/dist/es/src/state/reducers/rootReducer';
+import settings from 'mirador/dist/es/src/config/settings';
+
+const rootReducer = createRootReducer();
+const theme = createTheme(settings.theme);
+
+/**
+ * Hook up our rendered object to redux
+ */
+function renderWithProviders(
+  ui,
+  {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = createStore(rootReducer, preloadedState, applyMiddleware(thunk)),
+    ...renderOptions
+  } = {},
+) {
+  /** :nodoc: */
+  function Wrapper({ children }) {
+    return (
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Provider store={store}>{children}</Provider>
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  const rendered = render(ui, { wrapper: Wrapper, ...renderOptions });
+
+  // Return an object with the store and all of RTL's query functions
+  return {
+    store,
+    ...rendered,
+    rerender: (newUi, options) => render(
+      newUi,
+      { container: rendered.container, wrapper: Wrapper, ...options },
+    ),
+  };
+}
+
+export * from '@testing-library/react';
+export { renderWithProviders as render };

babel.config.js

@@ -0,0 +1,93 @@
+const moduleFormatMap = {
+  cjs: 'commonjs',
+  es: false,
+};
+
+module.exports = (api) => ({
+  presets: [
+    api.env('test') && [
+      '@babel/preset-env',
+      {
+        modules: 'commonjs',
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    (api.env('production') || api.env('development')) && [
+      '@babel/preset-env',
+      {
+        corejs: 3,
+        exclude: ['transform-typeof-symbol'],
+        forceAllTransforms: true,
+        modules: moduleFormatMap[process.env.MODULE_FORMAT] || false,
+        useBuiltIns: 'entry',
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        development: api.env('development') || api.env('test'),
+        runtime: 'automatic',
+        useBuiltIns: true,
+      },
+    ],
+  ].filter(Boolean),
+  plugins: [
+    'babel-plugin-macros',
+    '@babel/plugin-transform-destructuring',
+    [
+      '@babel/plugin-proposal-class-properties',
+      {
+        loose: true,
+      },
+    ],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    [
+      '@babel/plugin-proposal-object-rest-spread',
+      {
+        useBuiltIns: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        corejs: false,
+        helpers: false, // Needed to support IE/Edge
+        regenerator: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-regenerator',
+      {
+        async: false,
+      },
+    ],
+    ['transform-react-remove-prop-types',
+      {
+        ignoreFilenames: ['node_modules'],
+        removeImport: true,
+      },
+    ],
+    [
+      "@emotion",
+      {
+        importMap: {
+          "@mui/system": {
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/system", "styled"]
+            }
+          },
+          "@mui/material/styles": {
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/material/styles", "styled"]
+            }
+          }
+        }
+      }
+    ]
+  ].filter(Boolean)
+});

demo/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+</head>
+
+<body>
+  <div id="demo"></div>
+</body>
+
+</html>