JSPM

@digipolis-gent/modal

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 379
  • Score
    100M100P100Q97746F
  • License GPL-3.0

An accessible modal library as used by the gent_styleguide for the city of Ghent, Belgium.

Package Exports

  • @digipolis-gent/modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@digipolis-gent/modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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