https://github.com/thearnica/dom-locky

🙈🙉🙊 - the best way to scope a scroll, or literally any other event.
https://github.com/thearnica/dom-locky

dom-api events inert scroll

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/thearnica/dom-locky
• Owner: thearnica
• License: mit
• Created: 2018-07-14T08:26:12.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-09-16T05:28:43.000Z (over 4 years ago)
• Last Synced: 2024-10-12T05:30:51.805Z (3 months ago)
• Topics: dom-api, events, inert, scroll
• Language: JavaScript
• Size: 187 KB
• Stars: 21
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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