Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use twoFingerDrag method in wpt

Best JavaScript code snippet using wpt

touchHandler.js

Source:touchHandler.js

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  }...

touch-handler.js

Source:touch-handler.js

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  }...

Map.js

Source:Map.js

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  }...

Using AI Code Generation

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});

Using AI Code Generation

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});

Using AI Code Generation

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}

Using AI Code Generation

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();

Using AI Code Generation

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};

Using AI Code Generation

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;

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.