How to use hammerjs - 10 common examples

it("should check convertHammerInputType when supporting touch", () => {
      // Given
      const MockHammerInput = HammerInputInjector({
        "../const": {
          SUPPORT_TOUCH : true
        }
      }).HammerInput;
      
			// When
      let inputType = [ "touch", "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.TouchInput);

      // When
      inputType = [ "touch" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.TouchInput);

      // When
      inputType = [ "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.MouseInput);

      // When
      inputType = [ ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.null;
    });

it("should check convertHammerInputType when not supporting touch", () => {
      // Given
      const MockHammerInput = HammerInputInjector({
        "../const": {
          SUPPORT_TOUCH : false
        }
      }).HammerInput;

      // When
      let inputType = [ "touch", "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.MouseInput);

      // When
      inputType = [ "touch" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.null;

      // When
      inputType = [ "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.MouseInput);

      // When
      inputType = [ ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.null;
    });

it('should not trigger swipe if max touches constraint fails', function() {
            var hammerInstance = createHammerInstance({
                swipe_max_touches: 1,
                swipe_velocity: 0
            });
            // Simulate a transform
            var transformEvent = createFakeEvent({
                eventType: Hammer.EVENT_MOVE,
                touches: ['faketouch', 'faketouch']
            });
            var endEvent = createFakeEvent({
                eventType: Hammer.EVENT_END,
                touches: ['faketouch']
            });
            simulateSwipeGestureMoves(hammerInstance, { deltaX: 0 }, { deltaX: 2 });
            CustomSwipeGesture.handler(transformEvent, hammerInstance);
            CustomSwipeGesture.handler(endEvent, hammerInstance);
            expect(hammerInstance.trigger).not.toHaveBeenCalled();
        });
        it('should not trigger swipe if velocityX and velocityY are below threshold', function() {

// Given
      const MockHammerInput = HammerInputInjector({
        "../const": {
          SUPPORT_TOUCH : true
        }
      }).HammerInput;
      
			// When
      let inputType = [ "touch", "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.TouchInput);

      // When
      inputType = [ "touch" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.TouchInput);

      // When
      inputType = [ "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.MouseInput);

      // When
      inputType = [ ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.null;
    });

}).HammerInput;
      
			// When
      let inputType = [ "touch", "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.TouchInput);

      // When
      inputType = [ "touch" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.TouchInput);

      // When
      inputType = [ "mouse" ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.equal(Hammer.MouseInput);

      // When
      inputType = [ ];
      // Then
      expect(MockHammerInput.convertHammerInputType(inputType)).to.be.null;
    });

const initTouchEvents = function() {
  gS.$emit('optionsUpdate', "showHints", false); //HACK: mouseover interferes with mousedown during hinting somehow
  // get a reference to top canvas element
  var stage = document.getElementById('sketchlive');
  // create a manager for that element
  mc = new Hammer.Manager(stage);
  var Pan = new Hammer.Pan({
    direction: Hammer.DIRECTION_ALL,
    threshold: 0
  });
  console.log("init touchevents");
  mc.add(Pan);
  mc.on('panstart', function(e) {
    var fakeEv = {clientX: e.center.x,
                  clientY: e.center.y,
                  preventDefault: e.preventDefault};
    dispatchMouseDown(fakeEv);
  });
  mc.on('panmove', function(e) {
    var fakeEv = {clientX: e.center.x,
                  clientY: e.center.y,
                  preventDefault: e.preventDefault};
    dispatchMouseMove(fakeEv);
  });

Hammer.inherit(PointerInput, Hammer.PointerEventInput, {});
PointerInput.prototype.constructor = function() { }; // STUB, avoids init() being called too early

var MOUSE_ELEMENT_EVENTS = 'mousedown';
var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';

function MouseInput() {
  // OVERRIDE: listen for all event on the element, not on window
  // This is needed for event propagation to get the right targets
  this.evEl = MOUSE_ELEMENT_EVENTS + ' ' + MOUSE_WINDOW_EVENTS;
  this.evWin = '';

  this.pressed = false; // mousedown state
  Hammer.Input.apply(this, arguments);
}
Hammer.inherit(MouseInput, Hammer.MouseInput, {});
MouseInput.prototype.constructor = function() { }; // STUB, avoids overridden constructor being called

function TouchMouseInput() {
    Hammer.Input.apply(this, arguments);

    var handler = this.handler.bind(this);
    this.touch = new Hammer.TouchInput(this.manager, handler);
    this.mouse = new MouseInput(this.manager, handler);

    this.primaryTouch = null;
    this.lastTouches = [];
}
Hammer.inherit(TouchMouseInput, Hammer.TouchMouseInput, {});
TouchMouseInput.prototype.constructor = function() { }; // STUB, avoids overridden constructor being called

var Input = null;

setTimeout(function() {
      forEach(mouseEvents, function(e) {
        domEvent.unbind(node, e, stopEvent, true);
      });
    }, 500);
  }

  domEvent.bind(node, 'touchstart', stopMouse, true);
  domEvent.bind(node, 'touchend', allowMouse, true);
  domEvent.bind(node, 'touchcancel', allowMouse, true);

  // A touch event recognizer that handles
  // touch events only (we know, we can already handle
  // mouse events out of the box)

  var recognizer = new Hammer.Manager(node, {
    inputClass: Hammer.TouchInput,
    recognizers: []
  });


  var tap = new Hammer.Tap();
  var pan = new Hammer.Pan({ threshold: 10 });
  var press = new Hammer.Press();
  var pinch = new Hammer.Pinch();

  var doubleTap = new Hammer.Tap({ event: 'doubletap', taps: 2 });

  pinch.requireFailure(pan);
  pinch.requireFailure(press);

  recognizer.add([ pan, press, pinch, doubleTap, tap ]);

/* Mapping directions to event names */
    throwDirectionToEventName = {};
    throwDirectionToEventName[Direction.LEFT] = 'throwoutleft';
    throwDirectionToEventName[Direction.RIGHT] = 'throwoutright';
    throwDirectionToEventName[Direction.UP] = 'throwoutup';
    throwDirectionToEventName[Direction.DOWN] = 'throwoutdown';

    springThrowIn.setRestSpeedThreshold(0.05);
    springThrowIn.setRestDisplacementThreshold(0.05);

    springThrowOut.setRestSpeedThreshold(0.05);
    springThrowOut.setRestDisplacementThreshold(0.05);

    throwOutDistance = config.throwOutDistance(config.minThrowOutDistance, config.maxThrowOutDistance);

    mc = new Hammer.Manager(targetElement, {
      recognizers: [
        [
          Hammer.Pan,
          {
            threshold: 2
          }
        ]
      ]
    });

    if (prepend) {
      Card.prependToParent(targetElement);
    } else {
      Card.appendToParent(targetElement);
    }

{point, index} = this.props;

      let y = point.y + e.deltaY,
          returnValue = y;

      if ( y < resize.top - resize.panY ) {
        returnValue = resize.top - resize.panY;
      } else if ( y > C.CURVE_SIZE + resize.bottom - resize.panY ) {
        returnValue = C.CURVE_SIZE + resize.bottom - resize.panY;
      }

      return roundTo( returnValue, 5*C.CURVE_PERCENT, 2*C.CURVE_PERCENT ) - point.y;
    }

    const el = this.base.querySelector('#js-point-touch'),
          mc = propagating(new Hammer.Manager(el));

    mc.add(new Hammer.Pan({ threshold: 0 }));

    mc
      .on('pan', (e) => {
        const {point, index} = this.props;
        store.dispatch({
          type: 'POINT_TRANSLATE',
          data: { x: getTempX(e), y: getTempY(e), index }
        });
        e.stopPropagation();
      })
      .on('panend', (e) => {
        const {point, index} = this.props;
        // fire translate end and save it to the store
        store.dispatch({