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

• focus-trap
• EventEmitter3

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

• Map
• Object.assign