How to use the hammerjs.DIRECTION_VERTICAL function in hammerjs

attachEvents() {
    this.gesturesHandler = new Hammer.Manager(this.wrapperNode, {
      recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL }]]
    })

    // to be completely accurate, `maximumGestureDelta` should be the difference between the top of the menu and the
    // bottom of the page; but using the height is much easier to compute and accurate enough.
    const maximumGestureDistance = this.menuNode.getBoundingClientRect().height
    // between 0 and 1, how far down the gesture must be to be considered complete upon release
    const minimumCloseDistance = 0.6
    // a gesture faster than this will dismiss the menu, regardless of distance traveled
    const minimumCloseVelocity = 0.6

    let currentGestureProgress = null

    this.gesturesHandler.on('panstart', () => {
      this.turnTransitionsOff()
      currentGestureProgress = 0
    })

setupHammerHandlers() {
    let sidebarEle: HTMLElement = this._elementRef.nativeElement.querySelector('.ion-alpha-sidebar');

    if (!sidebarEle) return;

    let mcHammer = new Hammer(sidebarEle, {
      recognizers: [
        // RecognizerClass, [options], [recognizeWith, ...], [requireFailure, ...]
        [Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL }],
      ]
    });

    mcHammer.on('panup pandown', _.throttle((e: any) => {
      const closestEle: any = document.elementFromPoint(e.center.x, e.center.y);
      if (closestEle && ['LI', 'A'].indexOf(closestEle.tagName) > -1) {
        const letter = closestEle.innerText;
        if (letter) {
          this.alphaScrollGoToList(letter);
        }
      }
    }, 50));
  }

ngAfterViewInit() {
        this._renderer.setStyle(this._element.nativeElement.querySelector('.ion-bottom-drawer-scrollable-content :first-child'), 'touch-action', 'none');
        this._setDrawerState(this.state);
        const hammer = new Hammer(this._element.nativeElement);
        hammer.get('pan').set({ enable: true, direction: Hammer.DIRECTION_VERTICAL });
        hammer.on('pan panstart panend', (ev) => {
            if (this.disableDrag) {
                return;
            }
            switch (ev.type) {
                case 'panstart':
                    this._handlePanStart();
                    break;
                case 'panend':
                    this._handlePanEnd(ev);
                    break;
                default:
                    this._handlePan(ev);
            }
        });
    }

ngAfterViewInit() {
    this._renderer.setStyle(this._element.nativeElement.querySelector('.ion-bottom-drawer-scrollable-content :first-child'),
      'touch-action', 'none');
    this._setDrawerState(this.state);

    const hammer = new Hammer(this._element.nativeElement);
    hammer.get('pan').set({ enable: true, direction: Hammer.DIRECTION_VERTICAL });
    hammer.on('pan panstart panend', (ev: any) => {
      if (this.disableDrag) {
        return;
      }

      switch (ev.type) {
        case 'panstart':
          this._handlePanStart();
          break;
        case 'panend':
          this._handlePanEnd(ev);
          break;
        default:
          this._handlePan(ev);
      }
    });

attachTouchHandler() {
    const options = {
      dragLockToAxis: true,
      dragBlockHorizontal: true,
      preventDefault: true
    };
    const hammer = new Hammer(this.footer, options);
    hammer.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

    hammer.on('swipe', (e) => { this.handleSwipeEvent(e); });
  }

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPullupComponent } from './ionic-pullup.component';
import { IonicPullupComponentTabComponent } from './ionic-pullup-tab.component';
import * as Hammer from 'hammerjs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    pan: { direction: Hammer.DIRECTION_VERTICAL },
  };
}

@NgModule({
  declarations: [ IonicPullupComponent, IonicPullupComponentTabComponent ],
  imports: [
  ],
  exports: [ IonicPullupComponent, IonicPullupComponentTabComponent ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig,
    },
  ]
})

horizontalDirections.push(Hammer.DIRECTION_LEFT);
    if (!isnan(activeOffsetXEnd))
      horizontalDirections.push(Hammer.DIRECTION_RIGHT);
    if (horizontalDirections.length === 2)
      horizontalDirections = [Hammer.DIRECTION_HORIZONTAL];

    directions = directions.concat(horizontalDirections);
    let verticalDirections = [];

    if (!isnan(activeOffsetYStart))
      verticalDirections.push(Hammer.DIRECTION_UP);
    if (!isnan(activeOffsetYEnd))
      verticalDirections.push(Hammer.DIRECTION_DOWN);

    if (verticalDirections.length === 2)
      verticalDirections = [Hammer.DIRECTION_VERTICAL];

    directions = directions.concat(verticalDirections);

    if (!directions.length) {
      return Hammer.DIRECTION_NONE;
    }
    if (
      directions[0] === Hammer.DIRECTION_HORIZONTAL &&
      directions[1] === Hammer.DIRECTION_VERTICAL
    ) {
      return Hammer.DIRECTION_ALL;
    }
    if (horizontalDirections.length && verticalDirections.length) {
      return Hammer.DIRECTION_ALL;
    }

options = {
			contentEl: params.contentEl || document.getElementById( defaults.contentEl ),
			ptrEl: params.ptrEl || document.getElementById( defaults.ptrEl ),
			distanceToRefresh: params.distanceToRefresh || defaults.distanceToRefresh,
			loadingFunction: params.loadingFunction || defaults.loadingFunction,
			resistance: params.resistance || defaults.resistance,
			hammerOptions: params.hammerOptions || {}
		};

		if ( ! options.contentEl || ! options.ptrEl ) {
			return false;
		}

		var h = new Hammer( options.contentEl, options.hammerOptions );

		h.get( 'pan' ).set( { direction: Hammer.DIRECTION_VERTICAL } );

		h.on( 'panstart', _panStart );
		h.on( 'pandown', _panDown );
		h.on( 'panup', _panUp );
		h.on( 'panend', _panEnd );
	};

config: (el, inited, context) => {
            if (inited) {
                return;
            }
            ctrl.setContentEl(el);
            const mc = new Hammer.Manager(el, {});
            mc.add(new Hammer.Pan({
                direction: opts.orientation === 'vertical'
                    ? Hammer.DIRECTION_VERTICAL
                    : opts.orientation === 'all'
                        ? Hammer.DIRECTION_ALL
                        : Hammer.DIRECTION_HORIZONTAL,
                threshold: 0
            }));
            mc.on('panmove', ctrl.handleDrag);
            mc.on('panend', ctrl.handleDragEnd);
            mc.on('panstart', ctrl.handleDragStart);
            context.onunload = () => {
                mc.off('panmove', ctrl.handleDrag);
                mc.off('panend', ctrl.handleDragEnd);
                mc.off('panstart', ctrl.handleDragStart);
            };
        }
    },

bodyEl: params.bodyEl || defaults.bodyEl,
      distanceToRefresh: params.distanceToRefresh || defaults.distanceToRefresh,
      loadingFunction: params.loadingFunction || defaults.loadingFunction,
      resistance: params.resistance || defaults.resistance,
      hammerOptions: params.hammerOptions || {}
    };

    if (!options.contentEl || !options.ptrEl) {
      return false;
    }

    bodyClass = options.bodyEl.classList;

    const h = new Hammer(options.contentEl, options.hammerOptions);

    h.get('pan').set({ direction: Hammer.DIRECTION_VERTICAL });

    h.on('panstart', _panStart);
    h.on('pandown', _panDown);
    h.on('panup', _panUp);
    h.on('panend', _panEnd);
  };