How to use overlay method in qawolf

Best JavaScript code snippet using qawolf

infuser.js

Source:infuser.js Github

copy

Full Screen

1(function () {2 var overlay = document.createElement('img');3 var overlayInformation = document.createElement('div');4 var overlayHelp = document.createElement('div');5 var overlayInformationTimeout;6 var overlaySrc;7 var pressedKeys = [];8 var blockedKeys = [17, 33, 34, 36, 37, 38, 39, 40, 46];9 var keyCodeToCode = {10 17: 'ControlLeft',11 33: 'PageUp',12 34: 'PageDown',13 36: 'Home',14 37: 'ArrowLeft',15 38: 'ArrowUp',16 39: 'ArrowRight',17 40: 'ArrowDown',18 46: 'Delete',19 188: 'Comma',20 190: 'Period',21 191: 'Slash',22 192: 'Backquote'23 };24 var controls = [25 {26 check: function () {27 return (28 pressedKeys.indexOf('ArrowRight') !== -1 &&29 pressedKeys.indexOf('ControlLeft') !== -130 );31 },32 result: function () {33 changeCoordinates('horizontal', 10);34 }35 },36 {37 check: function () {38 return pressedKeys.indexOf('ArrowRight') !== -1;39 },40 result: function () {41 changeCoordinates('horizontal', 1);42 }43 },44 {45 check: function () {46 return (47 pressedKeys.indexOf('ArrowLeft') !== -1 &&48 pressedKeys.indexOf('ControlLeft') !== -149 );50 },51 result: function () {52 changeCoordinates('horizontal', -10);53 }54 },55 {56 check: function () {57 return pressedKeys.indexOf('ArrowLeft') !== -1;58 },59 result: function () {60 changeCoordinates('horizontal', -1);61 }62 },63 {64 check: function () {65 return (66 pressedKeys.indexOf('ArrowUp') !== -1 &&67 pressedKeys.indexOf('ControlLeft') !== -168 );69 },70 result: function () {71 changeCoordinates('vertical', -10);72 }73 },74 {75 check: function () {76 return pressedKeys.indexOf('ArrowUp') !== -1;77 },78 result: function () {79 changeCoordinates('vertical', -1);80 }81 },82 {83 check: function () {84 return (85 pressedKeys.indexOf('ArrowDown') !== -1 &&86 pressedKeys.indexOf('ControlLeft') !== -187 );88 },89 result: function () {90 changeCoordinates('vertical', 10);91 }92 },93 {94 check: function () {95 return pressedKeys.indexOf('ArrowDown') !== -1;96 },97 result: function () {98 changeCoordinates('vertical', 1);99 }100 },101 {102 check: function () {103 return pressedKeys.indexOf('Comma') !== -1;104 },105 result: function () {106 changeOpacity(-1);107 }108 },109 {110 check: function () {111 return pressedKeys.indexOf('Period') !== -1;112 },113 result: function () {114 changeOpacity(1);115 }116 },117 {118 check: function () {119 return pressedKeys.indexOf('PageUp') !== -1;120 },121 result: function () {122 changeOverlaySrc('previous');123 }124 },125 {126 check: function () {127 return pressedKeys.indexOf('PageDown') !== -1;128 },129 result: function () {130 changeOverlaySrc('next');131 }132 },133 {134 check: function () {135 return pressedKeys.indexOf('Home') !== -1;136 },137 result: function () {138 resetCoordinates();139 }140 },141 {142 check: function () {143 return pressedKeys.indexOf('Backquote') !== -1;144 },145 result: function () {146 toggleDisplay();147 }148 },149 {150 check: function () {151 return pressedKeys.indexOf('Slash') !== -1;152 },153 result: function () {154 toggleHelp();155 }156 },157 {158 check: function () {159 return pressedKeys.indexOf('Delete') !== -1;160 },161 result: function () {162 clearLocalStorage();163 }164 }165 ];166 var styleList = {167 overlay: {168 position: 'absolute',169 'z-index': '9999'170 },171 overlayInformation: {172 display: 'none',173 'justify-content': 'center',174 'background-color': '#eeeeee',175 'border-radius': '25px',176 position: 'fixed',177 top: '48%',178 left: '50%',179 'margin-left': '-160px',180 width: '320px',181 fontSize: '25px',182 'z-index': '9999'183 },184 overlayHelp: {185 display: 'none',186 'justify-content': 'center',187 'background-color': '#eeeeee',188 'border-radius': '25px',189 position: 'fixed',190 top: '20%',191 left: '50%',192 'margin-left': '-275px',193 width: '550px',194 'font-size': '25px',195 'z-index': '9999',196 'text-align': 'center'197 }198 };199 function styleElements(list) {200 for (var element in list) {201 var stylesToApply = '';202 for (var property in list[element]) {203 stylesToApply =204 stylesToApply + property + ':' + list[element][property] + ';';205 }206 eval(element).style.cssText = stylesToApply;207 }208 }209 (function () {210 styleElements(styleList);211 if (localStorage.getItem('overlaydisplay')) {212 overlay.style.display = localStorage.getItem('overlaydisplay');213 } else {214 overlay.style.display = 'block';215 }216 if (localStorage.getItem('overlaynumber')) {217 overlay.src =218 './overlays/overlay' + localStorage.getItem('overlaynumber');219 overlaySrc = localStorage.getItem('overlaynumber');220 } else {221 overlay.src = './overlays/overlay0';222 overlaySrc = 0;223 }224 if (localStorage.getItem('vertical')) {225 overlay.style.top = localStorage.getItem('vertical');226 } else {227 overlay.style.top = '0';228 }229 if (localStorage.getItem('horizontal')) {230 overlay.style.left = localStorage.getItem('horizontal');231 } else {232 overlay.style.left = '0';233 }234 if (localStorage.getItem('opacity')) {235 overlay.style.opacity = localStorage.getItem('opacity');236 } else {237 overlay.style.opacity = '0.5';238 }239 overlay.style.width = '"' + overlay.naturalWidth + 'px' + '"';240 overlay.style.height = '"' + overlay.naturalHeight + 'px' + '"';241 overlayHelp.innerHTML =242 '<br>Arrows – Move overlay</br><br>Ctrl + arrows – Wide steps</br><br>PageUp/PageDown – Previous/Next overlay</br><br>Comma/Period – Change overlay opacity</br><br>Home – Reset overlay position</br><br>Backquote – Show/Hide overlay</br><br>Delete – Clear local storage</br>';243 document.body.insertBefore(overlay, null);244 document.body.insertBefore(overlayInformation, null);245 document.body.insertBefore(overlayHelp, null);246 })();247 function showOverlayInformation() {248 clearTimeout(overlayInformationTimeout);249 overlayInformation.style.display = 'flex';250 overlayInformation.innerHTML =251 '<br>Horizontal offset: ' +252 overlay.style.left +253 '</br><br>Vertical offset: ' +254 overlay.style.top +255 '</br><br>Overlay opacity: ' +256 (overlay.style.opacity * 100 + '%') +257 '</br><br>Overlay number: ' +258 overlaySrc +259 '</br>';260 overlayInformationTimeout = setTimeout(function () {261 overlayInformation.style.display = 'none';262 }, 1000);263 }264 function changeCoordinates(axis, step) {265 if (axis === 'vertical') {266 overlay.style.top =267 +overlay.style.top.slice(0, -2) + parseInt(step, 10) + 'px';268 localStorage.setItem('vertical', overlay.style.top);269 } else {270 overlay.style.left =271 +overlay.style.left.slice(0, -2) + parseInt(step, 10) + 'px';272 localStorage.setItem('horizontal', overlay.style.left);273 }274 showOverlayInformation();275 }276 function resetCoordinates() {277 overlay.style.top = 0;278 overlay.style.left = 0;279 localStorage.setItem('vertical', overlay.style.top);280 localStorage.setItem('horizontal', overlay.style.left);281 showOverlayInformation();282 }283 function changeOpacity(change) {284 overlay.style.opacity = (overlay.style.opacity * 10 + change) / 10;285 if (overlay.style.opacity < 0) {286 overlay.style.opacity = 0;287 } else if (overlay.style.opacity > 1) {288 overlay.style.opacity = 1;289 }290 localStorage.setItem('opacity', overlay.style.opacity);291 showOverlayInformation();292 }293 function changeOverlaySrc(change) {294 if (change === 'next') {295 overlay.src = './overlays/overlay' + ++overlaySrc;296 } else {297 if (overlaySrc > 0) {298 overlay.src = './overlays/overlay' + --overlaySrc;299 }300 }301 localStorage.setItem('overlaynumber', overlaySrc);302 showOverlayInformation();303 }304 function toggleDisplay() {305 if (overlay.style.display === 'block') {306 overlay.style.display = 'none';307 localStorage.setItem('overlaydisplay', 'none');308 } else {309 overlay.style.display = 'block';310 localStorage.setItem('overlaydisplay', 'block');311 }312 }313 function toggleHelp() {314 if (overlayHelp.style.display === 'none') {315 overlayHelp.style.display = 'flex';316 } else {317 overlayHelp.style.display = 'none';318 }319 }320 function removeKey(unpressedKey) {321 for (var i = 0; i < pressedKeys.length; i++) {322 if (pressedKeys[i] === unpressedKey) {323 pressedKeys.splice(i, 1);324 }325 }326 }327 function addKey(pressedKey) {328 if (pressedKeys.indexOf(pressedKey) === -1) {329 pressedKeys.push(pressedKey);330 }331 }332 function checkControls() {333 for (var i = 0; i < controls.length; i++) {334 if (controls[i].check()) {335 controls[i].result();336 break;337 }338 }339 }340 function clearLocalStorage() {341 localStorage.clear();342 }343 document.addEventListener('keydown', function (event) {344 if (blockedKeys.indexOf(event.keyCode) !== -1) {345 event.preventDefault();346 }347 if (event.code) {348 addKey(event.code);349 } else {350 addKey(keyCodeToCode[event.keyCode]);351 }352 checkControls();353 });354 document.addEventListener('keyup', function (event) {355 if (event.code) {356 removeKey(event.code);357 } else {358 removeKey(keyCodeToCode[event.keyCode]);359 }360 });...

Full Screen

Full Screen

OverlayUtil-dbg.js

Source:OverlayUtil-dbg.js Github

copy

Full Screen

1/*2 * ! UI development toolkit for HTML5 (OpenUI5)3 * (c) Copyright 2009-2016 SAP SE or an SAP affiliate company.4 * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.5 */6// Provides object sap.ui.dt.OverlayUtil.7sap.ui.define([8 'jquery.sap.global', 'sap/ui/dt/OverlayRegistry', 'sap/ui/dt/ElementUtil'9], function(jQuery, OverlayRegistry, ElementUtil) {10 "use strict";11 /**12 * Class for Overlay Util.13 *14 * @class Utility functionality to work with overlays15 * @author SAP SE16 * @version 1.34.817 * @private18 * @static19 * @since 1.3020 * @alias sap.ui.dt.OverlayUtil21 * @experimental Since 1.30. This class is experimental and provides only limited functionality. Also the API might be changed in future.22 */23 var OverlayUtil = {};24 /**25 *26 */27 OverlayUtil.isInTargetZoneAggregation = function(oElementOverlay) {28 var oAggregationOverlay = oElementOverlay.getParent();29 return oAggregationOverlay && oAggregationOverlay.isTargetZone && oAggregationOverlay.isTargetZone();30 };31 /**32 * Returns an object with parent, aggregation and index33 */34 OverlayUtil.getParentInformation = function(oElementOverlay) {35 var oPublicParent = oElementOverlay.getParentElementOverlay().getElementInstance();36 var sPublicParentAggregationName = oElementOverlay.getParentAggregationOverlay().getAggregationName();37 var aChildren = ElementUtil.getAggregation(oPublicParent, sPublicParentAggregationName);38 var oElement = oElementOverlay.getElementInstance();39 var iIndex = aChildren.indexOf(oElement);40 return {41 parent: oPublicParent,42 aggregation: sPublicParentAggregationName,43 index: iIndex44 };45 };46 /**47 *48 */49 OverlayUtil.getClosestOverlayFor = function(oElement) {50 if (!oElement || !oElement.getParent) {51 return null;52 }53 var oParent = oElement.getParent();54 var oParentOverlay = OverlayRegistry.getOverlay(oParent);55 while (oParent && !oParentOverlay) {56 oParent = oParent.getParent();57 oParentOverlay = OverlayRegistry.getOverlay(oParent);58 }59 return oParentOverlay;60 };61 /**62 *63 */64 OverlayUtil.getGeometry = function(aGeometry) {65 var minLeft, maxRight, minTop, maxBottom;66 aGeometry.forEach(function(oElementGeometry) {67 if (oElementGeometry) {68 if (!minLeft || oElementGeometry.position.left < minLeft) {69 minLeft = oElementGeometry.position.left;70 }71 if (!minTop || oElementGeometry.position.top < minTop) {72 minTop = oElementGeometry.position.top;73 }74 var iRight = oElementGeometry.position.left + oElementGeometry.size.width;75 if (!maxRight || iRight > maxRight) {76 maxRight = iRight;77 }78 var iBottom = oElementGeometry.position.top + oElementGeometry.size.height;79 if (!maxBottom || iBottom > maxBottom) {80 maxBottom = iBottom;81 }82 }83 });84 if (typeof minLeft === "number") {85 return {86 size: {87 width: maxRight - minLeft,88 height: maxBottom - minTop89 },90 position: {91 left: minLeft,92 top: minTop93 },94 visible : true95 };96 }97 };98 /**99 *100 */101 OverlayUtil.getClosestOverlayForType = function(sType, oOverlay) {102 while (oOverlay && !ElementUtil.isInstanceOf(oOverlay.getElementInstance(), sType)) {103 oOverlay = oOverlay.getParentElementOverlay();104 }105 return oOverlay;106 };107 /**108 *109 */110 OverlayUtil.getClosestScrollable = function(oOverlay) {111 if (!oOverlay) {112 return;113 }114 oOverlay = oOverlay.getParent();115 while (oOverlay && oOverlay.isScrollable && !oOverlay.isScrollable()) {116 oOverlay = oOverlay.getParent();117 }118 return oOverlay && oOverlay.isScrollable ? oOverlay : null;119 };120 /**121 *122 */123 OverlayUtil.getFirstChildOverlay = function(oOverlay) {124 if (!oOverlay) {125 return;126 }127 var aAggregationOverlays = oOverlay.getAggregationOverlays();128 if (aAggregationOverlays.length > 0) {129 for (var i = 0; i < aAggregationOverlays.length; i++) {130 var oAggregationOverlay = aAggregationOverlays[i];131 var aChildren = oAggregationOverlay.getChildren();132 if (aChildren.length) {133 return aChildren[0];134 }135 }136 }137 };138 /**139 *140 */141 OverlayUtil.getLastChildOverlay = function(oOverlay) {142 if (!oOverlay) {143 return;144 }145 var aAggregationOverlays = oOverlay.getAggregationOverlays();146 if (aAggregationOverlays.length > 0) {147 for (var i = aAggregationOverlays.length - 1; i >= 0; i--) {148 var oAggregationOverlay = aAggregationOverlays[i];149 var aChildren = oAggregationOverlay.getChildren();150 if (aChildren.length) {151 return aChildren[aChildren.length - 1];152 }153 }154 }155 };156 /**157 *158 */159 OverlayUtil.getNextSiblingOverlay = function(oOverlay) {160 if (!oOverlay) {161 return;162 }163 var oParentAggregationOverlay = oOverlay.getParentAggregationOverlay();164 if (oParentAggregationOverlay) {165 var aAggregationOverlays = oParentAggregationOverlay.getChildren();166 var iIndex = aAggregationOverlays.indexOf(oOverlay);167 // get next sibling in the same aggregation168 if (iIndex !== aAggregationOverlays.length - 1) {169 return aAggregationOverlays[iIndex + 1];170 } else {171 // get next sibling from next aggregation in the same parent172 if (iIndex === aAggregationOverlays.length - 1) {173 var oParent = oOverlay.getParentElementOverlay();174 aAggregationOverlays = oParent.getAggregationOverlays();175 for (iIndex = aAggregationOverlays.indexOf(oParentAggregationOverlay) + 1; iIndex < aAggregationOverlays.length; iIndex++) {176 var aOverlays = aAggregationOverlays[iIndex].getChildren();177 if (aOverlays.length) {178 return aOverlays[0];179 }180 }181 }182 }183 }184 };185 /**186 *187 */188 OverlayUtil.getPreviousSiblingOverlay = function(oOverlay) {189 if (!oOverlay) {190 return;191 }192 var oParentAggregationOverlay = oOverlay.getParentAggregationOverlay();193 if (oParentAggregationOverlay) {194 var aAggregationOverlays = oParentAggregationOverlay.getChildren();195 var iIndex = aAggregationOverlays.indexOf(oOverlay);196 // get previous sibling from the same aggregation197 if (iIndex > 0) {198 return aAggregationOverlays[iIndex - 1];199 } else {200 // get previous sibling from previous aggregation in the same parent201 if (iIndex === 0) {202 var oParent = oOverlay.getParentElementOverlay();203 aAggregationOverlays = oParent.getAggregationOverlays();204 for (iIndex = aAggregationOverlays.indexOf(oParentAggregationOverlay) - 1; iIndex >= 0; iIndex--) {205 var aOverlays = aAggregationOverlays[iIndex].getChildren();206 if (aOverlays.length) {207 return aOverlays[aOverlays.length - 1];208 }209 }210 }211 }212 }213 };214 /**215 *216 */217 OverlayUtil.getNextOverlay = function(oOverlay) {218 if (!oOverlay) {219 return;220 }221 var oFirstChildOverlay = this.getFirstChildOverlay(oOverlay);222 if (oFirstChildOverlay) {223 return oFirstChildOverlay;224 }225 var oNextSiblingOverlay = this.getNextSiblingOverlay(oOverlay);226 if (oNextSiblingOverlay) {227 return oNextSiblingOverlay;228 }229 do {230 oOverlay = oOverlay.getParentElementOverlay();231 oNextSiblingOverlay = this.getNextSiblingOverlay(oOverlay);232 } while (oOverlay && !oNextSiblingOverlay);233 return oNextSiblingOverlay;234 };235 /**236 *237 */238 OverlayUtil.getPreviousOverlay = function(oOverlay) {239 if (!oOverlay) {240 return;241 }242 var oParentAggregationOverlay = oOverlay.getParentAggregationOverlay();243 if (!oParentAggregationOverlay) {244 return;245 }246 var oPreviousSiblingOverlay = this.getPreviousSiblingOverlay(oOverlay);247 if (oPreviousSiblingOverlay) {248 var oLastChildOverlay = oPreviousSiblingOverlay;249 do {250 oPreviousSiblingOverlay = oLastChildOverlay;251 oLastChildOverlay = this.getLastChildOverlay(oPreviousSiblingOverlay);252 } while (oLastChildOverlay);253 return oPreviousSiblingOverlay;254 }255 return oOverlay.getParentElementOverlay();256 };257 /**258 *259 */260 OverlayUtil.getRootOverlay = function(oOverlay) {261 var oParentOverlay = oOverlay;262 do {263 oOverlay = oParentOverlay;264 oParentOverlay = oOverlay.getParentElementOverlay();265 } while (oParentOverlay);266 return oOverlay;267 };268 /**269 *270 */271 OverlayUtil.iterateOverlayElementTree = function(oElementOverlay, fnCallback) {272 var that = this;273 fnCallback(oElementOverlay);274 oElementOverlay.getAggregationOverlays().forEach(function(oAggregationOverlay) {275 oAggregationOverlay.getChildren().forEach(function(oChildOverlay) {276 that.iterateOverlayElementTree(oChildOverlay, fnCallback);277 });278 });279 };280 /**281 *282 */283 OverlayUtil.iterateOverlayTree = function(oOverlay, fnCallback) {284 var that = this;285 fnCallback(oOverlay);286 oOverlay.getChildren().forEach(function(oChildOverlay) {287 that.iterateOverlayTree(oChildOverlay, fnCallback);288 });289 };290 return OverlayUtil;...

Full Screen

Full Screen

overlays.ts

Source:overlays.ts Github

copy

Full Screen

1import { AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, OverlayInterface } from '../interface';2let lastId = 0;3export function createOverlay<T extends HTMLIonOverlayElement>(element: T, opts: object | undefined): Promise<T> {4 const doc = element.ownerDocument!;5 connectListeners(doc);6 // convert the passed in overlay options into props7 // that get passed down into the new overlay8 Object.assign(element, opts);9 element.classList.add('overlay-hidden');10 const overlayIndex = lastId++;11 element.overlayIndex = overlayIndex;12 if (!element.hasAttribute('id')) {13 element.id = `ion-overlay-${overlayIndex}`;14 }15 // append the overlay element to the document body16 getAppRoot(doc).appendChild(element);17 return element.componentOnReady();18}19export function connectListeners(doc: Document) {20 if (lastId === 0) {21 lastId = 1;22 // trap focus inside overlays23 doc.addEventListener('focusin', ev => {24 const lastOverlay = getOverlay(doc);25 if (lastOverlay && lastOverlay.backdropDismiss && !isDescendant(lastOverlay, ev.target as HTMLElement)) {26 const firstInput = lastOverlay.querySelector('input,button') as HTMLElement | null;27 if (firstInput) {28 firstInput.focus();29 }30 }31 });32 // handle back-button click33 doc.addEventListener('ionBackButton', ev => {34 const lastOverlay = getOverlay(doc);35 if (lastOverlay && lastOverlay.backdropDismiss) {36 (ev as BackButtonEvent).detail.register(100, () => {37 return lastOverlay.dismiss(undefined, BACKDROP);38 });39 }40 });41 // handle ESC to close overlay42 doc.addEventListener('keyup', ev => {43 if (ev.key === 'Escape') {44 const lastOverlay = getOverlay(doc);45 if (lastOverlay && lastOverlay.backdropDismiss) {46 lastOverlay.dismiss(undefined, BACKDROP);47 }48 }49 });50 }51}52export function dismissOverlay(doc: Document, data: any, role: string | undefined, overlayTag: string, id?: string): Promise<boolean> {53 const overlay = getOverlay(doc, overlayTag, id);54 if (!overlay) {55 return Promise.reject('overlay does not exist');56 }57 return overlay.dismiss(data, role);58}59export function getOverlays(doc: Document, overlayTag?: string): HTMLIonOverlayElement[] {60 const overlays = (Array.from(getAppRoot(doc).children) as HTMLIonOverlayElement[]).filter(c => c.overlayIndex > 0);61 if (overlayTag === undefined) {62 return overlays;63 }64 overlayTag = overlayTag.toUpperCase();65 return overlays.filter(c => c.tagName === overlayTag);66}67export function getOverlay(doc: Document, overlayTag?: string, id?: string): HTMLIonOverlayElement | undefined {68 const overlays = getOverlays(doc, overlayTag);69 return (id === undefined)70 ? overlays[overlays.length - 1]71 : overlays.find(o => o.id === id);72}73export async function present(74 overlay: OverlayInterface,75 name: keyof IonicConfig,76 iosEnterAnimation: AnimationBuilder,77 mdEnterAnimation: AnimationBuilder,78 opts?: any79) {80 if (overlay.presented) {81 return;82 }83 overlay.presented = true;84 overlay.willPresent.emit();85 // get the user's animation fn if one was provided86 const animationBuilder = (overlay.enterAnimation)87 ? overlay.enterAnimation88 : overlay.config.get(name, overlay.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);89 const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);90 if (completed) {91 overlay.didPresent.emit();92 }93}94export async function dismiss(95 overlay: OverlayInterface,96 data: any | undefined,97 role: string | undefined,98 name: keyof IonicConfig,99 iosLeaveAnimation: AnimationBuilder,100 mdLeaveAnimation: AnimationBuilder,101 opts?: any102): Promise<boolean> {103 if (!overlay.presented) {104 return false;105 }106 overlay.presented = false;107 try {108 overlay.willDismiss.emit({ data, role });109 const animationBuilder = (overlay.leaveAnimation)110 ? overlay.leaveAnimation111 : overlay.config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);112 await overlayAnimation(overlay, animationBuilder, overlay.el, opts);113 overlay.didDismiss.emit({ data, role });114 } catch (err) {115 console.error(err);116 }117 overlay.el.remove();118 return true;119}120function getAppRoot(doc: Document) {121 return doc.querySelector('ion-app') || doc.body;122}123async function overlayAnimation(124 overlay: OverlayInterface,125 animationBuilder: AnimationBuilder,126 baseEl: any,127 opts: any128): Promise<boolean> {129 if (overlay.animation) {130 overlay.animation.destroy();131 overlay.animation = undefined;132 return false;133 }134 // Make overlay visible in case it's hidden135 baseEl.classList.remove('overlay-hidden');136 const aniRoot = baseEl.shadowRoot || overlay.el;137 const animation = overlay.animation = await import('./animation').then(mod => mod.create(animationBuilder, aniRoot, opts));138 overlay.animation = animation;139 if (!overlay.animated || !overlay.config.getBoolean('animated', true)) {140 animation.duration(0);141 }142 if (overlay.keyboardClose) {143 animation.beforeAddWrite(() => {144 const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;145 if (activeElement && activeElement.matches('input, ion-input, ion-textarea')) {146 activeElement.blur();147 }148 });149 }150 await animation.playAsync();151 const hasCompleted = animation.hasCompleted;152 animation.destroy();153 overlay.animation = undefined;154 return hasCompleted;155}156export function autoFocus(containerEl: HTMLElement): HTMLElement | undefined {157 const focusableEls = containerEl.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]');158 if (focusableEls.length > 0) {159 const el = focusableEls[0] as HTMLInputElement;160 el.focus();161 return el;162 }163 return undefined;164}165export function eventMethod<T>(element: HTMLElement, eventName: string): Promise<T> {166 let resolve: (detail: T) => void;167 const promise = new Promise<T>(r => resolve = r);168 onceEvent(element, eventName, (event: any) => {169 resolve(event.detail);170 });171 return promise;172}173export function onceEvent(element: HTMLElement, eventName: string, callback: (ev: Event) => void) {174 const handler = (ev: Event) => {175 element.removeEventListener(eventName, handler);176 callback(ev);177 };178 element.addEventListener(eventName, handler);179}180export function isCancel(role: string | undefined): boolean {181 return role === 'cancel' || role === BACKDROP;182}183function isDescendant(parent: HTMLElement, child: HTMLElement | null) {184 while (child) {185 if (child === parent) {186 return true;187 }188 child = child.parentElement;189 }190 return false;191}...

Full Screen

Full Screen

overlay.js

Source:overlay.js Github

copy

Full Screen

1// Copyright (c) 2011 The Chromium Authors. All rights reserved.2// Use of this source code is governed by a BSD-style license that can be3// found in the LICENSE file.4/**5 * @fileoverview Implements an element that is hidden by default, but6 * when shown, dims and (attempts to) disable the main document.7 *8 * You can turn any div into an overlay. Note that while an9 * overlay element is shown, its parent is changed. Hiding the overlay10 * restores its original parentage.11 *12 */13cr.define('tracing', function() {14 /**15 * Manages a full-window div that darkens the window, disables16 * input, and hosts the currently-visible overlays. You shouldn't17 * have to instantiate this directly --- it gets set automatically.18 * @param {Object=} opt_propertyBag Optional properties.19 * @constructor20 * @extends {HTMLDivElement}21 */22 var OverlayRoot = cr.ui.define('div');23 OverlayRoot.prototype = {24 __proto__: HTMLDivElement.prototype,25 decorate: function() {26 this.classList.add('overlay-root');27 this.visible = false;28 this.contentHost = this.ownerDocument.createElement('div');29 this.contentHost.classList.add('content-host');30 this.tabCatcher = this.ownerDocument.createElement('span');31 this.tabCatcher.tabIndex = 0;32 this.appendChild(this.contentHost);33 this.onKeydownBoundToThis_ = this.onKeydown_.bind(this);34 this.onFocusInBoundToThis_ = this.onFocusIn_.bind(this);35 this.addEventListener('mousedown', this.onMousedown_.bind(this));36 },37 /**38 * Adds an overlay, attaching it to the contentHost so that it is visible.39 */40 showOverlay: function(overlay) {41 // Reparent this to the overlay content host.42 overlay.oldParent_ = overlay.parentNode;43 this.contentHost.appendChild(overlay);44 this.contentHost.appendChild(this.tabCatcher);45 // Show the overlay root.46 this.ownerDocument.body.classList.add('disabled-by-overlay');47 this.visible = true;48 // Bring overlay into focus.49 overlay.tabIndex = 0;50 overlay.focus();51 // Listen to key and focus events to prevent focus from52 // leaving the overlay.53 this.ownerDocument.addEventListener('focusin',54 this.onFocusInBoundToThis_, true);55 overlay.addEventListener('keydown', this.onKeydownBoundToThis_);56 },57 /**58 * Clicking outside of the overlay will de-focus the overlay. The59 * next tab will look at the entire document to determine the focus.60 * For certain documents, this can cause focus to "leak" outside of61 * the overlay.62 */63 onMousedown_: function(e) {64 if (e.target == this) {65 e.preventDefault();66 }67 },68 /**69 * Prevents forward-tabbing out of the overlay70 */71 onFocusIn_: function(e) {72 if (e.target == this.tabCatcher) {73 window.setTimeout(this.focusOverlay_.bind(this), 0);74 }75 },76 focusOverlay_: function() {77 this.contentHost.firstChild.focus();78 },79 /**80 * Prevent the user from shift-tabbing backwards out of the overlay.81 */82 onKeydown_: function(e) {83 if (e.keyCode == 9 &&84 e.shiftKey &&85 e.target == this.contentHost.firstChild) {86 e.preventDefault();87 }88 },89 /**90 * Hides an overlay, attaching it to its original parent if needed.91 */92 hideOverlay: function(overlay) {93 // hide the overlay root94 this.visible = false;95 this.ownerDocument.body.classList.remove('disabled-by-overlay');96 this.lastFocusOut_ = undefined;97 // put the overlay back on its previous parent98 overlay.parentNode.removeChild(this.tabCatcher);99 if (overlay.oldParent_) {100 overlay.oldParent_.appendChild(overlay);101 delete overlay.oldParent_;102 } else {103 this.contentHost.removeChild(overlay);104 }105 // remove listeners106 overlay.removeEventListener('keydown', this.onKeydownBoundToThis_);107 this.ownerDocument.removeEventListener('focusin',108 this.onFocusInBoundToThis_);109 }110 };111 cr.defineProperty(OverlayRoot, 'visible', cr.PropertyKind.BOOL_ATTR);112 /**113 * Creates a new overlay element. It will not be visible until shown.114 * @param {Object=} opt_propertyBag Optional properties.115 * @constructor116 * @extends {HTMLDivElement}117 */118 var Overlay = cr.ui.define('div');119 Overlay.prototype = {120 __proto__: HTMLDivElement.prototype,121 /**122 * Initializes the overlay element.123 */124 decorate: function() {125 // create the overlay root on this document if its not present126 if (!this.ownerDocument.querySelector('.overlay-root')) {127 var overlayRoot = this.ownerDocument.createElement('div');128 cr.ui.decorate(overlayRoot, OverlayRoot);129 this.ownerDocument.body.appendChild(overlayRoot);130 }131 this.classList.add('overlay');132 this.visible = false;133 },134 onVisibleChanged_: function() {135 var overlayRoot = this.ownerDocument.querySelector('.overlay-root');136 if (this.visible) {137 overlayRoot.showOverlay(this);138 } else {139 overlayRoot.hideOverlay(this);140 }141 }142 };143 /**144 * Shows and hides the overlay. Note that while visible == true, the overlay145 * element will be tempoarily reparented to another place in the DOM.146 */147 cr.defineProperty(Overlay, 'visible', cr.PropertyKind.BOOL_ATTR,148 Overlay.prototype.onVisibleChanged_);149 return {150 Overlay: Overlay151 };...

Full Screen

Full Screen

overlayWrapperComponent.js

Source:overlayWrapperComponent.js Github

copy

Full Screen

1/**2 * ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components3 * @version v18.0.14 * @link http://www.ag-grid.com/5 * @license MIT6 */7"use strict";8var __extends = (this && this.__extends) || (function () {9 var extendStatics = Object.setPrototypeOf ||10 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||11 function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };12 return function (d, b) {13 extendStatics(d, b);14 function __() { this.constructor = d; }15 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());16 };17})();18var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {19 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;20 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);21 else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;22 return c > 3 && r && Object.defineProperty(target, key, r), r;23};24var __metadata = (this && this.__metadata) || function (k, v) {25 if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);26};27Object.defineProperty(exports, "__esModule", { value: true });28var utils_1 = require("../../utils");29var gridOptionsWrapper_1 = require("../../gridOptionsWrapper");30var context_1 = require("../../context/context");31var component_1 = require("../../widgets/component");32var componentRecipes_1 = require("../../components/framework/componentRecipes");33var OverlayWrapperComponent = (function (_super) {34 __extends(OverlayWrapperComponent, _super);35 function OverlayWrapperComponent() {36 return _super.call(this) || this;37 }38 OverlayWrapperComponent.prototype.init = function () { };39 OverlayWrapperComponent.prototype.showLoadingOverlay = function (eOverlayWrapper) {40 var _this = this;41 this.setTemplate(OverlayWrapperComponent.LOADING_WRAPPER_OVERLAY_TEMPLATE);42 this.componentRecipes.newLoadingOverlayComponent().then(function (renderer) {43 var loadingOverlayWrapper = _this.getRefElement("loadingOverlayWrapper");44 utils_1.Utils.removeAllChildren(loadingOverlayWrapper);45 loadingOverlayWrapper.appendChild(renderer.getGui());46 });47 this.showOverlay(eOverlayWrapper, this.getGui());48 };49 OverlayWrapperComponent.prototype.showNoRowsOverlay = function (eOverlayWrapper) {50 var _this = this;51 this.setTemplate(OverlayWrapperComponent.NO_ROWS_WRAPPER_OVERLAY_TEMPLATE);52 this.componentRecipes.newNoRowsOverlayComponent().then(function (renderer) {53 var noRowsOverlayWrapper = _this.getRefElement("noRowsOverlayWrapper");54 utils_1.Utils.removeAllChildren(noRowsOverlayWrapper);55 noRowsOverlayWrapper.appendChild(renderer.getGui());56 });57 this.showOverlay(eOverlayWrapper, this.getGui());58 };59 OverlayWrapperComponent.prototype.hideOverlay = function (eOverlayWrapper) {60 utils_1.Utils.removeAllChildren(eOverlayWrapper);61 utils_1.Utils.setVisible(eOverlayWrapper, false);62 };63 OverlayWrapperComponent.prototype.showOverlay = function (eOverlayWrapper, overlay) {64 if (overlay) {65 utils_1.Utils.removeAllChildren(eOverlayWrapper);66 utils_1.Utils.setVisible(eOverlayWrapper, true);67 eOverlayWrapper.appendChild(overlay);68 }69 else {70 console.warn('ag-Grid: unknown overlay');71 this.hideOverlay(eOverlayWrapper);72 }73 };74 // wrapping in outer div, and wrapper, is needed to center the loading icon75 // The idea for centering came from here: http://www.vanseodesign.com/css/vertical-centering/76 OverlayWrapperComponent.LOADING_WRAPPER_OVERLAY_TEMPLATE = '<div class="ag-overlay-panel" role="presentation">' +77 '<div class="ag-overlay-wrapper ag-overlay-loading-wrapper" ref="loadingOverlayWrapper">[OVERLAY_TEMPLATE]</div>' +78 '</div>';79 OverlayWrapperComponent.NO_ROWS_WRAPPER_OVERLAY_TEMPLATE = '<div class="ag-overlay-panel" role="presentation">' +80 '<div class="ag-overlay-wrapper ag-overlay-no-rows-wrapper" ref="noRowsOverlayWrapper">[OVERLAY_TEMPLATE]</div>' +81 '</div>';82 __decorate([83 context_1.Autowired('gridOptionsWrapper'),84 __metadata("design:type", gridOptionsWrapper_1.GridOptionsWrapper)85 ], OverlayWrapperComponent.prototype, "gridOptionsWrapper", void 0);86 __decorate([87 context_1.Autowired('componentRecipes'),88 __metadata("design:type", componentRecipes_1.ComponentRecipes)89 ], OverlayWrapperComponent.prototype, "componentRecipes", void 0);90 return OverlayWrapperComponent;91}(component_1.Component));...

Full Screen

Full Screen

test_Overlay.js

Source:test_Overlay.js Github

copy

Full Screen

1( function( Overlay, $ ) {2QUnit.module( 'MobileFrontend: Overlay.js' );3QUnit.test( 'Simple overlay', 1, function() {4 var overlay = new Overlay( { heading: '<h2>Title</h2>', content: 'Text' } );5 overlay.show();6 strictEqual( overlay.$el[0].parentNode, $( '#mw-mf-viewport' )[0], 'In DOM' );7 overlay.hide();8} );9QUnit.test( 'HTML overlay', 2, function() {10 var overlay = new Overlay( {11 heading: '<div id="test">Awesome: <input></div>',12 content: '<div class="content">YO</div>'13 } );14 strictEqual( overlay.$el.find( '#test' ).html(), 'Awesome: <input>' );15 strictEqual( overlay.$el.find( '.content' ).text(), 'YO' );16} );17QUnit.test( 'Close overlay', 1, function() {18 var overlay = new Overlay( { heading: '<h2>Title</h2>', content: 'Text' } );19 overlay.show();20 overlay.hide();21 strictEqual( overlay.$el[0].parentNode, null, 'No longer in DOM' );22} );23QUnit.test( 'Stacked overlays', 6, function() {24 var overlay = new Overlay( { heading: 'Overlay 1', content: 'Text' } ),25 overlayTwo = new Overlay( { heading: 'Overlay 2', content: 'Text <button class="cancel">cancel</button>',26 parent: overlay } );27 overlay.show();28 overlayTwo.show();29 strictEqual( $( 'html' ).hasClass( 'overlay-enabled' ), true, 'In overlay mode' );30 strictEqual( overlayTwo.$el.is( ':visible' ), true,31 'The second overlay is the active one' );32 strictEqual( overlay.$el[0].parentNode, null,33 'The first overlay is no longer in the DOM' );34 // now close the top stacked one...35 overlayTwo.$( '.cancel' ).trigger( 'tap' );36 strictEqual( overlayTwo.$el[0].parentNode, null, 'No longer in DOM' );37 strictEqual( overlay.$el[0].parentNode, $( '#mw-mf-viewport' )[0], 'Still in DOM' );38 strictEqual( $( 'html' ).hasClass( 'overlay-enabled' ), true, 'Still in overlay mode' );39 overlay.hide();40} );...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { launch, devices } = require('qawolf');2const iPhone = devices['iPhone 8'];3describe('test', () => {4 let browser;5 beforeAll(async () => {6 });7 afterAll(async () => {8 await browser.close();9 });10 it('test', async () => {11 await browser.overlay('h1');12 });13});14const { launch, devices } = require('qawolf');15const iPhone = devices['iPhone 8'];16describe('test', () => {17 let browser;18 beforeAll(async () => {19 });20 afterAll(async () => {21 await browser.close();22 });23 it('test', async () => {24 await browser.click('h1');25 });26});27const { launch, devices } = require('qawolf');28const iPhone = devices['iPhone 8'];29describe('test', () => {30 let browser;31 beforeAll(async () => {32 });33 afterAll(async () => {34 await browser.close();35 });36 it('test', async () => {37 await browser.type('h1', 'test');38 });39});40const { launch, devices } = require('qawolf');41const iPhone = devices['iPhone 8'];42describe('test', () => {43 let browser;44 beforeAll(async () => {45 });46 afterAll(async () => {47 await browser.close();48 });49 it('test', async () => {50 await browser.press('h1', 'Enter');51 });52});53const { launch, devices } = require('qawolf');54const iPhone = devices['iPhone 8'];55describe('test', () => {56 let browser;57 beforeAll(async () => {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const qawolf = require("qawolf");2const browser = await qawolf.launch();3const context = browser.defaultBrowserContext();4const page = await qawolf.createPage(browser);5await qawolf.scroll(page, "html", { x: 0, y: 0 });6await qawolf.click(page, "input[name=\"q\"]");7await qawolf.type(page, "input[name=\"q\"]", "Hello World");8await qawolf.click(page, "input[name=\"btnK\"]");9await qawolf.click(page, "input[name=\"btnK\"]");10await qawolf.click(page, "input[name=\"q\"]");11await qawolf.type(page, "input[name=\"q\"]", "Hello World");12await qawolf.click(page, "input[name=\"btnK\"]");13await qawolf.click(page, "input[name=\"btnK\"]");14await qawolf.click(page, "input[name=\"q\"]");15await qawolf.type(page, "input[name=\"q\"]", "Hello World");16await qawolf.click(page, "input[name=\"btnK\"]");17await qawolf.click(page, "input[name=\"btnK\"]");18await qawolf.click(page, "input[name=\"q\"]");19await qawolf.type(page, "input[name=\"q\"]", "Hello World");20await qawolf.click(page, "input[name=\"btnK\"]");21await qawolf.click(page, "input[name=\"btnK\"]");22await qawolf.click(page, "input[name=\"q\"]");23await qawolf.type(page, "input[name=\"q\"]", "Hello World");24await qawolf.click(page, "input[name=\"btnK\"]");25await qawolf.click(page, "input[name=\"btnK\"]");26await qawolf.click(page, "input[name=\"q\"]");27await qawolf.type(page, "input[name=\"q\"]", "Hello World");28await qawolf.click(page, "input[name=\"btnK\"]");29await qawolf.click(page, "input[name=\"btnK\"]");30await qawolf.click(page, "input[name=\"q\"]");31await qawolf.type(page, "input[name=\"q\"]", "Hello World");32await qawolf.click(page, "input[name

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const qawolf = require("qawolf");2const { chromium } = require("playwright");3const { test } = require("@playwright/test");4test("test", async ({ page }) => {5 await qawolf.register(page);6 await page.click("input[name=q]");7 await page.type("input[name=q]", "Hello World");8 await page.press("input[name=q]", "Enter");9 await qawolf.create();10});11{12 "scripts": {13 },14 "dependencies": {15 }16}17{18}19{20}21{22}23const { chromium } = require("playwright");24module.exports = async function launch() {25 const browser = await chromium.launch();26 const context = await browser.newContext({ viewport: { width: 1920, height: 1080

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { launch, firefox, chromium, webkit } = require("qawolf");2const { devices } = require("playwright");3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext(devices["iPhone 11 Pro"]);6 const page = await context.newPage();7 await qawolf.create();8 await page.click("text=Search");9 await page.fill("input[name=q]", "qawolf");10 await page.press("input[name=q]", "Enter");11 await page.click("text=QAWolf: End-to-end browser testing for developers");12 await page.click("text=Get Started");13 await page.click("text=Star

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const qawolf = require("qawolf");2const { launch } = qawolf;3const page = await browser.page();4await page.type("#lst-ib", "qawolf");5await page.keyboard.press("Enter");6await qawolf.stopVideos();7await browser.close();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { launch, connect } = require('qawolf');2const selectors = require('../selectors/test.json');3const { test } = require('qawolf');4let browser;5let page;6beforeAll(async () => {7 browser = await launch();8});9afterAll(() => browser.close());10test('test', async () => {11 await page.click(selectors['

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { launch } = require('qawolf');2const selectors = require('./selectors/test.json');3const config = require('./qawolf.config.js');4const { launch, record } = require('qawolf');5const selectors = require('./selectors/test.json');6const config = require('./qawolf.config.js');7const { launch, record } = require('qawolf');8const selectors = require('./selectors/test.json');9const config = require('./qawolf.config.js');10const { launch, record } = require('qawolf');11const selectors = require('./selectors/test.json');12const config = require('./qawolf.config.js');13const { launch, record } = require('qawolf');14const selectors = require('./selectors/test.json');15const config = require('./qawolf.config.js');16const { launch, record } = require('qawolf');17const selectors = require('./selectors/test.json');18const config = require('./qawolf.config.js');19const { launch, record } = require('qawolf');20const selectors = require('./selectors/test.json');21const config = require('./qawolf.config.js');22const { launch, record } = require('qawolf');23const selectors = require('./selectors/test.json');24const config = require('./qawolf.config.js');25const { launch, record } = require('qawolf');26const selectors = require('./selectors/test.json');27const config = require('./qawolf.config.js');28const { launch, record } = require('qawolf');29const selectors = require('./selectors/test.json');30const config = require('./qawolf.config.js');31const { launch, record } = require('qawolf');32const selectors = require('./selectors/test.json');33const config = require('./qawolf.config.js');34const { launch, record } = require('qawolf');35const selectors = require('./selectors/test.json');36const config = require('./q

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 qawolf 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