Nitroglycerin Pickle Machine

    vanilla-swipe
    TypeScript icon, indicating that this package has built-in type declarations

    2.4.0 • Public • Published

    vanilla-swipe

    Tiny vanilla JS library to detect swipe direction.

    Build Status npm version covarage

    👉 Live demo.

    Types

    type ConstructorProps = {
      element?: HTMLElement | null;
      target?: HTMLElement | null;
      delta?: number | 10;
      directionDelta?: number | 0;
      rotationAngle?: number | 0;
      mouseTrackingEnabled?: boolean | false;
      touchTrackingEnabled?: boolean | true;
      preventDefaultTouchmoveEvent?: boolean | false;
      preventTrackingOnMouseleave?: boolean | false;
      onSwipeStart?: EventHandler;
      onSwiping?: EventHandler;
      onSwiped?: EventHandler;
      onTap?: EventHandler;
    };
    
    type EventHandler = {
      (e: Event, data: EventData): void;
    };
    
    type EventData = {
      absX: number;
      absY: number;
      deltaX: number;
      deltaY: number;
      directionX: 'LEFT' | 'RIGHT' | 'NONE';
      directionY: 'TOP' | 'BOTTOM' | 'NONE';
      duration: number; // ms
      velocity: number; // (px/ms)
    };

    Props

    • element - target event trigger
    • target - additionally target event trigger, if specified with the element, will be used by all handlers to trigger the action
    • delta - minimal distance in px before a swipe starts
    • directionDelta - minimum distance in px required for the direction to be reversed while swiping.
    • rotationAngle - rotation angle
    • mouseTrackingEnabled - enable mouse tracking
    • touchTrackingEnabled - enable touch tracking
    • preventDefaultTouchmoveEvent - prevent default touch events while touching
    • preventTrackingOnMouseleave - triggered onSwiped callback when the event loses the element's focus
    • onSwipeStart - triggered on swipe start (if the delta is passed)
    • onSwiping - triggered during swipe
    • onSwiped - triggered after swipe
    • onTap - triggered when the swipe value is less than the minimum distance (delta)

    Methods

    • init(): void
    • update(options: ConstructorProps): void
    • destroy(): void
    • static isTouchEventsSupported(): boolean

    Install

    npm install vanilla-swipe

    Examples

    import VanillaSwipe from 'vanilla-swipe';
    
    const isTouchEventsSupported = VanillaSwipe.isTouchEventsSupported();
    
    const VS = new VanillaSwipe({
      element: document.getElementById('some-id'),
      onSwiping: handler,
      onSwiped: handler,
      mouseTrackingEnabled: true,
    });
    
    VS.init();
    
    function handler() {
      console.log(...arguments); // -> Event, EventData
    }

    Run project

    npm i
    npm start
    

    Tests

    npm test
    

    Coverage

    npm run test:coverage
    

    Install

    npm i vanilla-swipe

    DownloadsWeekly Downloads

    29,405

    Version

    2.4.0

    License

    MIT

    Unpacked Size

    51.3 kB

    Total Files

    47

    Last publish

    Collaborators

    • maxmarinich