@adoratorio/hermes

Hermes

A utility library for wheel events and touch event normalization

Installation

# Install package
npm install @adoratorio/hermes

Usage

Since this package has a pkg.module field, it’s highly recommended to import it as an ES6 module with some bundlers like webpack or rollup:

import Hermes from '@adoratorio/hermes';
const hermes = new Hermes({ });

If you are not using any bundlers, you can just load the UMD bundle:

<script src="/medusa/umd/index.js"></script>
<script>var medusa = window.Hermes({ });</script>

Available options

Hermes accept in the constructor and option object with the following possible props.

parameter	type	default	description
mode	string	Hermes.MODE.VIRTUAL	The mode to use when creating the instance, VIRTUAL will not use any DOM element to detect scroll but mousewheel events instead, FAKE will use a hook div underneath the content to detect scroll and NATIVE will use de DOM element declared as container tod etect scroll events
events	Array	[Hermes.EVENT.WHEEL, Hermes.EVENT.TOUCH, Hermes.EVENT.KEYS]	The events to listen to
container	HTMLElement	document.querySelector('.hermes-container')	The DOM element used as container to detect event on
hook	HTMLElement	document.querySelector('.hermes-hook')	The DOM element used as hook for scroll amount in FAKE mode
passive	boolean	true	If you want to use passive event listeners
emitGlobal	boolean	false	If you want to emit global event on the window
touchClass	string	'.prevent-touch'	The class used to prevent touch
touchMultiplier	number	2	A multiplier for touch values, less it's going to be slower scroll and require more user action to scroll, more will end up in a fast page scroll with minimum finger move

APIs

The main core exposes only two methods

hermesInstance.bind(handler : Function); // Will call the function every event trigger
hermesInstance.unbind();

Otherwhise a global event will be emitted (if emitGlobal option is set to true). Event types are

name	enum	When
hermes-wheel	Hermes.EVENTS.WHEEL	When a type of mouswheel event is detected
hermes-touch	Herms.EVENTS.TOUCH	When a touchmouve event occurs after a touchstart, triggered also one last time on touchend with the inertia of the finger leaving the screen
hermes-spacebar	Hermes.EVENTS.SPACEBAR	When spacebar is pressed in to scroll the page
hermes-arrows	Hermes.EVENTS.ARROWS	When arrows are pressed to scroll the page
hermes-keys	Hermes.EVENTS.KEY	When any key (spacebar or arrows) is pressed to scroll the page, this is a sum event of the preceding two
SCROLL