Skip to content

capsidjs/capsid-scroll-lock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

capsid-scroll-lock v2.0.0

CircleCI codecov

🗜️ Body Scroll Lock as capsid module 💊

Usage

Install via npm:

npm i --save-dev capsid capsid-scroll-lock

Install it to capsid.

capsid.install(require('capsid-scroll-lock'))

Then, add scroll-lock class to your body tag.

<body class="scroll-lock">
  ...
</body>

Then dispatch capsid-scroll-lock/LOCK custom DOM event to lock the scroll of body and capsid-scroll-lock/UNLOCK event to unlock it.

document.body.dispatchEvent(new CustomEvent('capsid-scroll-lock/LOCK'))

This locks the body scroll.

document.body.dispatchEvent(new CustomEvent('capsid-scroll-lock/UNLOCK'))

The above unlocks the body scroll.

Those event names are available as LOCK and UNLOCK values from the module.

const { LOCK, UNLOCK } = require('capsid-scroll-lock')

console.log(LOCK) // => "capsid-scroll-lock/LOCK"
console.log(UNLOCK) // => "capsid-scroll-lock/UNLOCK"

Example

If you use vanilla.js

const { LOCK, UNLOCK } = require('capsid-scroll-lock')

document.body.dispatchEvent(new CustomEvent(LOCK))
document.body.dispatchEvent(new CustomEvent(UNLOCK))

If you use capsid.js

const { LOCK, UNLOCK } = require('capsid-scroll-lock')
const { component, emits } = require('capsid')

@component('my-component')
class MyComponent {
  @emits(LOCK)
  lockMethod () { ... }

  @emits(UNLOCK)
  unlockMethod () { ... }
}

And put my-component somewhere in body

<body class="scroll-lock">
  ...
  <div class="my-component">
  </div>
  ...
</body>

Then invoking lockMethod locks the body and unlockMethod unlocks the body.

API

const { install, LOCK, UNLOCK } = require('capsid-scroll-lock')

install(capsid, { name })

  • @param capsid - The capsid object
  • @param {string} name - The name of scroll-lock class. Default scroll-lock.

Installs the module to capsid.

require('capsid-scroll-lock').install(capsid, { name: 'my-scroll-lock' })

Alternatively you can call it like:

capsid.install(require('capsid-scroll-lock'), { name: 'my-scroll-lock' })

LOCK, UNLOCK

const LOCK = 'capsid-scroll-lock/LOCK'
const UNLOCK = 'capsid-scroll-lock/UNLOCK'

These are custom event names for locking and unlocking the body scroll.

License

MIT