Home

Awesome

dom-locky

CircleCI status Greenkeeper badge npm

NPM

🙈Loki - is God of Mischief, Madness and Evil!

🙉Locky - is God of Locks, Event capturing and Stealing. Small and very slender brother - just 1kb.

🙊Locky will never let event escape the target node, will prevent scrolls outside, will do the HTML5 inert job.

Locky will completely disable any user iterations outside of nested children.

And it has a twin-brother - react-locky

import {lockyOn} from 'dom-locky';

const unlock = lockyOn('.modal', extraProps);
const unlock = lockyOn(myElement, { onEscape: callback });
//......
unlock();

Unpkg

You may also include this library from unpkg as https://unpkg.com/dom-locky. Then locky will be available as locky global variable.

API

Locky accepts selector or HTMLElement as a first argument, and locky will be activated only on the first element matching selector Locky accepts a settings as a second argument

Default events

Focus

Locky could not propely handle focus events, and will let it get out of the form, and will block attemps to return it, as long they will have source out of the lock. To scope a focus use dom-focus-lock

Tip

important tip for Mobile Safary - while normal "touch move" will scroll "scrollable" container, touch+move started on inputs will start drag-n-drop and cause whole layer(modal/page) scroll. (it will just scroll as a 💩, or not scroll at all).

To disable this behavior - apply -webkit-overflow-scrolling: touch; on the page.

Licence

MIT