KaneAI - World’s First E2E Software Testing Agent.Book a Demo Join TestMu Conference

How to use clientBounds method in wpt

Best JavaScript code snippet using wpt

CaptionDecorator.js

Source:CaptionDecorator.js

1(function (enyo, scope) {2	/**3	* {@link moon.CaptionDecorator} wraps a control with a caption. The position of the4	* caption is defined via the [side]{@link moon.CaptionDecorator#side} property.5	*6	* ```7	* 	{kind: 'moon.CaptionDecorator', side: 'top', content: 'Top Label', components: [8	* 		{kind: 'moon.Button', content: 'My Button', ontap: 'buttonTapped'},9	* 	]}10	* ```11	*12	* @class moon.CaptionDecorator13	* @extends enyo.Control14	* @ui15	* @public16	*/17	enyo.kind(18		/** @lends moon.CaptionDecorator.prototype */ {19		/**20		* @private21		*/22		name: 'moon.CaptionDecorator',23		/**24		* @private25		*/26		handlers: {27			onSpotlightFocus: 'spotFocus',28			onSpotlightBlur:  'spotBlur'29		},30		/**31		* @private32		* @lends moon.CaptionDecorator.prototype33		*/34		published: {35			/**36			* The position of the caption with respect to the wrapped control; valid37			* values are `'top'`, `'bottom'`, `'left'`, and `'right'`.38			*39			* @type {String}40			* @default 'top'41			* @public42			*/43			side: 'top',44			/**45			* If `true`, the caption is only shown when the wrapped control has Spotlight46			* focus; otherwise, it is always visible.47			*48			* @type {Boolean}49			* @default false50			* @public51			*/52			showOnFocus: false53		},54		/**55		* @private56		*/57		captionPositioned: false,58		/**59		* @private60		*/61		clientBounds: null,62		/**63		* @private64		*/65		captionBounds: null,66		/**67		* @private68		*/69		decoratorBounds: null,70		/**71		* @private72		*/73		classes: 'moon-button-caption-decorator',74		/**75		* @private76		*/77		components: [78			{kind: 'enyo.Control', name: 'leftCaption',     classes: 'moon-divider-text moon-caption left',   canGenerate: false},79			{kind: 'enyo.Control', name: 'topCaption',      classes: 'moon-divider-text moon-caption top',    canGenerate: false},80			{kind: 'enyo.Control', name: 'client',          classes: 'moon-divider-text moon-caption-client'},81			{kind: 'enyo.Control', name: 'rightCaption',    classes: 'moon-divider-text moon-caption right',  canGenerate: false},82			{kind: 'enyo.Control', name: 'bottomCaption',   classes: 'moon-divider-text moon-caption bottom', canGenerate: false}83		],84		/**85		* @private86		*/87		create: function () {88			this.inherited(arguments);89			this.sideChanged();90			this.showOnFocusChanged();91		},92		/**93		* If [showOnFocus]{@link moon.CaptionDecorator#showOnFocus} is `true`, caption94		* position is reset on reflow.95		*96		* @private97		*/98		reflow: function () {99			this.inherited(arguments);100			if (this.getShowOnFocus()) {101				this.resetCaptionPosition();102			}103		},104		/**105		* Retrieves [side]{@link moon.CaptionDecorator#side} value.106		*107		* @private108		*/109		getSide: function () {110			return this.side || 'top';111		},112		// Change handlers113		/**114		* @private115		*/116		sideChanged: function () {117			var side = this.getSide();118			this.$.topCaption.canGenerate =     (side === 'top');119			this.$.rightCaption.canGenerate =   (side === 'right');120			this.$.bottomCaption.canGenerate =  (side === 'bottom');121			this.$.leftCaption.canGenerate =    (side === 'left');122			// Update the content, including position if needed123			this.contentChanged();124			// If this control has already been rendered, re-render to update caption side125			if (this.hasNode()) {126				// Re-render to display caption on proper side127				this.render();128			}129		},130		/**131		* @private132		*/133		showOnFocusChanged: function () {134			this.addRemoveClass('showOnFocus', this.getShowOnFocus());135			// If `showOnFocus` is `true`, reset caption position136			if (this.hasNode() && this.getShowOnFocus()) {137				this.resetCaptionPosition();138			}139		},140		/**141		* @private142		*/143		contentChanged: function () {144			this.$[this.getSide()+'Caption'].setContent(this.getContent());145			// If `showOnFocus` is `true`, reset caption position146			if (this.hasNode() && this.getShowOnFocus()) {147				this.resetCaptionPosition();148			}149		},150		// Event handlers151		/**152		* Adds `spotlight` class when button is focused, and calculates caption position153		* if required.154		*155		* @private156		*/157		spotFocus: function () {158			this.addClass('spotlight');159			if (this.hasNode() && this.getShowOnFocus()) {160				this.positionCaption();161			}162		},163		/**164		* Removes `spotlight` class when button is blurred.165		*166		* @private167		*/168		spotBlur: function () {169			this.removeClass('spotlight');170		},171		// Caption positioning172		/**173		* Returns current caption control.174		*175		* @private176		*/177		getCaptionControl: function () {178			return this.$[this.getSide()+'Caption'];179		},180		/**181		* Resets cached position values and repositions caption if currently spotted.182		*183		* @private184		*/185		resetCaptionPosition: function () {186			this.resetCachedBounds();187			this.captionPositioned = false;188			if (this.hasNode() && this.hasClass('spotlight')) {189				this.positionCaption();190			}191		},192		/**193		* Positions caption based on the value of [side]{@link moon.CaptionDecorator#side}.194		*195		* @private196		*/197		positionCaption: function () {198			if (this.captionPositioned) {199				return;200			}201			var bounds = this.getDecoratorBounds(),202				clientBounds = this.getClientBounds(),203				captionBounds = this.getCaptionBounds();204			switch (this.getSide()) {205			case 'left':206				this.centerCaptionVertically(bounds, captionBounds);207				this.positionCaptionAtLeftEdge(bounds, clientBounds, captionBounds);208				break;209			case 'right':210				this.centerCaptionVertically(bounds, captionBounds);211				this.positionCaptionAtRightEdge(bounds, clientBounds, captionBounds);212				break;213			case 'top':214				this.centerCaptionHorizontally(bounds, captionBounds);215				this.positionCaptionAtTopEdge(bounds, clientBounds, captionBounds);216				break;217			case 'bottom':218				this.centerCaptionHorizontally(bounds, captionBounds);219				this.positionCaptionAtBottomEdge(bounds, clientBounds, captionBounds);220				break;221			}222			this.captionPositioned = true;223		},224		/**225		* Centers caption control vertically, relative to `this.decoratorBounds.height`.226		*227		* @private228		*/229		centerCaptionVertically: function (inBounds, inCaptionBounds) {230			this.getCaptionControl().applyStyle('top', enyo.dom.unit((inBounds.height - inCaptionBounds.height) / 2, 'rem'));231		},232		/**233		* Centers caption control horizontally, relative to `this.decoratorBounds.width`.234		*235		* @private236		*/237		centerCaptionHorizontally: function (inBounds, inCaptionBounds) {238			this.getCaptionControl().applyStyle('left', enyo.dom.unit((inBounds.width - inCaptionBounds.width) / 2, 'rem'));239		},240		/**241		* Positions caption at left edge of `this.$.client`.242		*243		* @private244		*/245		positionCaptionAtLeftEdge: function (inBounds, inClientBounds, inCaptionBounds) {246			var position = (-1 * inCaptionBounds.width) + ((inBounds.width - inClientBounds.width)/2) - inCaptionBounds.marginRight;247			this.getCaptionControl().applyStyle('left', enyo.dom.unit(position, 'rem'));248		},249		/**250		* Positions caption at right edge of `this.$.client`.251		*252		* @private253		*/254		positionCaptionAtRightEdge: function (inBounds, inClientBounds, inCaptionBounds) {255			var position = inBounds.width - ((inBounds.width - inClientBounds.width)/2);256			this.getCaptionControl().applyStyle('left', enyo.dom.unit(position, 'rem'));257		},258		/**259		* Positions caption at top edge of `this.$.client`.260		*261		* @private262		*/263		positionCaptionAtTopEdge: function (inBounds, inClientBounds, inCaptionBounds) {264			var position = (-1 * this.getCaptionBounds().height) + ((inBounds.height - inClientBounds.height)/2) - inCaptionBounds.marginBottom;265			this.getCaptionControl().applyStyle('top', enyo.dom.unit(position, 'rem'));266		},267		/**268		* Positions caption at bottom edge of `this.$.client`.269		*270		* @private271		*/272		positionCaptionAtBottomEdge: function (inBounds, inClientBounds, inCaptionBounds) {273			var position = inBounds.height - ((inBounds.height - inClientBounds.height)/2);274			this.getCaptionControl().applyStyle('top', enyo.dom.unit(position, 'rem'));275		},276		/**277		* Caches result from `this.getBounds()` call, saving in `this.decoratorBounds`.278		*279		* @private280		*/281		getDecoratorBounds: function () {282			this.decoratorBounds = this.decoratorBounds || this.getBounds();283			return this.decoratorBounds;284		},285		/**286		* Caches caption bounds, saving in `this.captionBounds`.287		*288		* @private289		*/290		getCaptionBounds: function () {291			this.captionBounds = this.captionBounds || enyo.mixin(this.getCaptionControl().getBounds(), this.getCaptionMarginBounds());292			return this.captionBounds;293		},294		/**295		* Caches client bounds, saving in `this.clientBounds`.296		*297		* @private298		*/299		getClientBounds: function () {300			this.clientBounds = this.clientBounds || this.$.client.getBounds();301			return this.clientBounds;302		},303		/**304		* Clears cached bounds.305		*306		* @private307		*/308		resetCachedBounds: function () {309			this.clientBounds = null;310			this.captionBounds = null;311			this.decoratorBounds = null;312		},313		/**314		* Returns margins of caption control.315		*316		* @private317		*/318		getCaptionMarginBounds: function () {319			var margins = enyo.dom.calcMarginExtents(this.getCaptionControl().hasNode());320			return {321				marginTop:      margins.top,322				marginRight:    margins.right,323				marginBottom:   margins.bottom,324				marginLeft:     margins.left325			};326		}327	});...

script.js

Source:script.js

1    document.onmousemove = handleMouseMove;2    function handleMouseMove(event) {3        var eventDoc, doc, body;4        event = event || window.event; 5        var returnedFunction = debounce(function() {6            setElePosition(event.pageX,event.pageY);7            setBoundsforCursor(event.pageX,event.pageY);8        }, 100);9        returnedFunction();10    }11    function setElePosition(x,y){12        var smallCircle = document.querySelector('.small-circle');13        var circle = document.querySelector('.circle');14        smallCircle.style.top = (y-5) +'px';15        smallCircle.style.left = (x-5) +'px';16        circle.style.top = (y - 100) +'px';17        circle.style.left = (x -100) +'px';  18    }19    function setBoundsforCursor(x,y){20        var coordinates = {21            x:200,22            y:200,23            x1: window.innerWidth -200,24            y1: window.innerHeight - 20025        }26        var smallCircle = document.querySelector('.small-circle');27        var circle = document.querySelector('.circle');28        if(x > coordinates.x && x < coordinates.x1 && y > coordinates.y && y < coordinates.y1){29            circle.style.transform ="scale(1)";30            smallCircle.style.transform ="scale(0)";31            detectText(circle,x,y);32        }else{33            circle.style.transform ="scale(0)";34            smallCircle.style.transform ="scale(1)";35        }36    }37    function debounce(func, wait, immediate) {38        var timeout;39        return function executedFunction() {40          var context = this;41          var args = arguments;    42          var later = function() {43            timeout = null;44            if (!immediate) func.apply(context, args);45          }46          var callNow = immediate && !timeout;        47          clearTimeout(timeout);48          timeout = setTimeout(later, wait);       49          if (callNow) func.apply(context, args);50        }51    }52    53    function detectText(circle,x,y){54        var textEle = document.querySelector('.main-title');55        var clientBounds =textEle.getBoundingClientRect();56        if(x >= clientBounds.x && x <= (clientBounds.x + clientBounds.width) && 57            y >= clientBounds.y && y <= (clientBounds.y + clientBounds.height)){58            circle.style.transform = "scale(1.5)";59            textEle.classList.remove('outline');60        }else{61           circle.style.transform = "scale(1)";62            textEle.classList.add('outline');63        }64    }65    ...

dna.scroll.parallax.js

Source:dna.scroll.parallax.js

1OnLoad(function()2{3    // Find all elements with data-parallax-scroll-background attribute4    var selectedItems = document.querySelectorAll("[data-parallax-scroll-background]");5    // Fix all backgrounds to start at Y 06    ForEach(selectedItems, function(element) { element.style.backgroundPositionY = "0px"; });7    // When we scroll...8    OnScrollInstant(function()9    {10        // For each element...11        ForEach(selectedItems, function(element) 12        { 13            // Get the element size14            var clientBounds = element.getBoundingClientRect();15            // Only nudge down background when it is in view16            if (clientBounds.bottom < 0)17                return;18            // Get parallax ratio19            var parallaxRatio = element.getAttribute("data-parallax-scroll-background");20            // Get bump down value21            var bumpY = clientBounds.top * parallaxRatio;22            // Apply it to the background position23            element.style.backgroundPositionY = bumpY + "px";24        });25    });...

Using AI Code Generation

1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3    if (err) {4        console.log(err);5    } else {6        console.log(data);7    }8});

Using AI Code Generation

1var wpt = require('webpagetest');2var wptClient = new wpt('www.webpagetest.org');3    if (err) {4        console.log(err);5    } else {6        console.log(data.data.runs[1].firstView.clientBounds);7    }8});9{ left: 0,10  outerHeight: 737 }

Using AI Code Generation

1var wpt = require('webpagetest');2    if (err) return console.error(err);3    console.log(data);4});5}, function(err, data) {6    if (err) return console.error(err);7    console.log(data);8});9}, function(err, data) {10    if (err) return console.error(err);11    console.log(data);12});13}, function(err, data) {14    if (err) return console.error(err);15    console.log(data);16});17}, function(err, data) {18    if (err) return console.error(err);19    console.log(data);20});21}, function(err, data) {22    if (err) return console.error(err);23    console.log(data);24});25}, function(err, data) {26    if (err) return console.error(err);27    console.log(data);28});29}, function(err, data) {

Using AI Code Generation

1var wptoolkit = require('wptoolkit');2var clientBounds = wptoolkit.clientBounds();3console.log(clientBounds);4var wptoolkit = require('wptoolkit');5var clientBounds = wptoolkit.clientBounds();6console.log(clientBounds);7var wptoolkit = require('wptoolkit');8var clientBounds = wptoolkit.clientBounds();9console.log(clientBounds);10var wptoolkit = require('wptoolkit');11var clientBounds = wptoolkit.clientBounds();12console.log(clientBounds);13var wptoolkit = require('wptoolkit');14var clientBounds = wptoolkit.clientBounds();15console.log(clientBounds);16var wptoolkit = require('wptoolkit');17var clientBounds = wptoolkit.clientBounds();18console.log(clientBounds);19var wptoolkit = require('wptoolkit');20var clientBounds = wptoolkit.clientBounds();21console.log(clientBounds);22var wptoolkit = require('wptoolkit');23var clientBounds = wptoolkit.clientBounds();24console.log(clientBounds);

Using AI Code Generation

1var wpt = require('webpagetest');2var client = wpt('www.webpagetest.org', 'A.1234567890abcdefghijklmnopqrstuvw');3  if (err) return console.error(err);4  console.log('Test status: ' + data.statusText);5  client.waitForTestComplete(data.data.testId, function(err, data) {6    if (err) return console.error(err);7    client.getTestResults(data.data.testId, function(err, data) {8      if (err) return console.error(err);9      console.log('Test results: ' + JSON.stringify(data.data));10      client.clientBounds(data.data.testId, function(err, data) {11        if (err) return console.error(err);12        console.log('Client bounds: ' + JSON.stringify(data.data));13      });14    });15  });16});17var wpt = require('webpagetest');18var client = wpt('www.webpagetest.org', 'A.1234567890abcdefghijklmnopqrstuvw');19client.getLocations(function(err, data) {20  if (err) return console.error(err);21  console.log('Locations: ' + JSON.stringify(data.data));22});23var wpt = require('webpagetest');24var client = wpt('www.webpagetest.org', 'A.1234567890abcdefghijklmnopqrstuvw');25client.getTesters(function(err, data) {26  if (err) return console.error(err);27  console.log('Testers: ' + JSON.stringify(data.data));28});29var wpt = require('webpagetest');30var client = wpt('www.webpagetest.org', 'A.1234567890abcdefghijklmnopqrstuvw');31client.getTesters(function(err, data) {32  if (err) return console.error(err);33  console.log('Testers: ' + JSON.stringify(data.data));34});35var wpt = require('webpagetest');36var client = wpt('www.webpagetest

Using AI Code Generation

1var wptoolkit = require('wptoolkit');2var wp = new wptoolkit();3wp.clientBounds(function(bounds){4    console.log(bounds);5});6var wptoolkit = require('wptoolkit');7var wp = new wptoolkit();8wp.screenBounds(function(bounds){9    console.log(bounds);10});11var wptoolkit = require('wptoolkit');12var wp = new wptoolkit();13wp.screenBounds(function(bounds){14    console.log(bounds);15});16var wptoolkit = require('wptoolkit');17var wp = new wptoolkit();18wp.screenBounds(function(bounds){19    console.log(bounds);20});21var wptoolkit = require('wptoolkit');22var wp = new wptoolkit();23wp.screenBounds(function(bounds){24    console.log(bounds);25});26var wptoolkit = require('wptoolkit');27var wp = new wptoolkit();28wp.screenBounds(function(bounds){29    console.log(bounds);30});31var wptoolkit = require('wptoolkit');32var wp = new wptoolkit();33wp.screenBounds(function(bounds){34    console.log(bounds);35});36var wptoolkit = require('wptoolkit');37var wp = new wptoolkit();38wp.screenBounds(function(bounds){39    console.log(bounds);40});41var wptoolkit = require('wptoolkit');42var wp = new wptoolkit();43wp.screenBounds(function(bounds){44    console.log(bounds);45});46var wptoolkit = require('wptoolkit');47var wp = new wptoolkit();48wp.screenBounds(function(bounds){49    console.log(bounds);50});51var wptoolkit = require('wptoolkit');52var wp = new wptoolkit();53wp.screenBounds(function

Using AI Code Generation

1var wptoolkit = require('wptoolkit');2var wp = new wptoolkit();3wp.clientBounds(function(err, bounds) {4	if (err) throw err;5	console.log(bounds);6});7{ width: 1024, height: 768 }8var wptoolkit = require('wptoolkit');9var wp = new wptoolkit();10wp.clientBounds(function(err, bounds) {11	if (err) throw err;12	console.log(bounds);13});14{ width: 1024, height: 768 }15var wptoolkit = require('wptoolkit');16var wp = new wptoolkit();17wp.clientBounds(function(err, bounds) {18	if (err) throw err;19	console.log(bounds);20});21{ width: 1024, height: 768 }22var wptoolkit = require('wptoolkit');23var wp = new wptoolkit();24wp.clientBounds(function(err, bounds) {25	if (err) throw err;26	console.log(bounds);27});28{ width: 1024, height: 768 }29var wptoolkit = require('wptoolkit');30var wp = new wptoolkit();31wp.clientBounds(function(err, bounds) {32	if (err) throw err;33	console.log(bounds);34});35{ width: 1024, height: 768 }36var wptoolkit = require('wptoolkit');37var wp = new wptoolkit();38wp.clientBounds(function(err, bounds) {39	if (err) throw err;40	console.log(bounds);41});42{ width: 1024, height: 768 }43var wptoolkit = require('wptoolkit');44var wp = new wptoolkit();45wp.clientBounds(function(err, bounds) {46	if (err

Using AI Code Generation

1var wptools = require('wp-tools');2var path = require('path');3var wp = new wptools({4    wpPath: path.join(__dirname, 'wordpress')5});6wp.clientBounds(function (err, data) {7    if (err) {8        return console.log(err);9    }10    console.log(data);11});12{ width: 1000,13  fitWindow: false }

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.