dl
dom-locky
npm i dom-locky
dl

dom-locky

🙈🙉🙊 - the best way to scope a scroll, or literally any other event.

by Marina

1.0.1 (see all)License:MITTypeScript:Built-In
npm i dom-locky
Readme

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

  • 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

Downloads/wk

24

GitHub Stars

18

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

1
VersionTagPublished
1.0.1
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate