Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

wheel-gestures

Package Overview
Dependencies
Maintainers
0
Versions
65
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wheel-gestures - npm Package Compare versions

Comparing version 2.2.45 to 2.2.46

10

dist/events/EventBus.d.ts

@@ -1,8 +0,8 @@

export declare type EventMapEmpty = Record<string, unknown>;
export declare type EventListener<D = unknown> = (data: D) => void;
export declare type Off = () => void;
export type EventMapEmpty = Record<string, unknown>;
export type EventListener<D = unknown> = (data: D) => void;
export type Off = () => void;
export default function EventBus<EventMap = EventMapEmpty>(): Readonly<{
on: <EK extends keyof EventMap>(type: EK, listener: EventListener<EventMap[EK]>) => Off;
off: <EK_1 extends keyof EventMap>(type: EK_1, listener: EventListener<EventMap[EK_1]>) => void;
dispatch: <EK_2 extends keyof EventMap>(type: EK_2, data: EventMap[EK_2]) => void;
off: <EK extends keyof EventMap>(type: EK, listener: EventListener<EventMap[EK]>) => void;
dispatch: <EK extends keyof EventMap>(type: EK, data: EventMap[EK]) => void;
}>;
import { WheelEventData } from '../types';
declare type UnobserveTarget = () => void;
type UnobserveTarget = () => void;
export declare function WheelTargetObserver(eventListener: (wheelEvent: WheelEventData) => void): Readonly<{

@@ -4,0 +4,0 @@ observe: (target: EventTarget) => UnobserveTarget;

@@ -0,0 +0,0 @@ export { WheelGestures as default } from './wheel-gestures/wheel-gestures';

@@ -0,0 +0,0 @@ import { WheelEventData } from '../../types';

@@ -10,3 +10,3 @@ import { WheelEventData, WheelEventState } from '../../types';

on: <EK extends "wheel">(type: EK, listener: import("../../events/EventBus").EventListener<import("../../types").WheelGesturesEventMap[EK]>) => import("../../events/EventBus").Off;
off: <EK_1 extends "wheel">(type: EK_1, listener: import("../../events/EventBus").EventListener<import("../../types").WheelGesturesEventMap[EK_1]>) => void;
off: <EK extends "wheel">(type: EK, listener: import("../../events/EventBus").EventListener<import("../../types").WheelGesturesEventMap[EK]>) => void;
observe: (target: EventTarget) => () => void;

@@ -16,3 +16,3 @@ unobserve: (target: EventTarget) => void;

feedWheel: (wheelEvents: WheelEventData | WheelEventData[]) => void;
updateOptions: (newOptions?: Partial<import("../../types").WheelGesturesConfig>) => import("../../types").WheelGesturesConfig;
updateOptions: (newOptions?: import("../../types").WheelGesturesOptions) => import("../../types").WheelGesturesConfig;
}>;

@@ -22,4 +22,4 @@ allPhaseData: WheelEventState[];

};
export declare type Range = [number, number];
export declare type RangeWheelType = 'user' | 'momentum';
export type Range = [number, number];
export type RangeWheelType = 'user' | 'momentum';
export interface PhaseRange extends Omit<WheelEventState, 'previous' | 'axisMovementProjection'> {

@@ -26,0 +26,0 @@ wheelType: RangeWheelType;

@@ -5,6 +5,6 @@ /**

*/
export declare type VectorXYZ = [number, number, number];
export declare type BooleanXYZ = [boolean, boolean, boolean];
export declare type PreventWheelActionType = boolean | 'x' | 'y' | 'z';
export declare type ReverseSign = boolean | BooleanXYZ;
export type VectorXYZ = [number, number, number];
export type BooleanXYZ = [boolean, boolean, boolean];
export type PreventWheelActionType = boolean | 'x' | 'y' | 'z';
export type ReverseSign = boolean | BooleanXYZ;
export interface WheelGesturesConfig {

@@ -14,4 +14,4 @@ preventWheelAction: PreventWheelActionType;

}
export declare type WheelGesturesOptions = Partial<WheelGesturesConfig>;
export declare type WheelEventDataRequiredFields = 'deltaMode' | 'deltaX' | 'deltaY' | 'timeStamp';
export type WheelGesturesOptions = Partial<WheelGesturesConfig>;
export type WheelEventDataRequiredFields = 'deltaMode' | 'deltaX' | 'deltaY' | 'timeStamp';
export interface WheelEventData extends Pick<WheelEvent, WheelEventDataRequiredFields>, Partial<Omit<WheelEvent, WheelEventDataRequiredFields>> {

@@ -31,4 +31,4 @@ }

}
export declare type WheelGesturesEventMap = {
export type WheelGesturesEventMap = {
wheel: WheelEventState;
};

@@ -0,0 +0,0 @@ export * from './projection';

@@ -0,0 +0,0 @@ /**

@@ -0,0 +0,0 @@ 'use strict';

@@ -0,0 +0,0 @@ function _extends() {

@@ -0,0 +0,0 @@ export declare const __DEV__: boolean;

@@ -0,0 +0,0 @@ import { VectorXYZ } from '../types';

import { WheelGesturesConfig } from '../types';
export declare const configDefaults: WheelGesturesConfig;

@@ -0,0 +0,0 @@ /**

import { WheelEventData, WheelGesturesConfig, WheelGesturesEventMap, WheelGesturesOptions } from '../types';
export declare function WheelGestures(optionsParam?: WheelGesturesOptions): Readonly<{
on: <EK extends "wheel">(type: EK, listener: import("../events/EventBus").EventListener<WheelGesturesEventMap[EK]>) => import("../events/EventBus").Off;
off: <EK_1 extends "wheel">(type: EK_1, listener: import("../events/EventBus").EventListener<WheelGesturesEventMap[EK_1]>) => void;
off: <EK extends "wheel">(type: EK, listener: import("../events/EventBus").EventListener<WheelGesturesEventMap[EK]>) => void;
observe: (target: EventTarget) => () => void;

@@ -6,0 +6,0 @@ unobserve: (target: EventTarget) => void;

@@ -0,0 +0,0 @@ import { ReverseSign, VectorXYZ, WheelEventData } from '../types';

{
"name": "wheel-gestures",
"version": "2.2.45",
"version": "2.2.46",
"description": "wheel gestures and momentum detection",

@@ -8,2 +8,9 @@ "main": "dist/index.js",

"typings": "dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"require": "./dist/index.js",
"import": "./dist/wheel-gestures.esm.js"
}
},
"files": [

@@ -14,3 +21,3 @@ "dist",

"engines": {
"node": ">=10"
"node": "18.x"
},

@@ -20,5 +27,5 @@ "scripts": {

"build": "tsdx build",
"test": "tsdx test",
"lint": "tsdx lint src docs && yarn type-check",
"lint:fix": "tsdx lint src docs --fix",
"test": "jest",
"lint": "eslint src docs && yarn type-check",
"lint:fix": "eslint src docs --fix",
"type-check": "tsc --noEmit",

@@ -55,34 +62,48 @@ "prepare": "tsdx build; husky install",

"peerDependencies": {},
"dependencies": {},
"dependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"jest-environment-jsdom": "^29.7.0"
},
"devDependencies": {
"@testing-library/react": "^11.0.1",
"@types/jest": "^26.0.4",
"@eslint/eslintrc": "^3.1.0",
"@eslint/js": "^9.6.0",
"@testing-library/react": "^12.0.0",
"@types/jest": "^29.5.12",
"@typescript-eslint/eslint-plugin": "^7",
"@typescript-eslint/parser": "^7",
"bundlewatch": "^0.3.1",
"eslint-plugin-import": "^2.19.1",
"eslint": "^8",
"eslint-config-prettier": "^8",
"eslint-config-react-app": "^7",
"eslint-plugin-flowtype": "^8",
"eslint-plugin-import": "^2",
"eslint-plugin-jsx-a11y": "^6",
"eslint-plugin-prettier": "^5",
"eslint-plugin-react": "^7",
"eslint-plugin-react-hooks": "^4",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-app": "^6.2.2",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"semantic-release": "^17.4.2",
"husky": "^7.0.0",
"lint-staged": "^12.0.2",
"semantic-release": "^19.0.5",
"ts-jest": "^29",
"tsdx": "^0.14.1",
"tslib": "^2.0.0",
"typescript": "^4.2.3"
"typescript": "^5"
},
"resolutions": {
"**/@typescript-eslint/eslint-plugin": "^4.11.1",
"**/@typescript-eslint/parser": "^4.11.1",
"**/jest": "^26.6.3",
"**/ts-jest": "^26.4.4",
"**/typescript": "^4.2.3"
"**/jest": "^29",
"**/ts-jest": "^29",
"**/typescript": "^5",
"@typescript-eslint/eslint-plugin": "^7",
"@typescript-eslint/parser": "^7",
"eslint": "^8",
"eslint-config-prettier": "^8",
"eslint-config-react-app": "^7",
"eslint-plugin-flowtype": "^8",
"eslint-plugin-import": "^2",
"eslint-plugin-jsx-a11y": "^6",
"eslint-plugin-prettier": "^5",
"eslint-plugin-react": "^7",
"eslint-plugin-react-hooks": "^4"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jx,tsx,ts}",
"!**/node_modules/**",
"!**/dist/**",
"!**/build/**",
"!**/*.config.{js,jx,tsx,ts}"
]
},
"bundlewatch": {

@@ -89,0 +110,0 @@ "files": [

@@ -1,10 +0,14 @@

# ![wheel gestures](./WheelGestures.svg)
<h1 align="center">WheelGestures</h1>
<p align="center">
wheel gestures and momentum detection in the browser
<a href="https://wheel-gestures.xiel.dev">
<img alt="wheel gestures animation, link to docs" src="./wheelGestures.gif" />
</a>
</p>
<p align="center">
wheel gestures and momentum detection in the browser
</p>
<p align="center">
<a href="https://www.npmjs.com/package/wheel-gestures" rel="nofollow"><img src="https://camo.githubusercontent.com/da238eaad5556c489501f93369cd209a2e7e4351/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f776865656c2d67657374757265732f6c61746573742e737667" alt="npm (tag)" data-canonical-src="https://img.shields.io/npm/v/wheel-gestures/latest.svg" style="max-width:100%;"></a>
<a href="https://bundlephobia.com/result?p=wheel-gestures@2.1.1" rel="nofollow"><img src="https://camo.githubusercontent.com/7d96deb09bd6d0a2f58a54d94eeaf2dcf0891b42/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f776865656c2d6765737475726573" alt="only about 2kb minified and gzipped" data-canonical-src="https://badgen.net/bundlephobia/minzip/wheel-gestures" style="max-width:100%;"></a>
<a href="https://www.npmjs.com/package/wheel-gestures" rel="nofollow"><img src="https://img.shields.io/npm/v/wheel-gestures/latest.svg" alt="npm (tag)" data-canonical-src="https://img.shields.io/npm/v/wheel-gestures/latest.svg" style="max-width:100%;"></a>
</p>

@@ -14,2 +18,55 @@

## Installation
Install wheel-gestures using your package manager:
```sh
yarn add wheel-gestures # OR npm install wheel-gestures
```
## Usage
Import and create an instance of WheelGestures and then add the element you want to observe.
````TypeScript
import { WheelGestures } from 'wheel-gestures'
// create an instance per element
const wheelGestures = WheelGestures()
// find and observe the element the user can interact with
const element = window.document.querySelector('.slider')
wheelGestures.observe(element)
// add your event callback
wheelGestures.on('wheel', (wheelEventState) => {
//...
})
````
There are [options](https://wheel-gestures.xiel.dev/docs/options/) to customize the behaviour.
#### WheelEventState
This is the TypeScript type of the WheelEventState object provided. Even if you do not use TypeScript, this might be helpful to see how the data is provided:
````TypeScript
export type VectorXYZ = [number, number, number]
export interface WheelEventState {
isStart: boolean
isMomentum: boolean
isEnding: boolean
isMomentumCancel: boolean
axisDelta: VectorXYZ
axisVelocity: VectorXYZ
axisMovement: VectorXYZ
axisMovementProjection: VectorXYZ
event: WheelEvent | WheelEventData
previous?: WheelEventState
}
````
Read more in the [docs](https://wheel-gestures.xiel.dev).
**OS & Browsers**

@@ -19,3 +76,2 @@

- Windows (Chrome, Firefox, Edge), Microsoft Precision Touchpads
- Linux (to be tested)

@@ -22,0 +78,0 @@ #### Prior Art

@@ -8,3 +8,3 @@ import * as WheelGestureExports from '../../index'

expect(WheelGestureExports).toMatchInlineSnapshot(`
Object {
{
"WheelGestures": [Function],

@@ -15,5 +15,5 @@ "absMax": [Function],

"clamp": [Function],
"configDefaults": Object {
"configDefaults": {
"preventWheelAction": true,
"reverseSign": Array [
"reverseSign": [
true,

@@ -20,0 +20,0 @@ true,

@@ -107,3 +107,3 @@ import { WheelEventData, WheelGesturesOptions } from '../../types'

test('should warn about unsupported preventWheelAction in debug mode', () => {
const logWarn = spyOn(console, 'warn')
const logWarn = jest.spyOn(console, 'warn').mockImplementation(() => {})

@@ -115,3 +115,5 @@ testPreventWheelActionWithOptions(swipeUpTrackpad.wheelEvents, {

expect(logWarn.calls.mostRecent().args[0]).toMatchInlineSnapshot(`"unsupported preventWheelAction value: xyz"`)
expect(logWarn.mock.calls[0][0]).toMatchInlineSnapshot(`"unsupported preventWheelAction value: xyz"`)
// expect(logWarn.mock.calls.at(-1).args[0]).toMatchInlineSnapshot(`"unsupported preventWheelAction value: xyz"`)
})

@@ -7,3 +7,3 @@ import { WheelGestures } from '../..'

expect(WheelGestures()).toMatchInlineSnapshot(`
Object {
{
"disconnect": [Function],

@@ -10,0 +10,0 @@ "feedWheel": [Function],

@@ -39,5 +39,5 @@ import { WheelGestures } from '../..'

expect(WheelGestures().updateOptions()).toMatchInlineSnapshot(`
Object {
{
"preventWheelAction": true,
"reverseSign": Array [
"reverseSign": [
true,

@@ -53,3 +53,3 @@ true,

expect(WheelGestures({ preventWheelAction: 'x', reverseSign: true }).updateOptions()).toMatchInlineSnapshot(`
Object {
{
"preventWheelAction": "x",

@@ -75,3 +75,3 @@ "reverseSign": true,

it('should warn about undefined/null values', function() {
const logWarn = spyOn(console, 'error')
const logWarn = jest.spyOn(console, 'error').mockImplementation(() => {})
const wheelGestures = WheelGestures({ preventWheelAction: undefined })

@@ -78,0 +78,0 @@ expect(logWarn).toHaveBeenCalledTimes(1)

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc