Awesome
dom-locky
🙈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
- 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.
Default events
- 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,
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