0.13.0 • Published 5 years ago

layer-mask v0.13.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

Layer Mask Build Status Coverage Status

The javascript library that breaks the page into cells around specified element(s).

Showcase

Here are the target element is a dialog window:

npm.io

Live demo:

Here are useful cases:

  • allow/disallow clicking the specific elements on the page (modifier: "click-through")
  • creating a backdrop that highlights elements on the page (modifier: "spotlight")

Some details about the library:

  • supports handling the fixed positioned elements
  • written using ES6 and CommonJS modules (published as UMD)
  • uses display: table-* rules by the default, but you can override it

Installation

  • $ npm install layer-mask
  • Then include JS (dist/layer-mask.js) and CSS (dist/layer-mask.css) to your application

Documentation

Please see the source code of LayerMask and LayerMaskManager.

Usage

Direct usage:

const { LayerMask } = require('layer-mask');

const myElements = document.querySelectorAll('#link-1, #link-2'); // can be passed multiple elements at one time
const layerMask = new LayerMask(myElements);
const maskElement = layerMask.createMask();

document.querySelector('body').appendChild(maskElement);

Using the mask manager:

const { LayerMaskManager, LayerMask } = require('layer-mask');

const container = document.querySelector('body');
const maskManager = new LayerMaskManager(container);

const mask = new LayerMask(document.querySelectorAll('#link-1, #link-2'));
const maskElement = maskManager.revealMask(mask);

maskElement.onclick = () => {
    maskManager.hideActiveMask();
};

Modifiers

You add custom css classes to the mask element, simply pass modifiers configuration.

const mask = new LayerMask(document.querySelectorAll('#dummy'), {
    modifiers: [
        // Predefined ones
        'spotlight',     // grays out cells around the target elements
        'click-through', // prevent from clicking outside the target elements
        'debug',         // sames as "spotlight" but in yellow color :)
    ],
});
const maskEl = mask.createMask();

Roadmap

  • release
0.11.0

5 years ago

0.12.0

5 years ago

0.13.0

5 years ago

0.10.1

5 years ago

0.10.0

7 years ago

0.9.1

7 years ago

0.9.0

7 years ago

0.8.0

7 years ago

0.7.1

8 years ago

0.7.0

8 years ago

0.6.1

8 years ago

0.6.0

8 years ago

0.5.0

8 years ago

0.4.0

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.4

8 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.1

8 years ago