rolends1986 / touch-simulate

Simulate touch events even on your desktop browser

Touch-simulate

Simulate touch event(A fake one with pageX, pageY, clientX, clientY available) even at desktop browser for testing.

You can have touches by e.touches[0] e.changedTouches[0] or e.targetTouches[0], they are the same.

Already used for testing my components like iscroll, pull-to-refresh and sweet-sortable

Features

• Automatic emit touchmove when moving
• Corrent e.clientX, e.clientY and many others
• Promise based, chainaible methods
• Confige movemoment by speed and ease function

Install

npm i touch-simulate -D

Usage

var el = document.getElementById('demo')
var TouchSimulate = require('touch-simulate')
moveable(el)

var touch = new TouchSimulate(el, {
  point: true
})

touch.start() // fire touchstart at center of element
.moveRight(150, false) // move right 150px, no touchend event
.wait(100) // wait 100ms
.moveDown(150, false)
.wait(100)
.moveLeft(150, false)
.wait(100)
.moveUp(150) // move up 150px and fire touchend

You can chain the methods, the function call would wait for previous one to be fullfilled, the chainable method list:

start moveUp moveDown moveLeft moveRight moveTo move wait

API

TouchSimulate(el, option)

Create TouchSimulate instance with element and options

• option.speed set speed of px/s default 40
• option.fixTarget use the real target at the point instead of el to dispatch the event
• option.point show a transparent point at the screen, can not use with fixTarget
• option.ease define a ease function for the movemonent, default linear

.speed(number)

Set the speed to number

.ease(string)

Set the ease function name

.start([position])

Set the touch start el and optional position(default is center) position could be t l r b for alias for top, left, right and bottom position could also be an array, which contains [x, y] for clientX and clientY

.moveUp(distance, [end])

.moveDown(distance, [end])

.moveLeft(distance, [end])

.moveRight(distance, [end])

If not started, start at the center of element, or the current position Move to one direction, return promise which resolved with event of touchend If end is set to false, no touchend event is fired.

.moveTo(x, y, [end])

Instead of move direction, set move destination, x and y are clientX and clientY (relative to viewport)

.move(angel, distance, [end])

Use angel which should be (0 ~ 2*PI) instead of up down left nad right

.tap([position], [duration])

Helper to emit tap event, return promise, resolved with event of touchend

.wait(ms)

Helper to return a promise after wait for ms