pmx-overlay

Module to generate an overlay and trap focus on the active element

Usage no npm install needed!

<script type="module">
  import pmxOverlay from 'https://cdn.skypack.dev/pmx-overlay';
</script>

README

PMX Overlay:

Intro

Module to generate an overlay and trap focus on the active element

Getting Started

import EventEmitter from 'eventemitter3';
import focusTrap from 'focus-trap';
import overlay from 'pmx-overlay';

const emitter = new EventEmitter();
const el = document.querySelector('.Overlay');
const targetEl = document.querySelector('.Menu');
const config = {
  el, // Element to be used as the overlay
  targetEl, // The element that is gonna be active when the overlay gets activated.
            // This element will gain focus as soon as the overlay
  events: new Map([
    ['activate', 'pmx:activate'], // the overlay will get activated when this event (along the
                                  // targetEl) gets triggered
    ['deactivate', 'pmx:deactivate'], // the overlay will get deactivated when this event (along
                                      // the targetEl) gets triggered
  ]),
};
const shared = {
  focusTrap,
  emitter,
};
const o = overlay();
o.init(config, shared);

How to use

Setup

The module is exported as an UMD module so it can be used with AMD, CommonJS, ES Modules and in the browser.

  • Install the dependency Using Yarn
yarn add pmx-overlay

or using NPM

npm install pmx-overlay --save
  • Include the module

CommonJS

const inert = require('pmx-overlay').default;

ES2015 modules

import inert from 'pmx-overlay';

API

.init(config, shared):

Initializes the component.

.stop(config, shared)

Stops the component by removing all added mutations.

Browser Support

  • IE 10+
  • Chrome
  • Firefox
  • Safari

Dependencies

This library has been written with some ES2015 features that need to be polyfilled:

  • Map
  • Object.assign