How to use pinchZoomIn method in wpt

Best JavaScript code snippet using wpt

Gestures.ts

Source:Gestures.ts

1// tslint:disable:object-literal-sort-keys2let SCREEN_SIZE;3/**4 * The values in the below object are percentages of the screen5 */6const SWIPE_DIRECTION = {7    down: {8        start: {x: 50, y: 15},9        end: {x: 50, y: 85},10    },11    left: {12        start: {x: 95, y: 50},13        end: {x: 5, y: 50},14    },15    right: {16        start: {x: 5, y: 50},17        end: {x: 95, y: 50},18    },19    up: {20        start: {x: 50, y: 85},21        end: {x: 50, y: 15},22    },23};24const PINCH = {25    zoomOut: {26        finger1: {27            start: {x: 5, y: 50},28            end: {x: 45, y: 50}29        },30        finger2: {31            start: {x: 95, y: 50},32            end: {x: 55, y: 50}33        }34    },35    zoomIn: {36        finger1: {37            start: {x: 45, y: 50},38            end: {x: 5, y: 50}39        },40        finger2: {41            start: {x: 55, y: 50},42            end: {x: 95, y: 50}43        }44    }45};46class Gestures {47    /**48     * Check if an element is visible and if not scroll down a portion of the screen to49     * check if it visible after a x amount of scrolls50     *51     * @param {element} element52     * @param {number} maxScrolls53     * @param {number} amount54     */55    public static checkIfDisplayedWithScrollDown (element, maxScrolls, amount = 0, driver): void {56        if ((!element.isExisting() || !element.isDisplayed()) && amount <= maxScrolls) {57            this.swipeUp(0.85, driver);58            this.checkIfDisplayedWithScrollDown(element, maxScrolls, amount + 1, driver);59        } else if (amount > maxScrolls) {60            throw new Error(`The element '${element}' could not be found or is not visible.`);61        }62    }63    /**64     * Swipe down based on a percentage65     *66     * @param {number} percentage from 0 - 167     */68    public static swipeDown (percentage = 1, driver): void {69        this.swipeOnPercentage(70            this._calculateXY(SWIPE_DIRECTION.down.start, percentage),71            this._calculateXY(SWIPE_DIRECTION.down.end, percentage),72            driver73        );74    }75    /**76     * Swipe Up based on a percentage77     *78     * @param {number} percentage from 0 - 179     */80    public static swipeUp (percentage = 1, driver): void {81        this.swipeOnPercentage(82            this._calculateXY(SWIPE_DIRECTION.up.start, percentage),83            this._calculateXY(SWIPE_DIRECTION.up.end, percentage),84            driver85        );86    }87    /**88     * Swipe left based on a percentage89     *90     * @param {number} percentage from 0 - 191     */92    public static swipeLeft (percentage = 1, driver): void {93        this.swipeOnPercentage(94            this._calculateXY(SWIPE_DIRECTION.left.start, percentage),95            this._calculateXY(SWIPE_DIRECTION.left.end, percentage),96            driver97        );98    }99    /**100     * Swipe right based on a percentage101     *102     * @param {number} percentage from 0 - 1103     */104    public static swipeRight (percentage = 1, driver): void {105        this.swipeOnPercentage(106            this._calculateXY(SWIPE_DIRECTION.right.start, percentage),107            this._calculateXY(SWIPE_DIRECTION.right.end, percentage),108            driver109        );110    }111    /**112     * Swipe from coordinates (from) to the new coordinates (to). The given coordinates are113     * percentages of the screen.114     *115     * @param {object} from { x: 50, y: 50 }116     * @param {object} to { x: 25, y: 25 }117     *118     * @example119     * <pre>120     *   // This is a swipe to the left121     *   const from = { x: 50, y:50 }122     *   const to = { x: 25, y:50 }123     * </pre>124     */125    public static swipeOnPercentage (from, to, driver): void {126        SCREEN_SIZE = SCREEN_SIZE || driver.getWindowRect();127        const pressOptions = this._getPercentDeviceCoords(SCREEN_SIZE, from);128        const moveToScreenCoordinates = this._getPercentDeviceCoords(SCREEN_SIZE, to);129        this.swipe(130            pressOptions,131            moveToScreenCoordinates,132            driver133        );134    }135    /**136     * Swipe from coordinates (from) to the new coordinates (to). The given coordinates are in pixels.137     *138     * @param {object} from { x: 50, y: 50 }139     * @param {object} to { x: 25, y: 25 }140     *141     * @example142     * <pre>143     *   // This is a swipe to the left144     *   const from = { x: 50, y:50 }145     *   const to = { x: 25, y:50 }146     * </pre>147     */148    public static swipe (from, to, driver, pause: number = 1000): void {149        driver.touchPerform([{150            action: 'press',151            options: from,152        }, {153            action: 'wait',154            options: {ms: pause},155        }, {156            action: 'moveTo',157            options: to,158        }, {159            action: 'release',160        }]);161        driver.pause(pause);162    }163    public static twoFingerPress (touchDuration, driver): void {164        driver.multiTouchPerform([165                [166                    {action: 'press', options: this._getPercentDeviceCoords(SCREEN_SIZE, {x: 45, y: 50})},167                    {action: 'wait', options: {ms: touchDuration}},168                    {action: 'release'}],169                [170                    {action: 'press', options: this._getPercentDeviceCoords(SCREEN_SIZE, {x: 55, y: 50})},171                    {action: 'wait', options: {ms: touchDuration}},172                    {action: 'release'}173                ]174            ]175        );176    }177    public static pinchZoomIn (driver, pause: number = 1000): void {178        SCREEN_SIZE = SCREEN_SIZE || driver.getWindowRect();179        driver.multiTouchPerform([180                [181                    {action: 'press', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomIn.finger1.start)},182                    {action: 'moveTo', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomIn.finger1.end)},183                    {action: 'release'}],184                [185                    {action: 'press', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomIn.finger2.start)},186                    {action: 'moveTo', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomIn.finger2.end)},187                    {action: 'release'}188                ]189            ]190        );191        driver.pause(pause);192    }193    public static pinchZoomOut (driver, pause: number = 1000): void {194        driver.multiTouchPerform([195                [196                    {action: 'press', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomOut.finger1.start)},197                    {action: 'moveTo', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomOut.finger1.end)},198                    {action: 'release'}],199                [200                    {action: 'press', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomOut.finger2.start)},201                    {action: 'moveTo', options: this._getPercentDeviceCoords(SCREEN_SIZE, PINCH.zoomOut.finger2.end)},202                    {action: 'release'}203                ]204            ]205        );206        driver.pause(pause);207    }208    /**209     * Get the screen coordinates in percentage based on a device screensize210     *211     * @param {number} screenSize the size of the screen212     * @param {object} coordinates like { x: 50, y: 50 }213     *214     * @return {{x: number, y: number}}215     *216     * @private217     */218    public static _getPercentDeviceCoords (screenSize, coordinates): { x: number, y: number } {219        return {220            x: Math.round(screenSize.width * (coordinates.x / 100)),221            y: Math.round(screenSize.height * (coordinates.y / 100)),222        };223    }224    /**225     * Calculate the x y coordinates based on a percentage226     *227     * @param {object} coordinates228     * @param {number} percentage229     *230     * @return {{x: number, y: number}}231     *232     * @private233     */234    public static _calculateXY ({x, y}, percentage): { x: number, y: number } {235        return {236            x: x * percentage,237            y: y * percentage,238        };239    }240}...

touchobserver.js

Source:touchobserver.js

1/*2    touchobserver.js by @nxnine3    crude touch events, move, pinch, and swipe4*/5(function () {6    //7    var nx = {};8    //9    class touchObserver {10        constructor(targetEl){11            var self = this;12            this.element = targetEl;13            //14            this.swipe = false;15            this._swipe_start = null;16            this._swipe_last = null;17            this._swipe_track_left_right = false;18            this._swipe_track_up_down = false;19            this._swipe_track_move = true;20            //21            this.pinch = false;22            this.prevDiff = 0;23            //24            targetEl.addEventListener("touchstart", this.handleStart.bind(this), false);25            targetEl.addEventListener("touchend", this.handleEnd.bind(this), false);26            targetEl.addEventListener("touchcancel", this.handleCancel.bind(this), false);27            targetEl.addEventListener("touchmove", this.handleMove.bind(this), false);28            //29        };30        //31        //32        handleStart(ev){33            if (ev.touches.length==1){34                this.swipe = true;35                this._swipe_start = ev.touches[0];36                this._swipe_last = ev.touches[0];37                this.element.dispatchEvent(new CustomEvent('swipeStart', { bubbles: true, detail:{touch:ev.touches[0]} }));38            };                39            if (ev.touches.length==2){40                this.swipe = false;41                this.element.dispatchEvent(new CustomEvent('swipeEnd', { bubbles: true, detail:{touch:ev.touches[0]} }));42                this._swipe_start = null;43                this._swipe_last = null;44                this.pinch = true;45            };46        };47        handleEnd(ev){48            if (this.swipe){49                this.swipe=false;50                this._swipe_start = null;51                this._swipe_last = null;52                this.element.dispatchEvent(new CustomEvent('swipeEnd', { bubbles: true, detail:{touch:ev.touches[0]} }));53            };54            if (ev.touches.length!=2){55                if (this.pinch){56                    this.pinch = false;57                    this.element.dispatchEvent(new CustomEvent('pinchZoomEnd', { bubbles: true, detail:{touches:ev.touches} }));58                };59            };60        };61        handleCancel(ev){62            this.prevDiff = 0;63            this.pinch = false;64            if (this.swipe){65                this.swipe=false;66                this._swipe_start = null;67                this._swipe_last = null;68                this.element.dispatchEvent(new CustomEvent('swipeEnd', { bubbles: true, detail:{touch:ev.touches[0]} }));69            };70        };71        handleMove(ev){72            if (this.swipe && ev.touches.length==1){73                let _x1 = this._swipe_last.clientX;74                let _x2 = ev.touches[0].clientX;75                let _y1 = this._swipe_last.clientY;76                let _y2 = ev.touches[0].clientY;77                //78                if (this._swipe_track_move){79                    ev.target.dispatchEvent(new CustomEvent('swipeMove', { bubbles: true, detail:{start:this._swipe_start, touch:ev.touches[0]} }));80                };81                // this might be better served in handleEnd82                if (this._swipe_track_left_right){83                    if (_x2>_x1){84                        ev.target.dispatchEvent(new CustomEvent('swipeRight', { bubbles: true, detail:{start:this._swipe_start, touch:ev.touches[0]} }));85                    } else if (_x2<_x1){86                        ev.target.dispatchEvent(new CustomEvent('swipeLeft', { bubbles: true, detail:{start:this._swipe_start, touch:ev.touches[0]} }));87                    };88                };89                if (this._swipe_track_up_down){90                    if (_y2>_y1){91                        ev.target.dispatchEvent(new CustomEvent('swipeUp', { bubbles: true, detail:{start:this._swipe_start, touch:ev.touches[0]} }));92                    } else if (_y2<_y1){93                        ev.target.dispatchEvent(new CustomEvent('swipeDown', { bubbles: true, detail:{start:this._swipe_start, touch:ev.touches[0]} }));94                    };95                };96                this._swipe_last = ev.touches[0];97                //98            };99            if (this.pinch && ev.touches.length==2){100                let _t1 = ev.touches[0];101                let _t2 = ev.touches[1];102                // algebra helps us determine the midpoint between the touches103                let _midpointX = (_t2.screenX+_t1.screenX)/2104                let _midpointY = (_t2.screenY+_t1.screenY)/2105                // algebra helps us determine the distance between the touches106                let _dist = Math.round(Math.sqrt(Math.pow((_t2.screenX-_t1.screenX),2)+Math.pow((_t2.screenY-_t1.screenY),2)));107                if (this.prevDiff!=0 && _dist!=this.prevDiff && _dist%2==0){108                    // details109                    let _detail = {touches:ev.touches,distance:_dist,midpointX:_midpointX,midpointY:_midpointY};110                    // the distance has gotten smaller, so we're zooming out111                    if (_dist<this.prevDiff){112                        this.element.dispatchEvent(new CustomEvent('pinchZoomOut', { bubbles: true, detail:_detail }));113                    // the distance has gotten larger, so we're zooming in114                    } else if (_dist>this.prevDiff){115                        this.element.dispatchEvent(new CustomEvent('pinchZoomIn', { bubbles: true, detail:_detail }));116                    }117                }118                this.prevDiff = _dist;119            };120        };121    };122    util = {};123    util.touchObserver = touchObserver;124    //125    nine.global.set(util,'nine.util');126    //...

touch.js

Source:touch.js

...61    62    mc.on('pinch', function(event) {63        if (pinchCounter == 1) {    64            if (event.scale > 1) {65                pinchZoomIn(1.01);66            }67            else {68                pinchZoomOut(0.99);69            }70            pinchCounter++;71        }72        else if (pinchCounter == 5) {73            pinchCounter = 1;74        } 75        else {76            pinchCounter++;77        }78    });79    ...

Using AI Code Generation

1var wptouch = require('wptouch');2wptouch.pinchZoomIn();3var wptouch = require('wptouch');4wptouch.pinchZoomOut();5var wptouch = require('wptouch');6wptouch.tap();7var wptouch = require('wptouch');8wptouch.tapAt(100, 100);9var wptouch = require('wptouch');10wptouch.tapAtElement('#element');11var wptouch = require('wptouch');12wptouch.tapAtElementCenter('#element');13var wptouch = require('wptouch');14wptouch.tapAtElementWithOffset('#element', 50, 50);15var wptouch = require('wptouch');16wptouch.tapAtOffset(50, 50);17var wptouch = require('wptouch');18wptouch.tapAtPoint(100, 100);19var wptouch = require('wptouch');20wptouch.tapAtPointWithOffset(100, 100, 50, 50);

Using AI Code Generation

1jQuery(document).ready(function() {2    wptouchPro.pinchZoomIn();3});4jQuery(document).ready(function() {5    wptouchPro.pinchZoomOut();6});7jQuery(document).ready(function() {8    wptouchPro.pinchZoomReset();9});10jQuery(document).ready(function() {11    wptouchPro.pinchZoomToggle();12});13jQuery(document).ready(function() {14    wptouchPro.pinchZoomSet();15});16jQuery(document).ready(function() {17    wptouchPro.pinchZoomSet(1.5);18});19jQuery(document).ready(function() {20    wptouchPro.pinchZoomSet(1.5, 0.5);21});22jQuery(document).ready(function() {23    wptouchPro.pinchZoomSet(1.5, 0.5, 0.5);24});25jQuery(document).ready(function() {26    wptouchPro.pinchZoomSet(1.5, 0.5, 0.5, 0.5);27});28jQuery(document).ready(function() {29    wptouchPro.pinchZoomSet(1.5, 0.5, 0.5, 0.5, 0.5);30});31jQuery(document).ready(function() {32    wptouchPro.pinchZoomSet(1.5, 0.5, 0.5, 0.5

Using AI Code Generation

1var pinchZoomIn = function() {2  var event = document.createEvent('Event');3  event.initEvent('pinchZoomIn', true, true);4  document.dispatchEvent(event);5};6var pinchZoomOut = function() {7  var event = document.createEvent('Event');8  event.initEvent('pinchZoomOut', true, true);9  document.dispatchEvent(event);10};11var pinchZoomReset = function() {12  var event = document.createEvent('Event');13  event.initEvent('pinchZoomReset', true, true);14  document.dispatchEvent(event);15};16var pinchZoomIn = function() {17  var event = document.createEvent('Event');18  event.initEvent('pinchZoomIn', true, true);19  document.dispatchEvent(event);20};21var pinchZoomOut = function() {22  var event = document.createEvent('Event');23  event.initEvent('pinchZoomOut', true, true);24  document.dispatchEvent(event);25};26var pinchZoomReset = function() {27  var event = document.createEvent('Event');28  event.initEvent('pinchZoomReset', true, true);29  document.dispatchEvent(event);30};31var pinchZoomIn = function() {32  var event = document.createEvent('Event');33  event.initEvent('pinchZoomIn', true, true);34  document.dispatchEvent(event);35};36var pinchZoomOut = function() {37  var event = document.createEvent('Event');38  event.initEvent('pinchZoomOut', true, true);39  document.dispatchEvent(event);40};41var pinchZoomReset = function() {42  var event = document.createEvent('Event');43  event.initEvent('pinchZoomReset', true, true);44  document.dispatchEvent(event);45};46var pinchZoomIn = function() {47  var event = document.createEvent('Event');48  event.initEvent('pinchZoomIn', true, true);49  document.dispatchEvent(event);50};

Using AI Code Generation

1jQuery(document).ready(function() {2    jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn();3});4jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(50);5jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(75);6jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(100);7jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(125);8jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(150);9jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(175);10jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(200);11jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(225);12jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(250);13jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(275);14jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(300);15jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(325);16jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(350);17jQuery('#wptouch-pro-viewport').wptouchPinchZoomIn(375);18jQuery('#wptouch-pro-viewport

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.