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

Usage no npm install needed!