🙈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();

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

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

• onEscape, will be triggered when someone will try "escape" the lock. See "report" events below
• noDefault[=false], disables all "default" events
• events[=defaultEvents], DOM events to manage
• group[=null], focus group id. Locks with the same group will not block each other.

• click: 'report' (will call onEscape)
• mousemove: true,
• mousedown: 'report' (will call onEscape)
• touchmove: true,
• touchstart: 'report' (will call onEscape)
• keydown: true,
• focus: false, (focus is unblockable)
• change: false,
• scroll: true, (scroll is handled separately)
• wheel: true,

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

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.

MIT