dom-locky

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 21 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# dom-locky 
[![CircleCI status](https://img.shields.io/circleci/project/github/thearnica/dom-locky/master.svg?style=flat-square)](https://circleci.com/gh/thearnica/dom-locky/tree/master)
[![Greenkeeper badge](https://badges.greenkeeper.io/thearnica/dom-locky.svg)](https://greenkeeper.io/)
[![npm](https://img.shields.io/npm/v/dom-locky.svg)](https://www.npmjs.com/package/dom-locky)
----

[![NPM](https://nodei.co/npm/dom-locky.png?downloads=true&stars=true)](https://nodei.co/npm/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](https://github.com/theKashey/react-locky)
```js
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](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](https://github.com/theKashey/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

dom-locky

Today's picks

Was this content helpful?

Recent Feedback

dom-locky

Today's picks

Was this content helpful?

Recent Feedback

Download README