How to use frameElement method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Simple_Viewer_1.1.js

Source:Simple_Viewer_1.1.js Github

copy

Full Screen

1/**2 * Simple Javascript Image Viewer3 Copyright (C) 2010 Munawwar Firoz4 This program is free software: you can redistribute it and/or modify5 it under the terms of the GNU General Public License as published by6 the Free Software Foundation, either version 3 of the License, or7 (at your option) any later version.8 This program is distributed in the hope that it will be useful,9 but WITHOUT ANY WARRANTY; without even the implied warranty of10 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the11 GNU General Public License for more details (http://www.gnu.org/licenses/)12*/13function getObjectXY(object) {14 var left,top;15 objectCopy=object;16 if (object.offsetParent) {17 left=top=0;18 do {19 left += object.offsetLeft;20 if(object.style.borderLeftWidth!='')21 left+=parseInt(object.style.borderLeftWidth);22 else23 object.style.borderLeftWidth='0px';24 top += object.offsetTop;25 if(object.style.borderTopWidth!='')26 top+=parseInt(object.style.borderTopWidth);27 else28 object.style.borderTopWidth='0px';29 }30 while (object = object.offsetParent);31 }32 return [left-parseInt(objectCopy.style.borderLeftWidth),top-parseInt(objectCopy.style.borderLeftWidth)];33}34//String compare (Case-sensitive)35function strcmp(string1,string2) {36 return (string1.length===string2.length && string1.indexOf(string2)!=-1);37}38//String compare (Case-insensitive)39function strcmpi(string1,string2) {40 return (string1.length===string2.length && string1.toLowerCase().indexOf(string2.toLowerCase())!=-1);41}42//string1 should end with string2 to return true (Case-insensitive)43function strEndsWith(string1,string2) {44 var index=string1.length-string2.length;45 return (string1.toLowerCase().lastIndexOf(string2.toLowerCase(),index)==index);46}47//Returns the constructor (which is a function) name48function returnDataType(object) {49 if(typeof object==='undefined')50 return 'undefined';51 if(typeof object==='null')52 return 'null';53 code=new String(object.constructor);54 return code.substring( code.indexOf(' ')+1, code.indexOf('(') );55}56//Verifies wether the datatype of a variable is as you expect it to be57function verifyDataType(object,Datatype_expected_in_string) {58 return strcmpi( returnDataType(object), Datatype_expected_in_string );59}60function retInt(str, suffix) {61 if(typeof str=='number')62 return str;63 var result=str.indexOf(suffix);64 return parseInt(str.substring(0,(result!=-1)?result:str.length))65}66/*Mouse related functions*/67//Used to retrieve the mouse cursor position on screen (but event is needed as argument)68function getMouseXY(event) {69 var posx = 0, posy = 0;70 if (!event) event = window.event; //firefox71 if (event.pageX || event.pageY) {72 posx = event.pageX;73 posy = event.pageY;74 }75 else if (event.clientX || event.clientY) { //IE76 posx = event.clientX + document.body.scrollLeft77 + document.documentElement.scrollLeft;78 posy = event.clientY + document.body.scrollTop79 + document.documentElement.scrollTop;80 }81 return [posx,posy];82}83function mouseWheel() {84 var self=this;85 /*Event handlers*/86 /*Mouse wheel functions*/87 //Default mouse wheel callback function88 //Variable local to 'this'89 var wheelCallback = function(event,object,delta){90 /*Override this function and write your code there*/91 /*92 delta=-1 when mouse wheel is rolled backwards (towards yourself)93 delta=1 when mouse wheel is rolled forward (away from one's self)94 Note: Here is where you can call the getMouseXY function using the 'event' argument95 */96 }97 //Mouse wheel event handler98 self.wheelHandler = function (event){99 var delta = 0;100 if (!event) //For IE101 event = window.event;102 if (event.wheelDelta) //IE103 {104 delta = event.wheelDelta/120;105 //if (window.opera) delta = -delta; //for Opera...hmm I read somewhere opera 9 need the delta sign inverted...tried in opera 10 and it doesnt require this!?106 }107 else if (event.detail) //firefox108 delta = -event.detail/3;109 if (event.preventDefault)110 event.preventDefault();111 event.returnValue = false;112 if (delta)113 wheelCallback(event,this,delta); //callback function114 }115 //Mouse wheel initialization116 self.init = function(object,callback) {117 if (object.addEventListener) //For firefox118 object.addEventListener('DOMMouseScroll', this.wheelHandler, false); //Mouse wheel initialization119 //For IE120 object.onmousewheel = this.wheelHandler; //Mouse wheel initialization121 wheelCallback=callback;122 }123 this.setCallback = function(callback){124 wheelCallback=callback;125 }126}127//Debugging128function debug_msgs() {129 this.counter=0;130 this.clear=function() {131 var div=document.getElementById('debug');132 div.innerHTML='';133 this.counter=0;134 }135 this.print=function(string) {136 var div=document.getElementById('debug');137 div.innerHTML+=string;138 }139 this.println=function(string) {140 var div=document.getElementById('debug');141 div.innerHTML+=string+'<br>';142 this.counter++;143 }144}145var debug=new debug_msgs();146/*-------------The image viewer--------------*/147function viewer(arguments) //argument array148{149 var self=this;150 /*Properties*/151 //Public access152 self.outerFrame=null;153 154 //Private access155 var image=null,imageSource=null,parent=null,replace=null,preLoader=null;156 var frame=['400px','400px',true]; //Format: ['width in px or % (number)','height in px or % (number)', auto adjust frameElement to image (boolean)]157 var borderClass=null;158 var zoomFactor='10%'; //10% increase per zoom in 159 var maxZoom='300%'; //Either 'percentage' or ['max width in pixel', 'max height in pixel']160 /*Set user defined properties and configurations*/161 /*162 The following configurations are for pure javascript image viewers:163 imageSource : string - Source to the image you want to show164 165 parent : HTMLElement - The parent element of the image viewer166 or167 replace: HTMLElement - The image viewer replace this HTML element168 (Exactly one of the above two properties is absolutly needed)169 170 preLoader (optional) : string - Source to a pre-loader image. Useful in case of large images171 172 The following configurations are for partial javascript/partial HTML image viewers:173 image - HTMLElement - The reference to the image HTML element174 175 Common to both:176 frame - An array of format [width, height, widthIsMax, heightIsMax]177 width and height are strings like '400px' or '100%'. width and height can be in px or %178 widthIsMax and heightIsMax are optional boolean values. 179 Say if widthIsMax is set to true, it treats the width as the maximum width limit.180 So if the zoomed image isn't fitting exactly into the frameElement, the frameElement dimension is reduced and adjusted to fit the image.181 182 zoomFactor (optional) - number - Decides the amount zoomed per zoom event. Default is set to 10 (in %)183 maxZoom (optional) - Sets the makimum image zoom in percentage or pixels. Format :Either 'percentage' or ['max width in pixel', 'max height in pixel']184 Example: '150%' or ['500px,'500px']185 */186 var key;187 for (key in arguments) {188 var temp=arguments[key];189 eval(key + '=temp;');190 }191 /*Internal states,HTML elements and properties*/192 self.frameElement = null;193 var orignalW,orignalH, zoomLevel=0;194 var lastMousePosition=null, speed=5;195 var mouseWheelObject=null;196 /*Methods*/197 self.getFrameDimension = function() {198 return [self.frameElement.clientWidth,self.frameElement.clientHeight];199 } 200 self.setDimension = function(width,height) { //width and height of image201 image.width=Math.round(width);202 image.height=Math.round(height);203 }204 self.getDimension = function() {205 return [image.width,image.height];206 }207 self.setPosition = function(x,y) { //x and y coordinate of image208 image.style.left=(Math.round(x)+'px');209 image.style.top=(Math.round(y)+'px');210 }211 self.getPosition = function() {212 return [retInt(image.style.left,'px'),retInt(image.style.top,'px')];213 }214 self.setMouseCursor = function() {215 var dimension = self.getDimension();216 var frameDimension = self.getFrameDimension();217 218 var cursor='crosshair';219 if(dimension[0]>frameDimension[0] && dimension[1]>frameDimension[1])220 cursor='move';221 else if(dimension[0]>frameDimension[0])222 cursor='e-resize';223 else if(dimension[1]>frameDimension[1])224 cursor='n-resize';225 226 image.style.cursor=cursor;227 }228 self.maxZoomCheck = function(width,height) {229 if(typeof width=='undefined' || typeof height=='undefined') {230 var temp = self.getDimension();231 width=temp[0], height=temp[1];232 }233 if(typeof maxZoom=='number') {234 return ((width/orignalW)>maxZoom || (height/orignalH)>maxZoom);235 }236 else if(typeof maxZoom=='object') {237 return (width>maxZoom[0] || height>maxZoom[1]);238 }239 }240 self.fitToFrame = function(width, height) { //width and height of image241 if(typeof width=='undefined' || typeof height=='undefined') {242 width=orignalW, height=orignalH;243 }244 var frameDimension = self.getFrameDimension(), newWidth,newHeight;245 246 newWidth = frameDimension[0];247 newHeight = Math.round((newWidth*height)/width);248 if(newHeight>(frameDimension[1])) {249 newHeight = frameDimension[1];250 newWidth = Math.round((newHeight*width)/height); 251 }252 return [newWidth,newHeight];253 }254 self.getZoomLevel = function() {255 return zoomLevel;256 }257 self.zoomTo = function(newZoomLevel, x, y) {258 var frameDimension = self.getFrameDimension();259 //check if x and y coordinate is within the self.frameElement260 if(newZoomLevel<0 || x<0 || y<0 || x>=frameDimension[0] || y>=frameDimension[1])261 return false;262 263 var dimension = self.fitToFrame(orignalW,orignalH);264 for(var i=newZoomLevel; i>0;i--)265 dimension[0] *= zoomFactor, dimension[1] *= zoomFactor;266 267 //Calculate percentage increase/decrease and fix the image over given x,y coordinate268 var curWidth=image.width, curHeight=image.height;269 var position = self.getPosition();270 271 //The Maths272 /*273 New point/Old point = New image width/Old image width274 => New point = New width/Old width * Old point275 276 Difference between new and old point 277 = New point - Old point278 = New width/Old width * Old point - Old point279 = Old Point * (New width/Old width - 1)280 281 Moving the image by this difference brings the zoomed image to the same (pivot) point.282 283 The point (x,y) sent into this function is relative to the self.frameElement. However, it should be relative to the image for the above formula to work.284 Hence, point = (x-left, y-top).285 */286 position[0]-=((x-position[0])*((dimension[0]/curWidth)-1)), position[1]-=((y-position[1])*((dimension[1]/curHeight)-1)); //Applying the above formula287 288 289 //Center image290 position = self.centerImage(dimension[0],dimension[1], position[0],position[1]);291 292 //Set dimension and position293 if(!self.maxZoomCheck(dimension[0],dimension[1])) {294 zoomLevel = newZoomLevel;295 self.setDimension(dimension[0],dimension[1]);296 self.setPosition(position[0],position[1]);297 self.setMouseCursor();298 }299 else300 return false;301 return true;302 }303 self.centerImage = function(width,height, x,y) { //width and height of image and (x,y) is the (left,top) of the image304 if(typeof width=='undefined' || typeof height=='undefined') {305 var temp = self.getDimension();306 width=temp[0], height=temp[1];307 }308 if(typeof x=='undefined' || typeof y=='undefined') {309 var temp = self.getPosition();310 x=temp[0], y=temp[1];311 }312 313 var frameDimension = self.getFrameDimension();314 315 if(width<=frameDimension[0])316 x = Math.round((frameDimension[0] - width)/2);317 if(height<=frameDimension[1])318 y = Math.round((frameDimension[1] - height)/2);319 if(width>frameDimension[0]) {320 if(x>0)321 x=0;322 else323 if((x+width)<frameDimension[0])324 x=frameDimension[0]-width;325 }326 if(height>frameDimension[1]) {327 if(y>0)328 y=0;329 else330 if((y+height)<frameDimension[1])331 y=frameDimension[1]-height;332 }333 return [x,y];334 }335 self.relativeToAbsolute = function(x,y) {336 if(x<0 || y<0 || x>=self.frameElement.clientWidth || y>=self.frameElement.clientHeight)337 return null;338 return [x-retInt(image.style.left,'px'),y-retInt(image.style.top,'px')];339 }340 self.reset = function() {341 var dimension = self.fitToFrame(orignalW,orignalH);342 var position = self.centerImage(dimension[0],dimension[1], 0,0);343 self.setDimension(dimension[0],dimension[1]);344 self.setPosition(position[0],position[1]);345 zoomLevel=0;346 }347 self.moveBy = function(x,y) {348 var position = self.getPosition();349 position = self.centerImage(image.width,image.height, position[0]+x,position[1]+y);350 self.setPosition(position[0],position[1]);351 }352 self.hide = function() {353 if(self.outerFrame)354 self.outerFrame.style.display='none';355 else356 self.frameElement.style.display = 'none';357 }358 self.show = function() {359 if(self.outerFrame)360 self.outerFrame.style.display='block';361 else362 self.frameElement.style.display = 'block';363 }364 //Experimental365 self.moveTo = function(x,y) { //Coordinates relative to (left,top) of image366 if(x<0 || y<0 || x>=image.width || y>=image.height)367 return;368 var left = self.frameElement.clientWidth/2-x, top = self.frameElement.clientHeight/2-y;369 var position = self.centerImage(image.width,image.height, left,top);370 self.setPosition(position[0],position[1]);371 }372 /*User defined events*/373 //Non-static events374 self.onload = null;375 376 /*Event handlers*/377 self.onmousewheel = function(event,object,direction) {378 self.frameElement.focus();379 if (!event) //For IE380 event=window.event, event.returnValue = false;381 else382 if (event.preventDefault)383 event.preventDefault();384 385 if((zoomLevel+direction)>=0) {386 var mousePos = getMouseXY(event);387 var framePos = getObjectXY(self.frameElement);388 self.zoomTo(zoomLevel+direction, mousePos[0]-framePos[0], mousePos[1]-framePos[1]);389 }390 }391 self.onmousemove = function(event) {392 if (!event) //For IE393 event=window.event, event.returnValue = false;394 else395 if (event.preventDefault)396 event.preventDefault();397 398 var mousePosition=getMouseXY(event);399 var position = self.getPosition();400 position[0]+=(mousePosition[0]-lastMousePosition[0]), position[1]+=(mousePosition[1]-lastMousePosition[1]);401 lastMousePosition=mousePosition;402 403 position = self.centerImage(image.width,image.height, position[0],position[1]);404 self.setPosition(position[0],position[1]);405 }406 self.onmouseup_or_out = function(event) {407 if (!event) //For IE408 event=window.event, event.returnValue = false;409 else410 if (event.preventDefault)411 event.preventDefault();412 413 image.onmousemove=image.onmouseup=image.onmouseout=null;414 image.onmousedown=self.onmousedown;415 }416 self.onmousedown = function(event) {417 self.frameElement.focus();418 if (!event) //For IE419 event=window.event, event.returnValue = false;420 else421 if (event.preventDefault)422 event.preventDefault();423 424 lastMousePosition=getMouseXY(event);425 image.onmousemove = self.onmousemove;426 image.onmouseup=image.onmouseout=self.onmouseup_or_out;427 }428 self.onkeypress = function(event) {429 var keyCode;430 if(window.event) // IE431 event=window.event, keyCode = event.keyCode, event.returnValue = false;432 else433 if(event.which) // Netscape/Firefox/Opera434 keyCode = event.which, event.preventDefault();435 436 keyCode = String.fromCharCode(keyCode);437 438 var position = self.getPosition();439 var LEFT='a',UP='w',RIGHT='d',DOWN='s', CENTER_IMAGE='c', ZOOMIN='=', ZOOMOUT='-'; ///Keys a,w,d,s440 if(keyCode==LEFT)441 position[0]+=speed;442 else if(keyCode==UP)443 position[1]+=speed;444 else if(keyCode==RIGHT)445 position[0]-=speed;446 else if(keyCode==DOWN)447 position[1]-=speed;448 else if(keyCode==CENTER_IMAGE || keyCode=='C')449 self.reset();450 else if(keyCode==ZOOMIN || keyCode=='+' || keyCode=='x' || keyCode=='X')451 self.zoomTo(zoomLevel+1, self.frameElement.clientWidth/2, self.frameElement.clientHeight/2);452 else if( (keyCode==ZOOMOUT || keyCode=='z' || keyCode=='Z') && zoomLevel>0)453 self.zoomTo(zoomLevel-1, self.frameElement.clientWidth/2, self.frameElement.clientHeight/2);454 455 if(keyCode==LEFT || keyCode==UP || keyCode==RIGHT || keyCode==DOWN) {456 position = self.centerImage(image.width,image.height, position[0],position[1]);457 self.setPosition(position[0],position[1]);458 speed+=2;459 }460 }461 self.onkeyup = function(event) {462 speed=5;463 }464 /*Initializaion*/465 self.setZoomProp = function(newZoomFactor,newMaxZoom) {466 if(newZoomFactor==null)467 zoomFactor=10;468 zoomFactor=1 + retInt(newZoomFactor,'%')/100;469 470 if(typeof newMaxZoom=='string')471 maxZoom = retInt(newMaxZoom,'%')/100;472 else if(typeof newMaxZoom=='object' && newMaxZoom!=null) {473 maxZoom[0]=retInt(newMaxZoom[0],'px');474 maxZoom[1]=retInt(newMaxZoom[1],'px');475 }476 else maxZoom='300%';477 }478 self.setFrameProp = function(newFrameProp) {479 self.frameElement.style.width=newFrameProp[0];480 self.frameElement.style.height=newFrameProp[1];481 }482 self.initImage = function() {483 image.style.maxWidth=image.style.width=image.style.maxHeight=image.style.height=null;484 orignalW=image.width;485 orignalH=image.height;486 487 var dimension=self.fitToFrame(orignalW, orignalH);488 self.setDimension(dimension[0],dimension[1]);489 490 if(frame[2]==true)491 self.frameElement.style.width=(Math.round(dimension[0])+ 'px');492 if(frame[3]==true)493 self.frameElement.style.height=(Math.round(dimension[1]) + 'px');494 495 var pos = self.centerImage(dimension[0],dimension[1], 0,0);496 self.setPosition(pos[0],pos[1]);497 self.setMouseCursor();498 499 //Set mouse handlers500 mouseWheelObject = new mouseWheel();501 mouseWheelObject.init(image, self.onmousewheel);502 image.onmousedown = self.onmousedown;503 504 //Set keyboard handlers505 self.frameElement.onkeypress = self.onkeypress;506 self.frameElement.onkeyup = self.onkeyup;507 508 if(viewer.onload!=null)509 viewer.onload(self);510 if(self.onload!=null)511 self.onload();512 }513 self.preInitImage = function() { //Triggers after pre-Loader image has been loaded 514 if(preLoader!=null) 515 {516 image.style.left=((self.frameElement.clientWidth-image.width)/2) + 'px';517 image.style.top=((self.frameElement.clientHeight-image.height)/2) + 'px';518 }519 image.onload=self.initImage;520 image.src=imageSource;521 } 522 self.setNewImage = function(newImageSource,newPreLoader) {523 if(typeof newImageSource=='undefined')524 return;525 imageSource=newImageSource;526 if(typeof newPreLoader!=='undefined')527 preLoader=newPreLoader;528 if(preLoader!=null) {529 image.onload=self.preInitImage;530 image.src=preLoader;531 return;532 }533 image.onload=self.initImage;534 image.src=imageSource;535 }536 537 /*Set a base*/538 self.setZoomProp(zoomFactor,maxZoom);539 //Create self.frameElement - One time initialization540 self.frameElement=document.createElement('div');541 self.frameElement.style.width=frame[0];542 self.frameElement.style.height=frame[1];543 self.frameElement.style.border="0px solid #000";544 self.frameElement.style.margin="0px";545 self.frameElement.style.padding="0px";546 self.frameElement.style.overflow="hidden";547 self.frameElement.style.position="relative";548 self.frameElement.style.zIndex=2;549 self.frameElement.tabIndex=1;550 551 if(image!=null) {552 if (parent != null) {553 image.parentNode.removeChild(image);554 parent.appendChild(self.frameElement);555 }556 else if (replace != null) {557 image.parentNode.removeChild(image);558 replace.parentNode.replaceChild(self.frameElement, replace);559 }560 else561 image.parentNode.replaceChild(self.frameElement,image);562 563 image.style.margin=image.style.padding="0";564 image.style.borderWidth="0px";565 image.style.position='absolute';566 image.style.zIndex=3;567 self.frameElement.appendChild(image);568 569 if(imageSource!=null)570 self.preInitImage();571 else572 self.initImage();573 }574 else { 575 if(parent!=null)576 parent.appendChild(self.frameElement);577 else if(replace!=null)578 replace.parentNode.replaceChild(self.frameElement,replace);579 580 image=document.createElement('img');581 image.style.position='absolute';582 image.style.zIndex=3;583 self.frameElement.appendChild(image);584 585 self.setNewImage(imageSource);586 }587 //Experimental588 if(borderClass!=null) { //Browser rendering of borders with padding have been a problem.589 self.outerFrame = document.createElement('div');590 self.outerFrame.className=borderClass;591 self.frameElement.parentNode.replaceChild(self.outerFrame,self.frameElement);592 self.outerFrame.appendChild(self.frameElement);593 }594}595viewer.toolbar = function(self) {596 var toolbar = document.createElement('div');597 toolbar.className='toolbar';598 599 var isEnterKey = function(event) {600 var keyCode;601 if(event.keyCode) // IE602 keyCode = event.keyCode, event.returnValue = false;603 else if(event.which) // Netscape/Firefox/Opera604 keyCode = event.which, event.preventDefault();605 return keyCode==13;606 }607 608 var zoomIn = document.createElement('img');609 zoomIn.className='toolbarButton';610 zoomIn.title='Zoom in';611 zoomIn.tabIndex="1";612 zoomIn.src=viewer.toolbarImages+'/in.png';613 zoomIn.onclick = zoomIn.onkeypress = function(event) {614 event=event?event:window.event;615 if (event.type == 'keypress') 616 if(!isEnterKey(event))617 return;618 var frameDimension = self.getFrameDimension();619 self.zoomTo(self.getZoomLevel()+1, frameDimension[0]/2,frameDimension[1]/2);620 }621 622 var zoomOut = document.createElement('img');623 zoomOut.className='toolbarButton';624 zoomOut.title='Zoom out';625 zoomOut.tabIndex="1";626 zoomOut.src=viewer.toolbarImages+'/out.png';627 zoomOut.onclick = zoomOut.onkeypress = function(event) {628 event=event?event:window.event;629 if (event.type == 'keypress') 630 if(!isEnterKey(event))631 return;632 633 var frameDimension = self.getFrameDimension();634 self.zoomTo(self.getZoomLevel()-1, frameDimension[0]/2,frameDimension[1]/2);635 }636 637 var center = document.createElement('img');638 center.className='toolbarButton';639 center.title='Center image';640 center.tabIndex="1";641 center.src=viewer.toolbarImages+'/center.png';642 center.onclick = center.onkeypress = function(event) {643 event=event?event:window.event;644 if (event.type == 'keypress') 645 if(!isEnterKey(event))646 return;647 self.reset();648 }649 650 var help = document.createElement('img');651 help.className='toolbarButton';652 help.tabIndex="1";653 help.src=viewer.toolbarImages+'/help.png';654 var helpText = document.createElement('div');655 helpText.className='helpText';656 helpText.style.display='none';657 helpText.innerHTML = '<h5 style="color:#40C0FF; font-size:12px; margin:2px 0;">How to use the image viewer?</h5>';658 helpText.innerHTML = helpText.innerHTML + "Zooming<hr> Use the mouse wheel or the toolbar to zoom in/out. You can also zoom IN using '+','x' or '=' keys and zoom OUT using '-' or 'z' keys using the keyboard.";659 helpText.innerHTML = helpText.innerHTML + "<br><br>Panning<hr> Click and drag the mouse to pan the image or use 'w','s','a' and 'd' keys for moving up,down,left and right respectively.<br>Alternatively you can use the arrow buttons to pan the image.";660 helpText.innerHTML = helpText.innerHTML + "<br><br>Center Image<hr> Click on the 'Center image' icon on the toolbar or press 'c' to center image.";661 662 help.onclick = help.onkeypress = function(event) {663 event=event?event:window.event;664 if (event.type == 'keypress') 665 if(!isEnterKey(event))666 return;667 if (helpText.style.display == 'none')668 helpText.style.display = 'block';669 else670 helpText.style.display = 'none';671 }672 673 var controls = document.createElement('img');674 controls.className='movement-controls';675 controls.src=viewer.toolbarImages+'/movement-controls.png';676 controls.useMap="#controls";677 var map = document.createElement('map');678 map.name="controls";679 680 var up=document.createElement('area');681 up.shape='rect';682 up.coords="17,1,31,17";683 up.style.cursor='pointer';684 up.onmousedown = function() {685 var dimension = self.getFrameDimension();686 self.moveBy(0,dimension[1]*0.1); //10%687 }688 map.appendChild(up);689 690 var down=document.createElement('area');691 down.shape='rect';692 down.coords="17,31,31,47";693 down.style.cursor='pointer';694 down.onmousedown = function() {695 var dimension = self.getFrameDimension();696 self.moveBy(0,-1*dimension[1]*0.1);697 }698 map.appendChild(down);699 700 var left=document.createElement('area');701 left.shape='rect';702 left.coords="1,17,17,31";703 left.style.cursor='pointer';704 left.onmousedown = function() {705 var dimension = self.getFrameDimension();706 self.moveBy(dimension[0]*0.1,0);707 }708 map.appendChild(left);709 710 var right=document.createElement('area');711 right.shape='rect';712 right.coords="31,17,47,31";713 right.style.cursor='pointer';714 right.onmousedown = function() {715 var dimension = self.getFrameDimension();716 self.moveBy(-1*dimension[0]*0.1,0);717 }718 map.appendChild(right);719 720 toolbar.appendChild(zoomIn);721 toolbar.appendChild(zoomOut);722 toolbar.appendChild(center);723 toolbar.appendChild(help);724 toolbar.appendChild(helpText);725 726 self.frameElement.appendChild(toolbar);727 self.frameElement.appendChild(controls);728 self.frameElement.appendChild(map);729}730viewer.toolbarImages="/images/imageViewer"...

Full Screen

Full Screen

Simple_Viewer_beta_1.1.js

Source:Simple_Viewer_beta_1.1.js Github

copy

Full Screen

1/**2 * Simple Javascript Image Viewer3 Copyright (C) 2010 Munawwar Firoz45 This program is free software: you can redistribute it and/or modify6 it under the terms of the GNU General Public License as published by7 the Free Software Foundation, either version 3 of the License, or8 (at your option) any later version.910 This program is distributed in the hope that it will be useful,11 but WITHOUT ANY WARRANTY; without even the implied warranty of12 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the13 GNU General Public License for more details (http://www.gnu.org/licenses/)14*/15function getObjectXY(object) {16 var left,top;17 objectCopy=object;18 if (object.offsetParent) {19 left=top=0;20 do {21 left += object.offsetLeft;22 if(object.style.borderLeftWidth!='')23 left+=parseInt(object.style.borderLeftWidth);24 else25 object.style.borderLeftWidth='0px';26 top += object.offsetTop;27 if(object.style.borderTopWidth!='')28 top+=parseInt(object.style.borderTopWidth);29 else30 object.style.borderTopWidth='0px';31 }32 while (object = object.offsetParent);33 }34 return [left-parseInt(objectCopy.style.borderLeftWidth),top-parseInt(objectCopy.style.borderLeftWidth)];35}3637//String compare (Case-sensitive)38function strcmp(string1,string2) {39 return (string1.length===string2.length && string1.indexOf(string2)!=-1);40}41//String compare (Case-insensitive)42function strcmpi(string1,string2) {43 return (string1.length===string2.length && string1.toLowerCase().indexOf(string2.toLowerCase())!=-1);44}45//string1 should end with string2 to return true (Case-insensitive)46function strEndsWith(string1,string2) {47 var index=string1.length-string2.length;48 return (string1.toLowerCase().lastIndexOf(string2.toLowerCase(),index)==index);49}50//Returns the constructor (which is a function) name51function returnDataType(object) {52 if(typeof object==='undefined')53 return 'undefined';54 if(typeof object==='null')55 return 'null';56 code=new String(object.constructor);57 return code.substring( code.indexOf(' ')+1, code.indexOf('(') );58}59//Verifies wether the datatype of a variable is as you expect it to be60function verifyDataType(object,Datatype_expected_in_string) {61 return strcmpi( returnDataType(object), Datatype_expected_in_string );62}63function retInt(str, suffix) {64 if(typeof str=='number')65 return str;66 var result=str.indexOf(suffix);67 return parseInt(str.substring(0,(result!=-1)?result:str.length))68}6970/*Mouse related functions*/71//Used to retrieve the mouse cursor position on screen (but event is needed as argument)72function getMouseXY(event) {73 var posx = 0, posy = 0;74 if (!event) event = window.event; //firefox75 if (event.pageX || event.pageY) {76 posx = event.pageX;77 posy = event.pageY;78 }79 else if (event.clientX || event.clientY) { //IE80 posx = event.clientX + document.body.scrollLeft81 + document.documentElement.scrollLeft;82 posy = event.clientY + document.body.scrollTop83 + document.documentElement.scrollTop;84 }85 return [posx,posy];86}8788function mouseWheel() {89 var self=this;90 /*Event handlers*/91 /*Mouse wheel functions*/9293 //Default mouse wheel callback function94 //Variable local to 'this'95 var wheelCallback = function(event,object,delta){96 /*Override this function and write your code there*/97 /*98 delta=-1 when mouse wheel is rolled backwards (towards yourself)99 delta=1 when mouse wheel is rolled forward (away from one's self)100 Note: Here is where you can call the getMouseXY function using the 'event' argument101 */102 }103 //Mouse wheel event handler104 self.wheelHandler = function (event){105 var delta = 0;106 if (!event) //For IE107 event = window.event;108 if (event.wheelDelta) //IE109 {110 delta = event.wheelDelta/120;111 //if (window.opera) delta = -delta; //for Opera...hmm I read somewhere opera 9 need the delta sign inverted...tried in opera 10 and it doesnt require this!?112 }113 else if (event.detail) //firefox114 delta = -event.detail/3;115116 if (event.preventDefault)117 event.preventDefault();118 event.returnValue = false;119 if (delta)120 wheelCallback(event,this,delta); //callback function121 }122 //Mouse wheel initialization123 self.init = function(object,callback) {124 if (object.addEventListener) //For firefox125 object.addEventListener('DOMMouseScroll', this.wheelHandler, false); //Mouse wheel initialization126 //For IE127 object.onmousewheel = this.wheelHandler; //Mouse wheel initialization128 wheelCallback=callback;129 }130 this.setCallback = function(callback){131 wheelCallback=callback;132 }133}134135//Debugging136function debug_msgs() {137 this.counter=0;138 this.clear=function() {139 var div=document.getElementById('debug');140 div.innerHTML='';141 this.counter=0;142 }143 this.print=function(string) {144 var div=document.getElementById('debug');145 div.innerHTML+=string;146 }147 this.println=function(string) {148 var div=document.getElementById('debug');149 div.innerHTML+=string+'<br>';150 this.counter++;151 }152}153var debug=new debug_msgs();154155/*-------------The image viewer--------------*/156function viewer(arguments) //argument array157{158 var self=this;159160 /*Properties*/161 //Public access162 self.outerFrame=null;163 164 //Private access165 var image=null,imageSource=null,parent=null,replace=null,preLoader=null;166 var frame=['400px','400px',true]; //Format: ['width in px or % (number)','height in px or % (number)', auto adjust frameElement to image (boolean)]167 var borderClass=null;168 var zoomFactor='10%'; //10% increase per zoom in 169 var maxZoom='300%'; //Either 'percentage' or ['max width in pixel', 'max height in pixel']170171 /*Set user defined properties and configurations*/172 /*173 The following configurations are for pure javascript image viewers:174 imageSource : string - Source to the image you want to show175 176 parent : HTMLElement - The parent element of the image viewer177 or178 replace: HTMLElement - The image viewer replace this HTML element179 (Exactly one of the above two properties is absolutly needed)180 181 preLoader (optional) : string - Source to a pre-loader image. Useful in case of large images182 183 The following configurations are for partial javascript/partial HTML image viewers:184 image - HTMLElement - The reference to the image HTML element185 186 Common to both:187 frame - An array of format [width, height, widthIsMax, heightIsMax]188 width and height are strings like '400px' or '100%'. width and height can be in px or %189 widthIsMax and heightIsMax are optional boolean values. 190 Say if widthIsMax is set to true, it treats the width as the maximum width limit.191 So if the zoomed image isn't fitting exactly into the frameElement, the frameElement dimension is reduced and adjusted to fit the image.192 193 zoomFactor (optional) - number - Decides the amount zoomed per zoom event. Default is set to 10 (in %)194 maxZoom (optional) - Sets the makimum image zoom in percentage or pixels. Format :Either 'percentage' or ['max width in pixel', 'max height in pixel']195 Example: '150%' or ['500px,'500px']196 */197 var key;198 for (key in arguments) {199 var temp=arguments[key];200 eval(key + '=temp;');201 }202203 /*Internal states,HTML elements and properties*/204 self.frameElement = null;205 var orignalW,orignalH, zoomLevel=0;206 var lastMousePosition=null, speed=5;207 var mouseWheelObject=null;208209 /*Methods*/210 self.getFrameDimension = function() {211 return [self.frameElement.clientWidth,self.frameElement.clientHeight];212 } 213 self.setDimension = function(width,height) { //width and height of image214 image.width=Math.round(width);215 image.height=Math.round(height);216 }217 self.getDimension = function() {218 return [image.width,image.height];219 }220 self.setPosition = function(x,y) { //x and y coordinate of image221 image.style.left=(Math.round(x)+'px');222 image.style.top=(Math.round(y)+'px');223 }224 self.getPosition = function() {225 return [retInt(image.style.left,'px'),retInt(image.style.top,'px')];226 }227 self.setMouseCursor = function() {228 var dimension = self.getDimension();229 var frameDimension = self.getFrameDimension();230 231 var cursor='crosshair';232 if(dimension[0]>frameDimension[0] && dimension[1]>frameDimension[1])233 cursor='move';234 else if(dimension[0]>frameDimension[0])235 cursor='e-resize';236 else if(dimension[1]>frameDimension[1])237 cursor='n-resize';238 239 image.style.cursor=cursor;240 }241 self.maxZoomCheck = function(width,height) {242 if(typeof width=='undefined' || typeof height=='undefined') {243 var temp = self.getDimension();244 width=temp[0], height=temp[1];245 }246 if(typeof maxZoom=='number') {247 return ((width/orignalW)>maxZoom || (height/orignalH)>maxZoom);248 }249 else if(typeof maxZoom=='object') {250 return (width>maxZoom[0] || height>maxZoom[1]);251 }252 }253 self.fitToFrame = function(width, height) { //width and height of image254 if(typeof width=='undefined' || typeof height=='undefined') {255 width=orignalW, height=orignalH;256 }257 var frameDimension = self.getFrameDimension(), newWidth,newHeight;258 259 newWidth = frameDimension[0];260 newHeight = Math.round((newWidth*height)/width);261 if(newHeight>(frameDimension[1])) {262 newHeight = frameDimension[1];263 newWidth = Math.round((newHeight*width)/height); 264 }265 return [newWidth,newHeight];266 }267 self.getZoomLevel = function() {268 return zoomLevel;269 }270 self.zoomTo = function(newZoomLevel, x, y) {271 var frameDimension = self.getFrameDimension();272 //check if x and y coordinate is within the self.frameElement273 if(newZoomLevel<0 || x<0 || y<0 || x>=frameDimension[0] || y>=frameDimension[1])274 return false;275 276 var dimension = self.fitToFrame(orignalW,orignalH);277 for(var i=newZoomLevel; i>0;i--)278 dimension[0] *= zoomFactor, dimension[1] *= zoomFactor;279 280 //Calculate percentage increase/decrease and fix the image over given x,y coordinate281 var curWidth=image.width, curHeight=image.height;282 var position = self.getPosition();283 284 //The Maths285 /*286 New point/Old point = New image width/Old image width287 => New point = New width/Old width * Old point288 289 Difference between new and old point 290 = New point - Old point291 = New width/Old width * Old point - Old point292 = Old Point * (New width/Old width - 1)293 294 Moving the image by this difference brings the zoomed image to the same (pivot) point.295 296 The point (x,y) sent into this function is relative to the self.frameElement. However, it should be relative to the image for the above formula to work.297 Hence, point = (x-left, y-top).298 */299 position[0]-=((x-position[0])*((dimension[0]/curWidth)-1)), position[1]-=((y-position[1])*((dimension[1]/curHeight)-1)); //Applying the above formula300 301 302 //Center image303 position = self.centerImage(dimension[0],dimension[1], position[0],position[1]);304 305 //Set dimension and position306 if(!self.maxZoomCheck(dimension[0],dimension[1])) {307 zoomLevel = newZoomLevel;308 self.setDimension(dimension[0],dimension[1]);309 self.setPosition(position[0],position[1]);310 self.setMouseCursor();311 }312 else313 return false;314 return true;315 }316 self.centerImage = function(width,height, x,y) { //width and height of image and (x,y) is the (left,top) of the image317 if(typeof width=='undefined' || typeof height=='undefined') {318 var temp = self.getDimension();319 width=temp[0], height=temp[1];320 }321 if(typeof x=='undefined' || typeof y=='undefined') {322 var temp = self.getPosition();323 x=temp[0], y=temp[1];324 }325 326 var frameDimension = self.getFrameDimension();327 328 if(width<=frameDimension[0])329 x = Math.round((frameDimension[0] - width)/2);330 if(height<=frameDimension[1])331 y = Math.round((frameDimension[1] - height)/2);332333 if(width>frameDimension[0]) {334 if(x>0)335 x=0;336 else337 if((x+width)<frameDimension[0])338 x=frameDimension[0]-width;339 }340341 if(height>frameDimension[1]) {342 if(y>0)343 y=0;344 else345 if((y+height)<frameDimension[1])346 y=frameDimension[1]-height;347 }348349 return [x,y];350 }351 self.relativeToAbsolute = function(x,y) {352 if(x<0 || y<0 || x>=self.frameElement.clientWidth || y>=self.frameElement.clientHeight)353 return null;354 return [x-retInt(image.style.left,'px'),y-retInt(image.style.top,'px')];355 }356 self.reset = function() {357 var dimension = self.fitToFrame(orignalW,orignalH);358 var position = self.centerImage(dimension[0],dimension[1], 0,0);359 self.setDimension(dimension[0],dimension[1]);360 self.setPosition(position[0],position[1]);361 zoomLevel=0;362 }363 self.moveBy = function(x,y) {364 var position = self.getPosition();365 position = self.centerImage(image.width,image.height, position[0]+x,position[1]+y);366 self.setPosition(position[0],position[1]);367 }368 self.hide = function() {369 if(self.outerFrame)370 self.outerFrame.style.display='none';371 else372 self.frameElement.style.display = 'none';373 }374 self.show = function() {375 if(self.outerFrame)376 self.outerFrame.style.display='block';377 else378 self.frameElement.style.display = 'block';379 }380 //Experimental381 self.moveTo = function(x,y) { //Coordinates relative to (left,top) of image382 if(x<0 || y<0 || x>=image.width || y>=image.height)383 return;384 var left = self.frameElement.clientWidth/2-x, top = self.frameElement.clientHeight/2-y;385 var position = self.centerImage(image.width,image.height, left,top);386 self.setPosition(position[0],position[1]);387 }388389 /*User defined events*/390 //Non-static events391 self.onload = null;392 393 /*Event handlers*/394 self.onmousewheel = function(event,object,direction) {395 self.frameElement.focus();396 if (!event) //For IE397 event=window.event, event.returnValue = false;398 else399 if (event.preventDefault)400 event.preventDefault();401 402 if((zoomLevel+direction)>=0) {403 var mousePos = getMouseXY(event);404 var framePos = getObjectXY(self.frameElement);405 self.zoomTo(zoomLevel+direction, mousePos[0]-framePos[0], mousePos[1]-framePos[1]);406 }407 }408 self.onmousemove = function(event) {409 if (!event) //For IE410 event=window.event, event.returnValue = false;411 else412 if (event.preventDefault)413 event.preventDefault();414 415 var mousePosition=getMouseXY(event);416 var position = self.getPosition();417 position[0]+=(mousePosition[0]-lastMousePosition[0]), position[1]+=(mousePosition[1]-lastMousePosition[1]);418 lastMousePosition=mousePosition;419 420 position = self.centerImage(image.width,image.height, position[0],position[1]);421 self.setPosition(position[0],position[1]);422 }423 self.onmouseup_or_out = function(event) {424 if (!event) //For IE425 event=window.event, event.returnValue = false;426 else427 if (event.preventDefault)428 event.preventDefault();429 430 image.onmousemove=image.onmouseup=image.onmouseout=null;431 image.onmousedown=self.onmousedown;432 }433 self.onmousedown = function(event) {434 self.frameElement.focus();435 if (!event) //For IE436 event=window.event, event.returnValue = false;437 else438 if (event.preventDefault)439 event.preventDefault();440 441 lastMousePosition=getMouseXY(event);442 image.onmousemove = self.onmousemove;443 image.onmouseup=image.onmouseout=self.onmouseup_or_out;444 }445 self.onkeypress = function(event) {446 var keyCode;447 if(window.event) // IE448 event=window.event, keyCode = event.keyCode, event.returnValue = false;449 else450 if(event.which) // Netscape/Firefox/Opera451 keyCode = event.which, event.preventDefault();452 453 keyCode = String.fromCharCode(keyCode);454 455 var position = self.getPosition();456 var LEFT='a',UP='w',RIGHT='d',DOWN='s', CENTER_IMAGE='c', ZOOMIN='=', ZOOMOUT='-'; ///Keys a,w,d,s457 if(keyCode==LEFT)458 position[0]+=speed;459 else if(keyCode==UP)460 position[1]+=speed;461 else if(keyCode==RIGHT)462 position[0]-=speed;463 else if(keyCode==DOWN)464 position[1]-=speed;465 else if(keyCode==CENTER_IMAGE || keyCode=='C')466 self.reset();467 else if(keyCode==ZOOMIN || keyCode=='+' || keyCode=='x' || keyCode=='X')468 self.zoomTo(zoomLevel+1, self.frameElement.clientWidth/2, self.frameElement.clientHeight/2);469 else if( (keyCode==ZOOMOUT || keyCode=='z' || keyCode=='Z') && zoomLevel>0)470 self.zoomTo(zoomLevel-1, self.frameElement.clientWidth/2, self.frameElement.clientHeight/2);471 472 if(keyCode==LEFT || keyCode==UP || keyCode==RIGHT || keyCode==DOWN) {473 position = self.centerImage(image.width,image.height, position[0],position[1]);474 self.setPosition(position[0],position[1]);475 speed+=2;476 }477 }478 self.onkeyup = function(event) {479 speed=5;480 }481 /*Initializaion*/482 self.setZoomProp = function(newZoomFactor,newMaxZoom) {483 if(newZoomFactor==null)484 zoomFactor=10;485 zoomFactor=1 + retInt(newZoomFactor,'%')/100;486 487 if(typeof newMaxZoom=='string')488 maxZoom = retInt(newMaxZoom,'%')/100;489 else if(typeof newMaxZoom=='object' && newMaxZoom!=null) {490 maxZoom[0]=retInt(newMaxZoom[0],'px');491 maxZoom[1]=retInt(newMaxZoom[1],'px');492 }493 else maxZoom='300%';494 }495 self.setFrameProp = function(newFrameProp) {496 self.frameElement.style.width=newFrameProp[0];497 self.frameElement.style.height=newFrameProp[1];498 }499 self.initImage = function() {500 image.style.maxWidth=image.style.width=image.style.maxHeight=image.style.height=null;501 orignalW=image.width;502 orignalH=image.height;503 504 var dimension=self.fitToFrame(orignalW, orignalH);505 self.setDimension(dimension[0],dimension[1]);506 507 if(frame[2]==true)508 self.frameElement.style.width=(Math.round(dimension[0])+ 'px');509 if(frame[3]==true)510 self.frameElement.style.height=(Math.round(dimension[1]) + 'px');511 512 var pos = self.centerImage(dimension[0],dimension[1], 0,0);513 self.setPosition(pos[0],pos[1]);514 self.setMouseCursor();515 516 //Set mouse handlers517 mouseWheelObject = new mouseWheel();518 mouseWheelObject.init(image, self.onmousewheel);519 image.onmousedown = self.onmousedown;520 521 //Set keyboard handlers522 self.frameElement.onkeypress = self.onkeypress;523 self.frameElement.onkeyup = self.onkeyup;524 525 if(viewer.onload!=null)526 viewer.onload(self);527 if(self.onload!=null)528 self.onload();529 }530 self.preInitImage = function() { //Triggers after pre-Loader image has been loaded 531 if(preLoader!=null) 532 {533 image.style.left=((self.frameElement.clientWidth-image.width)/2) + 'px';534 image.style.top=((self.frameElement.clientHeight-image.height)/2) + 'px';535 }536 image.onload=self.initImage;537 image.src=imageSource;538 } 539 self.setNewImage = function(newImageSource,newPreLoader) {540 if(typeof newImageSource=='undefined')541 return;542 imageSource=newImageSource;543 if(typeof newPreLoader!=='undefined')544 preLoader=newPreLoader;545 if(preLoader!=null) {546 image.onload=self.preInitImage;547 image.src=preLoader;548 return;549 }550 image.onload=self.initImage;551 image.src=imageSource;552 }553554 555 /*Set a base*/556 self.setZoomProp(zoomFactor,maxZoom);557 //Create self.frameElement - One time initialization558 self.frameElement=document.createElement('div');559 self.frameElement.style.width=frame[0];560 self.frameElement.style.height=frame[1];561 self.frameElement.style.border="0px solid #000";562 self.frameElement.style.margin="0px";563 self.frameElement.style.padding="0px";564 self.frameElement.style.overflow="hidden";565 self.frameElement.style.position="relative";566 self.frameElement.style.zIndex=2;567 self.frameElement.tabIndex=1;568 569 if(image!=null) {570 if (parent != null) {571 image.parentNode.removeChild(image);572 parent.appendChild(self.frameElement);573 }574 else if (replace != null) {575 image.parentNode.removeChild(image);576 replace.parentNode.replaceChild(self.frameElement, replace);577 }578 else579 image.parentNode.replaceChild(self.frameElement,image);580 581 image.style.margin=image.style.padding="0";582 image.style.borderWidth="0px";583 image.style.position='absolute';584 image.style.zIndex=3;585 self.frameElement.appendChild(image);586 587 if(imageSource!=null)588 self.preInitImage();589 else590 self.initImage();591 }592 else { 593 if(parent!=null)594 parent.appendChild(self.frameElement);595 else if(replace!=null)596 replace.parentNode.replaceChild(self.frameElement,replace);597 598 image=document.createElement('img');599 image.style.position='absolute';600 image.style.zIndex=3;601 self.frameElement.appendChild(image);602 603 self.setNewImage(imageSource);604 }605 //Experimental606 if(borderClass!=null) { //Browser rendering of borders with padding have been a problem.607 self.outerFrame = document.createElement('div');608 self.outerFrame.className=borderClass;609 self.frameElement.parentNode.replaceChild(self.outerFrame,self.frameElement);610 self.outerFrame.appendChild(self.frameElement);611 }612}613//Static events ...

Full Screen

Full Screen

plugin.js

Source:plugin.js Github

copy

Full Screen

1;(function() {2 "use strict";3 CKEDITOR.plugins.add('commsyvideo', {4 icons: 'commsyvideo',5 requires: 'widget',6 lang: 'de,en',7 init: function (editor) {8 editor.widgets.add('commsyvideo', {9 button: editor.lang.commsyvideo.button,10 template: '<div class="ckeditor-commsy-video"></div>',11 allowedContent:12 'div[data-type](!ckeditor-commsy-video);' +13 'video[src,controls,width,height]{max-width,height};' +14 'iframe[src,frameborder,width,height]',15 requiredContent: 'div(ckeditor-commsy-video); video[src,controls];',16 upcast: function (element) {17 return element.name === 'div' && element.hasClass('ckeditor-commsy-video');18 },19 dialog: 'commsyvideo',20 /**21 * HTML -> Widget22 */23 init: function () {24 var src = '';25 var width = '100%';26 var height = '400';27 var type = '';28 if (this.element.getChild(0)) {29 var videoElement = this.element.getChild(0);30 src = videoElement.getAttribute('src');31 width = videoElement.getAttribute('width');32 height = videoElement.getAttribute('height');33 type = videoElement.getAttribute('data-type');34 }35 if (src) {36 this.setData('src', src);37 if (width) {38 this.setData('width', width);39 }40 if (height) {41 this.setData('height', height);42 }43 if (type) {44 this.setData('type', type);45 }46 }47 },48 /**49 * Widget -> HTML50 */51 data: function () {52 if (this.data.src) {53 switch (this.data.type) {54 case 'commsy':55 this.commsyData(this.element);56 break;57 case 'youtube':58 this.youtubeData(this.element);59 break;60 case 'podcampus':61 this.podcampusData(this.element);62 break;63 case 'l2g':64 this.l2gData(this.element);65 break;66 }67 this.element.setAttribute('data-type', this.data.type);68 var innerElement = this.element.getChild(0);69 if (this.data.width) {70 innerElement.setAttribute('width', this.data.width);71 }72 if (this.data.height) {73 innerElement.setAttribute('height', this.data.height);74 }75 }76 },77 commsyData: function (divElement) {78 if (!divElement.getChild(0)) {79 var videoElement = new CKEDITOR.dom.element('video');80 videoElement.setAttribute('controls', true);81 videoElement.addClass('vjs-default-skin');82 divElement.append(videoElement);83 }84 var videoElement = divElement.getChild(0);85 videoElement.setAttribute('src', this.data.src);86 },87 youtubeData: function (divElement) {88 if (!divElement.getChild(0)) {89 var frameElement = new CKEDITOR.dom.element('iframe');90 frameElement.setAttribute('allowfullscreen', true);91 frameElement.setAttribute('frameborder', '0');92 divElement.append(frameElement);93 }94 var frameElement = divElement.getChild(0);95 frameElement.setAttribute('src', 'https://www.youtube.com/embed/' + this.data.src);96 },97 podcampusData: function (divElement) {98 if (!divElement.getChild(0)) {99 var frameElement = new CKEDITOR.dom.element('iframe');100 frameElement.setAttribute('allowfullscreen', true);101 frameElement.setAttribute('frameborder', '0');102 divElement.append(frameElement);103 }104 var frameElement = divElement.getChild(0);105 frameElement.setAttribute('src', 'https://www.podcampus.de/nodes/' + this.data.src + '/embed');106 },107 l2gData: function (divElement) {108 if (!divElement.getChild(0)) {109 var frameElement = new CKEDITOR.dom.element('iframe');110 frameElement.setAttribute('allowfullscreen', true);111 frameElement.setAttribute('frameborder', '0');112 divElement.append(frameElement);113 }114 var frameElement = divElement.getChild(0);115 frameElement.setAttribute('src', 'https://lecture2go.uni-hamburg.de/lecture2go-portlet/player/iframe/?v=' + this.data.src);116 }117 });118 // context menu support119 if (editor.contextMenu) {120 editor.addMenuGroup('csVideoGroup');121 editor.addMenuItem('csVideoItem', {122 label: editor.lang.commsyvideo.properties,123 icon: 'commsyvideo',124 command: 'commsyvideo',125 group: 'csVideoGroup'126 });127 // register the video context menu for each selected <video> element128 editor.contextMenu.addListener(function (element) {129 if (element &&130 element.getChild(0) &&131 element.getChild(0).hasClass &&132 element.getChild(0).hasClass('ckeditor-commsy-video')) {133 return { csVideoItem: CKEDITOR.TRISTATE_OFF };134 }135 });136 }137 CKEDITOR.dialog.add('commsyvideo', this.path + 'dialogs/dialog.js');138 }139 });...

Full Screen

Full Screen

events.js

Source:events.js Github

copy

Full Screen

1function emailFormHandler() {2 var sendEmailBtn = document.getElementById('squatch-send-email');3 var emailInput = document.getElementById('squatch-user-email');4 handleClicks(sendEmailBtn, function() {5 if (!isValidEmail(emailInput.value)) {6 my_addClass(emailInput, 'invalid');7 emailInput.onkeypress = function() {8 if (isValidEmail(this.value)) {9 my_removeClass(this, 'invalid');10 my_addClass(this, 'valid');11 }12 }13 } else {14 my_removeClass(emailInput, 'invalid');15 if (window.frameElement && window.frameElement.squatchJsApi) {16 var widget = window.frameElement.squatchJsApi;17 if (window.parent.squatch && window.parent.squatch.widgets().eventBus) {18 window.parent.squatch.widgets().eventBus.dispatch('submit_email', this, widget, emailInput.value);19 } else {20 window.frameElement.squatchJsApi.reload(emailInput.value);21 }22 }23 }24 });25}26function messengerHandler() {27 var messengerBtn = document.getElementsByClassName('messengerShare')[0];28 if (!messengerBtn) return;29 var messengerUrl = 'https://www.facebook.com/dialog/send?app_id=' + squatch.user.facebook.appId + '&link=' + squatch.user.facebook.link + '&redirect_uri=' + squatch.user.facebook.redirectUrl;30 messengerBtn.href = messengerUrl;31 handleClicks(messengerBtn, function(e) {32 // If it's not mobile, don't use href link33 if (e.type != 'touchstart') {34 e.preventDefault();35 var url = messengerUrl + "&display=popup";36 window.open(url, 'fb-messenger', 'status=0,width=620,height=400');37 }38 if (window.frameElement && window.frameElement.squatchJsApi) {39 window.frameElement.squatchJsApi._shareEvent(window.squatch, 'FBMESSENGER');40 }41 });42}43function smsHandler() {44 var smsBtn = document.getElementsByClassName('smsShare')[0];45 if (!smsBtn) return;46 // Test url47 var smsUrl = 'sms:?&body=' + squatch.user.sms.body;48 smsBtn.href = smsUrl;49 var md = new MobileDetect('Version/4.0 Mobile Safari/534.30');50 var UA = md.userAgent();51 if (UA === 'Safari') {52 smsBtn.target = '_parent';53 }54 handleClicks(smsBtn, function(e) {55 if (window.frameElement && window.frameElement.squatchJsApi) {56 window.frameElement.squatchJsApi._shareEvent(window.squatch, 'SMS');57 }58 });59}60function whatsappHandler() {61 var whatsappBtn = document.getElementsByClassName('whatsappShare')[0];62 if (!whatsappBtn) return;63 var whatsappUrl = 'whatsapp://send?text=' + squatch.user.whatsapp.body;64 whatsappBtn.href = whatsappUrl;65 handleClicks(whatsappBtn, function(e) {66 if (window.frameElement && window.frameElement.squatchJsApi) {67 window.frameElement.squatchJsApi._shareEvent(window.squatch, 'WHATSAPP');68 }69 });70}71function facebookHandler() {72 var facebookBtn = document.getElementsByClassName('fbShare')[0];73 if (!facebookBtn) return;74 var pictureString = (squatch.user.facebook.shareImage == "" || squatch.user.facebook.shareImage === null) ? "" : "&picture="+squatch.user.facebook.shareImage;75 var fbUrl = "https://www.facebook.com/dialog/feed?app_id=" + squatch.user.facebook.appId + "&link=" + squatch.user.facebook.link + "&name=" + squatch.user.facebook.title + "&description=" + squatch.user.facebook.summary + pictureString+ "&redirect_uri=" + squatch.user.facebook.redirectUrl;76 facebookBtn.href = fbUrl;77 handleClicks(facebookBtn, function(e) {78 // If it's not mobile, don't use href link79 if (e.type != 'touchstart') {80 e.preventDefault();81 var url = fbUrl + "&display=popup";82 window.open(url, 'fb', 'status=0,width=620,height=400');83 }84 if (window.frameElement && window.frameElement.squatchJsApi) {85 window.frameElement.squatchJsApi._shareEvent(window.squatch, 'FACEBOOK');86 }87 });88}89function twitterHandler() {90 var twitterBtn = document.getElementsByClassName('twShare')[0];91 var twUrl = "https://twitter.com/intent/tweet?source=webclient&text=" + squatch.user.twitter.message;92 if (!twitterBtn) return;93 twitterBtn.href = twUrl;94 handleClicks(twitterBtn, function(e) {95 if (e.type != 'touchstart') {96 e.preventDefault();97 window.open(twUrl, 'twitter', 'status=1,width=575,height=400');98 }99 if (window.frameElement && window.frameElement.squatchJsApi) {100 window.frameElement.squatchJsApi._shareEvent(window.squatch, 'TWITTER');101 }102 });103}104function emailHandler() {105 var emailBtn = document.getElementsByClassName('emailShare')[0];106 var emailUrl = squatch.user.email.share.mailToLink;107 if(!emailBtn) return;108 // emailBtn.href = emailUrl;109 var md = new MobileDetect('Version/4.0 Mobile Safari/534.30');110 var UA = md.userAgent();111 emailBtn.href = emailUrl;112 if (UA === 'Safari') {113 emailBtn.target = '_parent';114 handleClicks(emailBtn, function(e) {115 if (window.frameElement && window.frameElement.squatchJsApi) {116 window.frameElement.squatchJsApi._shareEvent(window.squatch, 'EMAIL');117 }118 });119 } else {120 handleClicks(emailBtn, function(e) {121 if (e.type != 'touchstart') {122 e.preventDefault();123 var mailurl = emailUrl;124 mailTo(mailurl);125 }126 if (window.frameElement && window.frameElement.squatchJsApi) {127 window.frameElement.squatchJsApi._shareEvent(window.squatch, 'EMAIL');128 }129 });130 }...

Full Screen

Full Screen

dmc_dialog.js

Source:dmc_dialog.js Github

copy

Full Screen

1//2var js=document.scripts;3 var jsPath="";4 for(var i=js.length;i>0;i--){5 if(js[i-1].src.indexOf("dmc_dialog.js")>-1){6 jsPath=js[i-1].src.substring(0,js[i-1].src.lastIndexOf("/")+1);7 }8 };9if (frameElement&&frameElement.api){10 }else {11 //document.write("<link rel='stylesheet' type='text/css' href='"+jsPath+"/skins/iblue.css' />");12 $.getScript(jsPath+"lhgdialog.js?skin=iblue",function(){13 $.getScript(jsPath+"lhgdialog.common.js");14 }); 15 };16 17var DmcDialog = function(props) {18 var self = this;19 var $cfg = {20 id : null,21 url : null,22// width : 350,23 lock : true,24 resize: false,//改变窗口大小25 fixed:true,//开启静止定位，无最大化功能26 title : null,27 parent : null,28 _dialog : null29 };30 init();31 function init() { 32 //继承 33 $.extend($cfg, props);34 //initDialogProps();35 }36 function getId() {37 var id = "dmc_win_"+(new Date()).getTime() + (Math.random());38 id = id.replace(".","");39 return id;40 }41 var dArgs = null;42 function initDialogProps() {43 $cfg.id = $cfg.id ? $cfg.id : getId();44 $cfg.url = $cfg.url ? $cfg.url : "about:blank";45 //增加随机数46 $cfg.url = $cfg.url.indexOf("?") == -1 ? $cfg.url + "?_rnd=" + (new Date()).getTime() : $cfg.url + "&_rnd="+(new Date()).getTime(); 47 dArgs = { 48 id: $cfg.id,49 content : "url:"+$cfg.url,50 title : $cfg.title,51 resize : $cfg.resize,52 lock : $cfg.lock,53 autoSize : false,54 data : $cfg.argc,55 cover : true56 }; 57 if($cfg.height){58 dArgs["height"]=$cfg.height; 59 }60 if($cfg.width){61 dArgs["width"]=$cfg.width; 62 }63 if($cfg.close){64 dArgs["close"]=$cfg.close;65 }66 if (frameElement&&frameElement.api){67 dArgs["parent"] = frameElement.api;68 }69 }70 self.show = function(pars) {71 $.extend($cfg, pars);72 //设置参数 73 initDialogProps();74 if(frameElement&&frameElement.api) {//判断是否 iframe75 $cfg._dialog = frameElement.api.opener.$.dialog(dArgs);76 } else {77 $cfg._dialog = $.dialog(dArgs);78 }; 79 $cfg._dialog.OkBtnClick = function(data){80 if($cfg.listeners && $cfg.listeners.onOkBtnClick) {81 $cfg.listeners.onOkBtnClick(data);82 }83 };84 };85 self.close = function(){86 $cfg._dialog.close(); 87 };88};89function getDialog(){90 if (frameElement)91 return frameElement.api;92};93function getWindow(){ 94 if(frameElement&&typeof(frameElement.api) == "object") {95 return frameElement.api.opener;96 }else{97 return window;98 }99};100function getParentWindow(){101 if(frameElement&&typeof(frameElement.api) == "object") {102 return frameElement.api.parent;103 }else{104 return window;105 }106};107function getDialogArgc(){108 if(frameElement&&typeof(frameElement.api) == "object") {109 return frameElement.api.data;110 }111}112var $dl = getDialog();113var $win = getWindow();114var $pWin = getParentWindow();...

Full Screen

Full Screen

carousel.js

Source:carousel.js Github

copy

Full Screen

1//moving the frame by clicking the arrows2const backButton = document.querySelector('#back-button');3const forwardButton = document.querySelector('#forward-button');4//moving the image based on an intreval5let autoScrollId = setInterval(moveForward, 5000);6forwardButton.addEventListener('click', moveForward);7backButton.addEventListener('click', (e) => {8 const frameElement = document.querySelector('#frame');9 let currentTranslation = parseInt(frameElement.dataset.translate);10 if(frameElement.dataset.translate === '0'){11 frameElement.style.transform = 'translate(-330%)';12 currentTranslation = -330;13 frameElement.dataset.translate = -330;14 } else {15 frameElement.style.transform =16 `translate(${currentTranslation + 110}%)`;17 currentTranslation += 110;18 frameElement.dataset.translate = currentTranslation;19 }20 //changing the color of the bottom circle21 const navCircle = document.querySelector22 (`#nav-circles > div[data-translate="${currentTranslation}"]`);23 clearNavCircles();24 navCircle.style.backgroundColor = 'black';25 clearInterval(autoScrollId);26 autoScrollId = setInterval(moveForward, 5000);27});28//moving the frame by clicking the circles29const navCircles = document.querySelectorAll('#nav-circles > .nav');30navCircles.forEach(element => element.addEventListener('click',31 (e) => {32 const frameElement = document.querySelector('#frame');33 circleTranslation = parseInt(e.target.dataset.translate);34 frameElement.style.transform = `translate(${circleTranslation}%)`;35 frameElement.dataset.translate = circleTranslation;36 clearNavCircles();37 e.target.style.backgroundColor = 'black';38 clearInterval(autoScrollId);39 autoScrollId = setInterval(moveForward, 5000);40}));41function moveForward(){42 const frameElement = document.querySelector('#frame');43 let currentTranslation = parseInt(frameElement.dataset.translate);44 if(frameElement.dataset.translate === '-330'){45 frameElement.style.transform = 'translate(0%)';46 currentTranslation = 0;47 frameElement.dataset.translate = 0;48 } else {49 frameElement.style.transform =50 `translate(${currentTranslation - 110}%)`;51 currentTranslation -= 110;52 frameElement.dataset.translate = currentTranslation;53 }54 //changing the color of the bottom circle55 const navCircle = document.querySelector56 (`#nav-circles > div[data-translate="${currentTranslation}"]`);57 clearNavCircles();58 navCircle.style.backgroundColor = 'black';59 clearInterval(autoScrollId);60 autoScrollId = setInterval(moveForward, 5000);61}62function clearNavCircles(){63 const allNavCircles = document.64 querySelectorAll('#nav-circles > .nav');65 allNavCircles.66 forEach(element => element.style.backgroundColor = 'white');...

Full Screen

Full Screen

element_screen_position.js

Source:element_screen_position.js Github

copy

Full Screen

1var KasperskyLab = (function(namespace)2{34namespace.getElementScreenPosition = function(element)5{6 var document = element.ownerDocument;7 var window = document.parentWindow || document.defaultView;8 return getElementBox(element);910 function getElementBox(element)11 {12 var box = getBoundingClientRect(element);13 var frame = window;14 while (frame.parent != frame)15 {16 moveBox(box, getFrameOffset(frame));17 moveBox(box, getDocumentOffset(frame.document));18 frame = frame.parent;19 }2021 moveBox(box, getDocumentOffset(window.top.document));22 return box;23 }2425 function getFrameOffset(frame)26 {27 var frameElement = frame.frameElement;28 var frameElementBox = getBoundingClientRect(frameElement);29 var paddingLeft = 0;30 var paddingTop = 0;31 if (frame.getComputedStyle)32 {33 paddingLeft = parseInt(frame.getComputedStyle(frameElement, "").getPropertyValue('padding-left'), 10) || 0;34 paddingTop = parseInt(frame.getComputedStyle(frameElement, "").getPropertyValue('padding-top'), 10) || 0;35 }36 else if (frameElement.currentStyle)37 {38 if (isIeModernMode(frame.parent.document) || (isIeModernMode(frame.document) && !isFrameset(frame)))39 {40 paddingLeft = parseInt(frameElement.currentStyle.paddingLeft, 10) || 0;41 paddingTop = parseInt(frameElement.currentStyle.paddingTop, 10) || 0;42 }43 }44 return {45 left: frameElementBox.left + frameElement.clientLeft + paddingLeft,46 top: frameElementBox.top + frameElement.clientTop + paddingTop47 };48 }4950 function getBoundingClientRect(element)51 {52 var box = element.getBoundingClientRect();53 return {54 left: box.left,55 top: box.top,56 right: box.right,57 bottom: box.bottom58 };59 }6061 function getDocumentOffset(document)62 {63 var offset = { left: 0, top: 0 };64 if (isIe() && isIeModernMode(document))65 {66 var documentBox = getBoundingClientRect(document.documentElement);67 offset.left += documentBox.left < 0 ? -documentBox.left : 0;68 offset.top += documentBox.top < 0 ? -documentBox.top : 0;69 }70 return offset;71 }7273 function isIeModernMode(document)74 {75 return document.documentMode && document.documentMode > 7;76 }7778 function isIe()79 {80 return /Trident/.test(window.navigator.userAgent);81 }8283 function isFrameset(window)84 {85 return window.frames.length > 0 && String(window.frames[0].frameElement.tagName).toUpperCase() === 'FRAME';86 }8788 function moveBox(box, offset)89 {90 box.left += offset.left;91 box.top += offset.top;92 box.right += offset.left;93 box.bottom += offset.top;94 }95}9697return namespace; ...

Full Screen

Full Screen

ajaxupload.js

Source:ajaxupload.js Github

copy

Full Screen

1AsyncUpload = {2 3 createFrame : function(formElement, completeCallback) {4 var frameName = 'f' + Math.floor(Math.random() * 99999);5 var divElement = document.createElement('DIV');6 divElement.innerHTML = '<iframe style="display:none" src="about:blank" id="'+frameName+'" name="'+frameName+'" onload="AsyncUpload.documentLoaded(\''+frameName+'\')"></iframe>';7 document.body.appendChild(divElement);8 9 var frameElement = document.getElementById(frameName);10 if (completeCallback && typeof(completeCallback) == 'function') {11 frameElement.completeCallback = completeCallback;12 }13 formElement.setAttribute('target', frameName);14 },15 16 documentLoaded : function(elementID) {17 var frameElement = document.getElementById(elementID);18 if (frameElement.contentDocument) {19 var documentElement = frameElement.contentDocument;20 } else if (frameElement.contentWindow) {21 var documentElement = frameElement.contentWindow.document;22 } else {23 var documentElement = window.frames[elementID].document;24 }25 if (documentElement.location.href == "about:blank") {26 return;27 }28 var result = documentElement.body.innerHTML;29 if (!document.all) {30 frameElement.setAttribute("src", "about:blank");31 document.body.removeChild(frameElement.parentNode);32 } else {33 document.body.removeChild(frameElement.parentElement);34 }35 if (typeof(frameElement.completeCallback) == 'function') {36 frameElement.completeCallback(result);37 }38 },39 40 submitForm : function(formElement, startCallback, completeCallback) {41 AsyncUpload.createFrame(formElement, completeCallback);42 if (startCallback && typeof(startCallback) == 'function') {43 return startCallback();44 } else {45 return true;46 }47 }48 ...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { frameElement } = require('playwright/lib/client/selectorEngine');2const elementHandle = await frameElement(page, '#id');3const elementHandle = await frameElement(page, '.class');4const elementHandle = await frameElement(page, 'css=div');5const elementHandle = await frameElement(page, 'text=Click me');6const elementHandle = await frameElement(page, 'data-testid=1234');7const elementHandle = await frameElement(page, 'data-test=1234');8const elementHandle = await page.$('frameElement(#id)');9const elementHandle = await page.$('frameElement(.class)');10const elementHandle = await page.$('frameElement(css=div)');11const elementHandle = await page.$('frameElement(text=Click me)');12const elementHandle = await page.$('frameElement(data-testid=1234)');13const elementHandle = await page.$('frameElement(data-test=1234)');14const elementHandle = await page.$('#id');15const elementHandle = await page.$('.class');16const elementHandle = await page.$('css=div');17const elementHandle = await page.$('text=Click me');18const elementHandle = await page.$('data-testid=1234');19const elementHandle = await page.$('data-test=1234');20const elementHandle = await frame.$('#id');21const elementHandle = await frame.$('.class');22const elementHandle = await frame.$('css=div');23const elementHandle = await frame.$('text=Click me');24const elementHandle = await frame.$('data-testid=1234');25const elementHandle = await frame.$('data-test=1234');26const frame = await page.frames().find((f) => f.name() === 'frameName');27const elementHandle = await frame.$('#id');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const frame = await page.frameElement();2const frame = await page.frameElement('iframe');3const frame = await page.frameElement();4const frame = await page.frameElement('iframe');5const frame = await page.frameElement();6const frame = await page.frameElement('iframe');7const frame = await page.frameElement();8const frame = await page.frameElement('iframe');9const frame = await page.frameElement();10const frame = await page.frameElement('iframe');11const frame = await page.frameElement();12const frame = await page.frameElement('iframe');13const frame = await page.frameElement();14const frame = await page.frameElement('iframe');15const frame = await page.frameElement();16const frame = await page.frameElement('iframe');17const frame = await page.frameElement();18const frame = await page.frameElement('iframe');19const frame = await page.frameElement();20const frame = await page.frameElement('iframe');21const frame = await page.frameElement();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const frame = await page.frameElement();2console.log(frame);3const frame = await page.frame();4console.log(frame);5const frame = await page.parentFrame();6console.log(frame);7const frame = await page.childFrames();8console.log(frame);9const frame = await page.opener();10console.log(frame);11console.log(frame);12console.log(frame);13const frame = await page.click('selector');14console.log(frame);15const frame = await page.dblclick('selector');16console.log(frame);17const frame = await page.check('selector');18console.log(frame);19const frame = await page.uncheck('selector');20console.log(frame);21const frame = await page.tap('selector');22console.log(frame);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { frameElement } = require('playwright/lib/internal/frames');2const { ElementHandle } = require('playwright/lib/internal/elementHandle');3const frame = await page.frames().find(f => f.name() === 'myframe');4const elementHandle = await frameElement(frame)5const element = await elementHandle.jsonValue()6console.log(element)7const elementHandle = await frame.$('input')8const element = await elementHandle.jsonValue()9console.log(element)10const elementHandle = await frame.$('input')11const element = await elementHandle.jsonValue()12console.log(element)13const elementHandle = await frame.$('input')14const element = await elementHandle.jsonValue()15console.log(element)16const elementHandle = await frame.$('input')17const element = await elementHandle.jsonValue()18console.log(element)19const elementHandle = await frame.$('input')20const element = await elementHandle.jsonValue()21console.log(element)22const elementHandle = await frame.$('input')23const element = await elementHandle.jsonValue()24console.log(element)25const elementHandle = await frame.$('input')26const element = await elementHandle.jsonValue()27console.log(element)28const elementHandle = await frame.$('input')29const element = await elementHandle.jsonValue()30console.log(element)31const elementHandle = await frame.$('input')32const element = await elementHandle.jsonValue()33console.log(element)34const elementHandle = await frame.$('input')35const element = await elementHandle.jsonValue()36console.log(element)37const elementHandle = await frame.$('input')38const element = await elementHandle.jsonValue()39console.log(element)

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal 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