How to use the hammerjs.DIRECTION_HORIZONTAL function in hammerjs

To help you get started, we’ve selected a few hammerjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sheikalthaf / ngx-carousel / src / ngx-carousel / ngx-carousel.component.ts View on Github external
private touch(): void {
    if (this.data.touch.active) {
      const hammertime = new Hammer(this.forTouch.nativeElement);
      hammertime.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });

      hammertime.on('panstart', (ev: any) => {
        this.data.carouselWidth = this.carouselInner.offsetWidth;
        this.data.touchTransform = this.data.transform[this.data.deviceType];

        this.data.dexVal = 0;
        this.setStyle(this.carouselInner, 'transition', '');
      });
      hammertime.on('panleft', (ev: any) => {
        this.touchHandling('panleft', ev);
      });
      hammertime.on('panright', (ev: any) => {
        this.touchHandling('panright', ev);
      });
      hammertime.on('panend', (ev: any) => {
        // this.setStyle(this.carouselInner, 'transform', '');
github GoogleTrends / world-potus / components / InfoView / index.js View on Github external
componentDidMount() {
    const hammer = new Hammer(this.dom.container)
    // Not using isTouch because there is no need to swipe pages on desktop
    hammer.set({ enable: !this.props.desktop })
    hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL })

    hammer.on('swiperight', () => {
      const newIndex = (this.state.pageIndex < 1) ? 0 : (this.state.pageIndex - 1)
      this.setState({pageIndex: newIndex})
    })

    hammer.on('swipeleft', () => {
      const newIndex = (this.state.pageIndex < 2) ? (this.state.pageIndex + 1) : 2
      this.setState({pageIndex: newIndex})
    })
  }
github pluginjs / pluginjs / modules / lightbox / src / components / slide / slide.js View on Github external
this.instance.close()
            }
          }
        }
      },
      this.slide
    )

    Pj.emitter.on('resize', this.resizeHandle.bind(this))
    if (this.instance.length <= 1) {
      return
    }

    this.hammer = new Hammer(this.slide)
    this.hammer.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL })
    this.hammer.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL })

    this.hammer.on('swipe', event => {
      const direction = event.direction
      if (direction === 2) {
        this.instance.next()
      } else if (direction === 4) {
        this.instance.pre()
      }
    })

    this.hammer.on('panstart', event => {
      this.instance.drap = true
    })
    this.hammer.on('panmove', event => {
      const drapDistance = event.deltaX
      if (hasClass(this.classes.SLIDETRANSITION, this.slide)) {
github coralproject / talk / client / coral-admin / src / components / ModerationList.js View on Github external
bindGestures () {
    const {modActions} = this.props;
    this._hammer = new Hammer(this.base);
    this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});

    if (modActions.indexOf('reject') !== -1) {
      this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected'));
    }
    if (modActions.indexOf('approve') !== -1) {
      this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved'));
    }
  }
github pluginjs / pluginjs / modules / swipeable / src / main.js View on Github external
this.container = this.getContainer()
    addClass(this.classes.NAMESPACE, this.element)
    addClass(this.classes.CONTAINER, this.container)

    if (this.axis === 'y') {
      addClass(this.classes.VERTICAL, this.container)
    }

    this.getSize()

    this.hammer = new Hammer(this.element)
    this.hammer.get('pan').set({
      direction:
        this.axis === 'y'
          ? Hammer.DIRECTION_VERTICAL
          : Hammer.DIRECTION_HORIZONTAL
    })

    this.bind()
    this.enter('initialized')
    this.trigger(EVENTS.READY)
  }
github kerrishotts / Mastering-PhoneGap-Code-Package / logology-v12 / src / www / js / lib / View.js View on Github external
get HAMMER_RECOGNIZERS() {
        return [
            [Hammer.Rotate, { enable: false }],
            [Hammer.Pinch, { enable: false }, ['rotate']],
            [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }],
            [Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }, ['swipe']],
            [Hammer.Tap, { threshold: 44, time: 1500 }],
            [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']],
            [Hammer.Press, { threshold: 44, time: 500 }]
        ]
    }
github kerrishotts / Mastering-PhoneGap-Code-Package / logology-v12 / src / www / js / lib / View.js View on Github external
get HAMMER_RECOGNIZERS() {
        return [
            [Hammer.Rotate, { enable: false }],
            [Hammer.Pinch, { enable: false }, ['rotate']],
            [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }],
            [Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }, ['swipe']],
            [Hammer.Tap, { threshold: 44, time: 1500 }],
            [Hammer.Tap, { event: 'doubletap', taps: 2 }, ['tap']],
            [Hammer.Press, { threshold: 44, time: 500 }]
        ]
    }
github ournameismud / mud-fractal / src / js / ui / slide.js View on Github external
addGestures = () => {
		this.mc = new Hammer.Manager(this.$tag, {
			recognizers: [
				[
					Hammer.Pan,
					{
						direction: Hammer.DIRECTION_HORIZONTAL
					}
				]
			]
		})
		this.mc.add(new Hammer.Pan())
		this.mc.on('panend', this.onPanEnd)
	}
github NUKnightLab / storyline / src / js / slider.js View on Github external
var createHammer = function(v) {
      var mc = new Hammer.Manager(v, {})
      var pan = new Hammer.Pan({
        direction: Hammer.DIRECTION_HORIZONTAL,
        threshold: 25
      })
      var tap = new Hammer.Tap({
        domEvents: true
      })
      var swipe = new Hammer.Swipe({
        direction: Hammer.DIRECTION_HORIZONTAL,
        velocity: 0.5,
        threshold: 250
      })

      pan.recognizeWith(swipe)

      mc.add(pan)
      mc.add(tap)
      mc.add(swipe)
      mc.on('swipe panleft panright panend tap', handleHammer)
    }
github software-mansion / react-native-gesture-handler / web / PanGestureHandler.js View on Github external
activeOffsetYEnd,
      minDist,
    } = config;
    let directions = [];
    let horizontalDirections = [];

    if (!isnan(minDist)) {
      return Hammer.DIRECTION_ALL;
    }

    if (!isnan(activeOffsetXStart))
      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;