Skip to content

Commit

Permalink
feat(esl-event-listener): add ability to ESLWheelTarget to ignore inc…
Browse files Browse the repository at this point in the history
…ome wheel events by predicate
  • Loading branch information
ala-n committed Jun 27, 2024
1 parent 1c9f8c4 commit af47dbb
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/modules/esl-event-listener/core/targets/wheel.target.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {ESLEventListener} from '../listener';
import {ESLWheelEvent} from './wheel.target.event';

import type {ESLWheelEventInfo} from './wheel.target.event';
import type {Predicate} from '../../../esl-utils/misc/functions';
import type {ESLDomElementTarget} from '../../../esl-utils/abstract/dom-target';
import type {ElementScrollOffset} from '../../../esl-utils/dom/scroll';

Expand All @@ -24,6 +25,8 @@ export interface ESLWheelTargetSetting {
distance?: number;
/** The maximum duration of the wheel events to consider it inertial */
timeout?: number;
/** Predicate to ignore wheel events */
ignore?: Predicate<WheelEvent>;
}

/**
Expand All @@ -33,7 +36,8 @@ export class ESLWheelTarget extends SyntheticEventTarget {
protected static defaultConfig: Required<ESLWheelTargetSetting> = {
skipOnScroll: true,
distance: 400,
timeout: 100
timeout: 100,
ignore: () => false
};

protected readonly config: Required<ESLWheelTargetSetting>;
Expand Down Expand Up @@ -70,6 +74,7 @@ export class ESLWheelTarget extends SyntheticEventTarget {
/** Handles wheel events */
@bind
protected _onWheel(event: WheelEvent): void {
if (this.config.ignore(event)) return;
if (this.config.skipOnScroll) {
const offsets = getParentScrollOffsets(event.target as Element, this.target);
this.scrollData = this.scrollData.concat(offsets);
Expand Down
26 changes: 26 additions & 0 deletions src/modules/esl-event-listener/test/targets/wheel.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,32 @@ describe('ESLWheelTarget', () => {
});
});

describe('ESLWheelTarget instance ignore predicate support', () => {
const $el = document.createElement('div');
const target = ESLWheelTarget.for($el, {
distance: 50,
timeout: 10,
ignore: (e) => e.deltaX === 0
});
const listener = jest.fn();

beforeAll(() => target.addEventListener('longwheel', listener));
afterAll(() => target.removeEventListener('longwheel', listener));
beforeEach(() => listener.mockReset());

test('ESLWheelTarget ignores vertical scroll when predicate filter deltaX amount', () => {
$el.dispatchEvent(Object.assign(new Event('wheel'), {deltaX: 0, deltaY: 100}));
jest.advanceTimersByTime(100);
expect(listener).not.toHaveBeenCalled();
});

test('ESLWheelTarget ignores horizontal scroll when predicate filter deltaX amount', () => {
$el.dispatchEvent(Object.assign(new Event('wheel'), {deltaX: 100, deltaY: 0}));
jest.advanceTimersByTime(100);
expect(listener).toHaveBeenCalled();
});
});

describe('ESLWheelTarget ignores "short" scroll events', () => {
const $el = document.createElement('div');
const target = ESLWheelTarget.for($el, {timeout: 50, distance: 101});
Expand Down

0 comments on commit af47dbb

Please sign in to comment.