Neighbourhood Party Manager
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@digipolis-gent/modal

1.0.3 • Public • Published

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.

property type default value description
changeHash boolean true Possibility to alter the URL fragment when the modal opens/closes.
enableEscape boolean true Allow closing the modal using the escape key.
resizeEvent function undefined Add a user defined throttled resizeEvent.

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

Install

npm i @digipolis-gent/modal

DownloadsWeekly Downloads

313

Version

1.0.3

License

GPL-3.0

Unpacked Size

120 kB

Total Files

19

Last publish

Collaborators

  • avatar