How to use twoFingerDrag method in wpt

Best JavaScript code snippet using wpt

touchHandler.js

Source:touchHandler.js Github

copy

Full Screen

1export class TouchHandler {2 constructor (longTouchDuration = 500, tolerance = 3) {3 this.touchDuration = longTouchDuration4 this.tolerance = tolerance5 this.touchCache = []6 this.dragStart = this.dragging = false7 this.functions = {8 longTouchDrag: [],9 drag: [],10 twoFingerZoom: [],11 twoFingerDrag: []12 }13 this.onTouchStart = this.onTouchStart.bind(this)14 this.onTouchMove = this.onTouchMove.bind(this)15 this.onTouchEnd = this.onTouchEnd.bind(this)16 }17 addGestureListener (name, func, startFunc, endFunc) {18 if (!this.functions[name]) {19 console.error(`No gesture named ${name}`)20 return21 }22 if (startFunc) func.start = startFunc23 if (endFunc) func.end = endFunc24 this.functions[name].push(func)25 }26 handleTwoFinger (evt) {27 const { touchCache } = this28 if (evt.targetTouches.length !== 2 || evt.changedTouches.length <= 0) return29 const touch1 = evt.targetTouches[0]30 const touch2 = evt.targetTouches[1]31 let index1 = -132 let index2 = -133 touchCache.forEach((touch, i) => {34 if (touch.identifier === touch1.identifier) index1 = i35 else if (touch.identifier === touch2.identifier) index2 = i36 })37 if (index1 < 0 || index2 < 0) {38 this.touchCache = []39 return40 }41 this.twoFingerDragging = true42 const diffX1 = touch1.clientX - touchCache[index1].clientX43 const diffX2 = touch2.clientX - touchCache[index2].clientX44 const diffY1 = touch1.clientY - touchCache[index1].clientY45 const diffY2 = touch2.clientY - touchCache[index2].clientY46 let panX = 047 let panY = 048 if (diffX1 > 0 && diffX2 > 0) panX = -Math.min(diffX1, diffX2)49 else if (diffX1 < 0 && diffX2 < 0) panX = -Math.max(diffX1, diffX2)50 if (diffY1 > 0 && diffY2 > 0) panY = -Math.min(diffY1, diffY2)51 else if (diffY1 < 0 && diffY2 < 0) panY = -Math.max(diffY1, diffY2)52 const zoom = (touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2 >53 (touchCache[index1].clientX - touchCache[index2].clientX) ** 2 +54 (touchCache[index1].clientY - touchCache[index2].clientY) ** 255 const scale = Math.hypot(diffX1 - diffX2, diffY1 - diffY2) * (zoom ? 1 : -1)56 this.zoomCenter = {57 x: (touchCache[index1].clientX + touchCache[index2].clientX) / 2,58 y: (touchCache[index1].clientY + touchCache[index2].clientY) / 259 }60 this.functions.twoFingerZoom.forEach(func => func(scale, this.zoomCenter, evt))61 this.functions.twoFingerDrag.forEach(func => func(panX, panY, evt))62 this.touchCache = [touch1, touch2]63 }64 onTouchStart (evt) {65 if (!evt.persist) evt.preventDefault() // If not React66 if (evt.targetTouches.length > 2) return67 const { touchCache } = this68 if (evt.targetTouches.length === 2 && (this.functions.twoFingerDrag || this.functions.twoFingerZoom)) {69 touchCache.push(...evt.targetTouches)70 clearTimeout(this.touchTimer)71 this.touchTimer = null72 // this.dragStart = this.dragging = false73 this.functions.twoFingerDrag.forEach(({ start }) => start && start(evt.touches[0], evt))74 this.functions.twoFingerZoom.forEach(({ start }) => start && start(evt.touches[0], evt))75 return76 }77 if (this.functions.longTouchDrag) {78 evt.persist?.() // For React event to persist async79 this.touchTimer = setTimeout(() => {80 this.longtouched = true81 this.touchTimer = null82 this.functions.longTouchDrag.forEach(({ start }) => start && start(evt.touches[0], evt))83 }, this.touchDuration)84 }85 this.lastTouch = evt.touches[0]86 if (evt.touches.length === 1) {87 this.dragStart = true88 this.dragging = false89 this.functions.drag.forEach(({ start }) => start && start(evt.touches[0], evt))90 }91 }92 onTouchMove (evt) {93 const { lastTouch } = this94 if (evt.targetTouches.length === 2 && (this.functions.twoFingerDrag || this.functions.twoFingerZoom)) {95 this.handleTwoFinger(evt)96 return97 }98 const touch = evt.touches[0]99 if (this.longtouched) {100 this.functions.longTouchDrag.forEach(func => func(touch, lastTouch, evt))101 return102 }103 if (this.touchTimer) {104 if ((lastTouch.clientX - touch.clientX) ** 2 + (lastTouch.clientY - touch.clientY) ** 2 > this.tolerance ** 2) {105 clearTimeout(this.touchTimer)106 this.touchTimer = null107 } else return108 }109 if (!this.dragStart) return110 this.dragging = true111 this.functions.drag.forEach(func => func(touch, lastTouch, evt))112 this.lastTouch = touch113 }114 onTouchEnd (evt) {115 if (this.longtouched) {116 this.longtouched = false117 this.functions.longTouchDrag.forEach(({ end }) => end && end(evt))118 return119 }120 if (this.touchTimer) {121 clearTimeout(this.touchTimer)122 this.touchTimer = null123 }124 if (this.twoFingerDragging) {125 const stillDragging = this.touchCache.every(touch => {126 for (const t of evt.touches) if (t.identifier === touch.identifier) return true127 return false128 })129 if (!stillDragging) {130 this.functions.twoFingerDrag.forEach(({ end }) => end && end(evt))131 this.functions.twoFingerZoom.forEach(({ end }) => end && end(evt))132 this.lastTouch = evt.touches[0]133 this.twoFingerDragging = false134 this.touchCache = []135 return136 }137 }138 if (!this.dragStart) return139 this.dragStart = false140 this.functions.drag.forEach(({ end }) => end && end(evt))141 this.dragging = false142 }...

Full Screen

Full Screen

touch-handler.js

Source:touch-handler.js Github

copy

Full Screen

1export class TouchHandler {2 constructor (longTouchDuration = 500, tolerance = 3) {3 this.touchDuration = longTouchDuration4 this.tolerance = tolerance5 this.touchCache = []6 this.dragStart = this.dragging = false7 this.functions = {8 longTouchDrag: [],9 drag: [],10 twoFingerZoom: [],11 twoFingerDrag: []12 }13 this.onTouchStart = this.onTouchStart.bind(this)14 this.onTouchMove = this.onTouchMove.bind(this)15 this.onTouchEnd = this.onTouchEnd.bind(this)16 }17 addGestureListener (name, func, startFunc, endFunc) {18 if (!this.functions[name]) {19 console.error(`No gesture named ${name}`)20 return21 }22 if (startFunc) func.start = startFunc23 if (endFunc) func.end = endFunc24 this.functions[name].push(func)25 }26 handleTwoFinger (evt) {27 const { touchCache } = this28 if (evt.targetTouches.length !== 2 || evt.changedTouches.length <= 0) return29 const touch1 = evt.targetTouches[0]30 const touch2 = evt.targetTouches[1]31 let index1 = -132 let index2 = -133 touchCache.forEach((touch, i) => {34 if (touch.identifier === touch1.identifier) index1 = i35 else if (touch.identifier === touch2.identifier) index2 = i36 })37 if (index1 < 0 || index2 < 0) {38 this.touchCache = []39 return40 }41 this.twoFingerDragging = true42 const diffX1 = touch1.clientX - touchCache[index1].clientX43 const diffX2 = touch2.clientX - touchCache[index2].clientX44 const diffY1 = touch1.clientY - touchCache[index1].clientY45 const diffY2 = touch2.clientY - touchCache[index2].clientY46 let panX = 047 let panY = 048 if (diffX1 > 0 && diffX2 > 0) panX = -Math.min(diffX1, diffX2)49 else if (diffX1 < 0 && diffX2 < 0) panX = -Math.max(diffX1, diffX2)50 if (diffY1 > 0 && diffY2 > 0) panY = -Math.min(diffY1, diffY2)51 else if (diffY1 < 0 && diffY2 < 0) panY = -Math.max(diffY1, diffY2)52 const zoom = (touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2 >53 (touchCache[index1].clientX - touchCache[index2].clientX) ** 2 +54 (touchCache[index1].clientY - touchCache[index2].clientY) ** 255 const scale = Math.hypot(diffX1 - diffX2, diffY1 - diffY2) * (zoom ? 1 : -1)56 this.zoomCenter = {57 x: (touchCache[index1].clientX + touchCache[index2].clientX) / 2,58 y: (touchCache[index1].clientY + touchCache[index2].clientY) / 259 }60 this.functions.twoFingerZoom.forEach(func => func(scale, this.zoomCenter, evt))61 this.functions.twoFingerDrag.forEach(func => func(panX, panY, evt))62 this.touchCache = [touch1, touch2]63 }64 onTouchStart (evt) {65 if (!evt.persist) evt.preventDefault() // If not React66 if (evt.targetTouches.length > 2) return67 const { touchCache } = this68 if (evt.targetTouches.length === 2 && (this.functions.twoFingerDrag || this.functions.twoFingerZoom)) {69 touchCache.push(...evt.targetTouches)70 clearTimeout(this.touchTimer)71 this.touchTimer = null72 this.functions.twoFingerDrag.forEach(({ start }) => start && start(evt.touches[0], evt))73 this.functions.twoFingerZoom.forEach(({ start }) => start && start(evt.touches[0], evt))74 return75 }76 if (this.functions.longTouchDrag) {77 evt.persist?.() // For React event to persist async78 this.touchTimer = setTimeout(() => {79 this.longtouched = true80 this.touchTimer = null81 this.functions.longTouchDrag.forEach(({ start }) => start && start(evt.touches[0], evt))82 }, this.touchDuration)83 }84 this.lastTouch = evt.touches[0]85 if (evt.touches.length === 1) {86 this.dragStart = true87 this.dragging = false88 this.functions.drag.forEach(({ start }) => start && start(evt.touches[0], evt))89 }90 }91 onTouchMove (evt) {92 const { lastTouch } = this93 if (evt.targetTouches.length === 2 && (this.functions.twoFingerDrag || this.functions.twoFingerZoom)) {94 this.handleTwoFinger(evt)95 return96 }97 const touch = evt.touches[0]98 if (this.longtouched) {99 this.functions.longTouchDrag.forEach(func => func(touch, lastTouch, evt))100 return101 }102 if (this.touchTimer) {103 if ((lastTouch.clientX - touch.clientX) ** 2 + (lastTouch.clientY - touch.clientY) ** 2 > this.tolerance ** 2) {104 clearTimeout(this.touchTimer)105 this.touchTimer = null106 } else return107 }108 if (!this.dragStart) return109 this.dragging = true110 this.functions.drag.forEach(func => func(touch, lastTouch, evt))111 this.lastTouch = touch112 }113 onTouchEnd (evt) {114 if (this.longtouched) {115 this.longtouched = false116 this.functions.longTouchDrag.forEach(({ end }) => end && end(evt))117 return118 }119 if (this.touchTimer) {120 clearTimeout(this.touchTimer)121 this.touchTimer = null122 }123 if (this.twoFingerDragging) {124 const stillDragging = this.touchCache.every(touch => {125 for (const t of evt.touches) if (t.identifier === touch.identifier) return true126 return false127 })128 if (!stillDragging) {129 this.functions.twoFingerDrag.forEach(({ end }) => end && end(evt))130 this.functions.twoFingerZoom.forEach(({ end }) => end && end(evt))131 this.lastTouch = evt.touches[0]132 this.twoFingerDragging = false133 this.touchCache = []134 return135 }136 }137 if (!this.dragStart) return138 this.dragStart = false139 this.functions.drag.forEach(({ end }) => end && end(evt))140 this.dragging = false141 }...

Full Screen

Full Screen

Map.js

Source:Map.js Github

copy

Full Screen

1import React, { Component } from 'react';2import axios from 'axios';3import Map from 'pigeon-maps';4import Marker from 'pigeon-marker';5import { Redirect } from 'react-router-dom';6import '../css/map.css'7const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoicGlnZW9uLW1hcHMiLCJhIjoiY2l3eW01Y2E2MDA4dzJ6cWh5dG9pYWlwdiJ9.cvdCf-7PymM1Y3xp5j71NQ'8const mapbox = (mapboxId, accessToken) => (x, y, z, dpr) => {9 return `https://api.mapbox.com/styles/v1/mapbox/${mapboxId}/tiles/256/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}?access_token=${accessToken}`10}11const providers = {12 osm: (x, y, z) => {13 const s = String.fromCharCode(97 + (x + y + z) % 3)14 return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`15 },16 wikimedia: (x, y, z, dpr) => {17 return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.png`18 },19 stamen: (x, y, z, dpr) => {20 return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.jpg`21 },22 streets: mapbox('streets-v10', MAPBOX_ACCESS_TOKEN),23 satellite: mapbox('satellite-streets-v10', MAPBOX_ACCESS_TOKEN),24 outdoors: mapbox('outdoors-v10', MAPBOX_ACCESS_TOKEN),25 light: mapbox('light-v9', MAPBOX_ACCESS_TOKEN),26 dark: mapbox('dark-v9', MAPBOX_ACCESS_TOKEN)27}28export default class UsersMap extends Component {29 constructor(props) {30 super(props)31 this.state = {32 center: [],33 zoom: 12,34 provider: 'wikimedia',35 metaWheelZoom: false,36 twoFingerDrag: false,37 animate: true,38 animating: false,39 zoomSnap: true,40 mouseEvents: true,41 touchEvents: true,42 minZoom: 5,43 maxZoom: 18,44 dragAnchor: [48.8565, 2.3475],45 loaded: false,46 user: [],47 allUsers: [],48 redirect: false,49 username: ""50 }51 }52 componentWillMount() {53 const profileUser = this.props.username;54 axios.get(`/api/users/profile/${profileUser}`).then(({ data }) => {55 this.setState({56 center: [parseFloat(data.userData.location.split(',')[0]), parseFloat(data.userData.location.split(',')[1])],57 user: data.userData,58 loaded: true59 })60 }).catch(err => console.error('Error: ', err));61 axios.get(`/api/users/getall`).then(({ data }) => {62 if (data.success)63 this.setState({64 allUsers: data.usersData,65 })66 }).catch(err => console.error('Error: ', err));67 }68 setRedirect = (username) => {69 this.setState({70 redirect: true,71 username: username72 })73 }74 renderRedirect = (username) => {75 if (this.state.redirect) {76 return <Redirect to={'/members/' + this.state.username} />77 }78 }79 getMarkerUser() {80 const user = this.state.user;81 return <Marker82 key={0}83 anchor={[parseFloat(user.location.split(',')[0]), parseFloat(user.location.split(',')[1])]}84 payload={user.username}85 onClick={this.handleMarkerClick}86 />87 }88 getAllMarkers() {89 const users = this.props.users;90 if (users[0]) {91 return users.map((user, index) => {92 return <Marker93 key={index}94 anchor={[parseFloat(user.member.location.split(',')[0]), parseFloat(user.member.location.split(',')[1])]}95 payload={user.member.username}96 onClick={this.handleMarkerClick}97 />98 })99 }100 else101 return (0);102 }103 zoomIn = () => {104 this.setState({105 zoom: Math.min(this.state.zoom + 1, 18)106 })107 }108 zoomOut = () => {109 this.setState({110 zoom: Math.max(this.state.zoom - 1, 1)111 })112 }113 handleBoundsChange = ({ center, zoom, bounds, initial }) => {114 if (initial) {115 //console.log('Got initial bounds: ', bounds)116 }117 this.setState({ center, zoom })118 }119 handleClick = ({ event, latLng, pixel }) => {120 console.log('Map clicked!', latLng, pixel)121 }122 handleMarkerClick = ({ event, payload, anchor }) => {123 this.setRedirect(payload);124 }125 render() {126 const { center, zoom, provider, animate, metaWheelZoom, twoFingerDrag, zoomSnap, mouseEvents, touchEvents, minZoom, maxZoom } = this.state127 if (this.state.loaded === true) {128 return (129 <div className="div-map">130 {this.renderRedirect()}131 <Map132 center={center}133 zoom={zoom}134 provider={providers[provider]}135 dprs={[1, 2]}136 onBoundsChanged={this.handleBoundsChange}137 onClick={this.handleClick}138 animate={animate}139 metaWheelZoom={metaWheelZoom}140 twoFingerDrag={twoFingerDrag}141 zoomSnap={zoomSnap}142 mouseEvents={mouseEvents}143 touchEvents={touchEvents}144 minZoom={minZoom}145 maxZoom={maxZoom}>146 {this.getMarkerUser()}147 {this.getAllMarkers()}148 </Map>149 </div>150 )151 }152 else {153 return (<div>Loading map...</div>)154 }155 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var twoFingerDrag = new TwoFingerDrag();2twoFingerDrag.init();3twoFingerDrag.onDrag(function (e) {4});5twoFingerDrag.onDragEnd(function (e) {6});7twoFingerDrag.onDragStart(function (e) {8});9twoFingerDrag.onTap(function (e) {10});11var twoFingerDrag = new TwoFingerDrag();12twoFingerDrag.init();13twoFingerDrag.onDrag(function (e) {14});15twoFingerDrag.onDragEnd(function (e) {16});17twoFingerDrag.onDragStart(function (e) {18});19twoFingerDrag.onTap(function (e) {20});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var drag = new twoFingerDrag();2drag.init();3drag.enable();4function twoFingerDrag() {5 var self = this;6 self.init = function() {7 }8 self.enable = function() {9 }10}11var drag = new twoFingerDrag();12drag.init();13drag.enable();14function twoFingerDrag() {15 var self = this;16 self.init = function() {17 }18 self.enable = function() {19 }20}21$(document).ready(function() {22});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1function init() {2 var element = document.getElementById('myElement');3 twoFingerDrag(element, function(dx, dy) {4 });5}6function twoFingerDrag(element, callback) {7 var startX, startY;8 var lastX, lastY;9 var isDragging = false;10 var isDraggingVertically = false;11 var isDraggingHorizontally = false;12 var isDraggingTwoFingers = false;13 function start(e) {14 if (e.touches.length === 2) {15 startX = e.touches[0].clientX;16 startY = e.touches[0].clientY;17 lastX = e.touches[0].clientX;18 lastY = e.touches[0].clientY;19 isDragging = true;20 isDraggingTwoFingers = true;21 }22 }23 function move(e) {24 if (isDraggingTwoFingers) {25 var dx = e.touches[0].clientX - lastX;26 var dy = e.touches[0].clientY - lastY;27 callback(dx, dy);28 lastX = e.touches[0].clientX;29 lastY = e.touches[0].clientY;30 }31 }32 function end(e) {33 if (isDraggingTwoFingers) {34 isDraggingTwoFingers = false;35 isDragging = false;36 }37 }38 element.addEventListener('touchstart', start);39 element.addEventListener('touchmove', move);40 element.addEventListener('touchend', end);41}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var twoFingerDrag = new TwoFingerDrag();2twoFingerDrag.dragDown();3twoFingerDrag.dragUp();4var twoFingerDrag = new TwoFingerDrag();5twoFingerDrag.dragDown();6twoFingerDrag.dragUp();7var twoFingerDrag = new TwoFingerDrag();8twoFingerDrag.dragDown();9twoFingerDrag.dragUp();10var twoFingerDrag = new TwoFingerDrag();11twoFingerDrag.dragDown();12twoFingerDrag.dragUp();13var twoFingerDrag = new TwoFingerDrag();14twoFingerDrag.dragDown();15twoFingerDrag.dragUp();16var twoFingerDrag = new TwoFingerDrag();17twoFingerDrag.dragDown();18twoFingerDrag.dragUp();19var twoFingerDrag = new TwoFingerDrag();20twoFingerDrag.dragDown();21twoFingerDrag.dragUp();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1jQuery(document).ready(function() {2 jQuery('#content').twoFingerDrag();3});4jQuery.fn.twoFingerDrag = function() {5 jQuery(this).bind('touchstart', function(e) {6 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];7 this.pos = { x: touch.pageX, y: touch.pageY };8 });9 jQuery(this).bind('touchmove', function(e) {10 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];11 var pos = { x: touch.pageX, y: touch.pageY };12 this.scrollLeft -= (pos.x - this.pos.x);13 this.scrollTop -= (pos.y - this.pos.y);14 });15};

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1jQuery.fn.twoFingerDrag = function (options) {2 var settings = jQuery.extend({3 dragLeft: function () { },4 dragRight: function () { },5 dragUp: function () { },6 dragDown: function () { }7 }, options);8 var originalCoord = { x: 0, y: 0 };9 var finalCoord = { x: 0, y: 0 };10 var start = function (event) {11 originalCoord.x = event.targetTouches[0].pageX;12 originalCoord.y = event.targetTouches[0].pageY;13 };14 var move = function (event) {15 event.preventDefault();16 finalCoord.y = event.targetTouches[0].pageY;17 };18 var end = function (event) {19 var changeY = originalCoord.y - finalCoord.y;20 var changeX = originalCoord.x - finalCoord.x;21 if (changeY < 0) {22 settings.dragDown();23 }24 if (changeY > 0) {25 settings.dragUp();26 }27 if (changeX < 0) {28 settings.dragRight();29 }30 if (changeX > 0) {31 settings.dragLeft();32 }33 };34 return this.bind('touchstart', start)35 .bind('touchmove', move)36 .bind('touchend', end);37};38jQuery.fn.twoFingerDrag = function (options) {39 var settings = jQuery.extend({40 dragLeft: function () { },41 dragRight: function () { },42 dragUp: function () { },43 dragDown: function () { }44 }, options);45 var originalCoord = { x: 0, y: 0 };46 var finalCoord = { x: 0, y: 0 };47 var start = function (event) {48 originalCoord.x = event.targetTouches[0].pageX;

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful