@digipolis-gent/modal v1.0.4

City of Ghent Modal

This is a fully accessible modal library. It includes a body scroll lock, tab trap, route events and aria-hidden for obscured contents.

It was created to support the City of Ghent styleguide.

Usage

CommonJS

const Modal = require('@digipolis-gent/modal').default;

const modal = new Modal(element, options);

ES Imports

import Modal from '@digipolis-gent/modal';

const modal = new Modal(element, options);

Browser

HTML:

<script src="node_modules/@digipolis-gent/modal/dist/modal.js"></script>

JS:

var modal = new Modal(element, options);

Options

The second parameter in the constructor is an options object.

ResizeEvent

This custom function will be attached to the window resize event. It receives two functions as parameters to open and close the modal.

Example:

  const filter = document.querySelector('#filter');

  new Modal(filter, {
    /**
    * The modal is always visible from tablet and up,
    * this is atypical.
    */
    resizeEvent: (open, close) => {
      if (window.innerWidth > 960) {
        close();
        filter.setAttribute('aria-hidden', 'false');
      }
      else if (!filter.classList.contains('visible')) {
        filter.setAttribute('aria-hidden', 'true');
      }
    }
  });

Development

Setup

If you'd like to make adjustments to the source code, you can set up this project locally.

To clone the repo and install dependencies:

$ git clone git@github.com:StadGent/npm_package_modal.git
$ cd npm_package_modal
$ npm install

Dev

$ npm run dev

Build

$ npm run build

Contributing

Thanks for your interest in contributing! Get started here.

Authors

• Bart Delrue - GitHub
• Helena Standaert - GitHub