Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'hammerjs' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
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({