@internetarchive/ia-book-visual-adjustments

<ia-book-visual-adjustments>

This webcomponent follows the open-wc recommendation.

Installation

npm i ia-book-visual-adjustments

or

yarn add @internetarchive/ia-book-visual-adjustments

Usage

<script type="module">
  import 'ia-book-visual-adjustments/ia-book-visual-adjustments.js';
</script>

<ia-book-visual-adjustments></ia-book-visual-adjustments>

The only property is an array of options. Each option has these properties:

{
  id: 'contrast', // Identifier for adjustment type
  name: 'Use increased contrast', // Name of adjustment rendered as label text
  active: false, // Checked state of option
}

Events

When an option is changed, the 'visualAdjustmentOptionChanged' event is emitted. The detail object on the event object receives the complete array of options to allow BookReader to collect all active adjustments and add CSS to the image containers. An example of listening to this event and altering an image can be found in the demo.

Linting with ESLint

To scan the project for linting errors, run

npm run lint

Testing with Karma

To run the suite of karma tests, run

npm run test

To run the tests in watch mode (for TDD, for example), run

npm run test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with es-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html