How to use isElementSelected method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

designer.js

Source:designer.js Github

copy

Full Screen

1/**2 * Created by mehmetyurtar on 17/09/2017.3 */4import React from 'react';5import Html2Canvas from 'html2canvas';6import jsPDF from 'jspdf';7import './App.css';8import '../src/fonts/css/font-awesome.min.css';9import Config from './config';10import DesignerHeader from './components/designerHeader';11import DesignerMainElements from './components/designerMainElements';12import DesignerCanvasElements from'./components/designerCanvasElements';13import DesignerToolbar from './components/designerToolbar';14class Designer extends React.Component {15 constructor(props) {16 super(props);17 this.state = {18 "parentElements": [],19 "mainElements": [],20 "tableFields": [],21 "canvasElements": [],22 "selectedEl": {},23 "paperWidth": "",24 "paperHeight": "",25 "paperOrientation": "",26 "paperBackground": "",27 "useDescriptionWithProduct": false,28 "isElementSelected": false,29 "customPaperSize": "",30 "isPrinting": false,31 "mainElversion": ""32 };33 this.setConfig = this.setConfig.bind(this);34 this.mainElDragStop = this.mainElDragStop.bind(this);35 this.canvasElementClicked = this.canvasElementClicked.bind(this);36 this.canvasElDragStop = this.canvasElDragStop.bind(this);37 this.canvasElResizeStop = this.canvasElResizeStop.bind(this);38 this.onSelectedElPropertyChange = this.onSelectedElPropertyChange.bind(this);39 this.onSelectedElFontWeightChange = this.onSelectedElFontWeightChange.bind(this);40 this.onSelectedElFontStyleChange = this.onSelectedElFontStyleChange.bind(this);41 this.onSelectedElTextAlignChange = this.onSelectedElTextAlignChange.bind(this);42 this.toggleMainElContainer = this.toggleMainElContainer.bind(this);43 this.onSelectedElRemove = this.onSelectedElRemove.bind(this);44 this.onCustomPaperSizeChecked = this.onCustomPaperSizeChecked.bind(this);45 this.onCustomPaperSizeChange = this.onCustomPaperSizeChange.bind(this);46 this.predefinedPaperSize = this.predefinedPaperSize.bind(this);47 this.onPaperOrientationChange = this.onPaperOrientationChange.bind(this);48 this.onPaperBackgroundChange = this.onPaperBackgroundChange.bind(this);49 this.printTestOutput = this.printTestOutput.bind(this);50 this.onDragStart = this.onDragStart.bind(this);51 this.toggleTableField = this.toggleTableField.bind(this);52 this.save = this.save.bind(this);53 this.onTableWidthChange = this.onTableWidthChange.bind(this);54 this.onResizing= this.onResizing.bind(this);55 this.onDescriptionStatusChange = this.onDescriptionStatusChange.bind(this);56 this.changeFieldOrder = this.changeFieldOrder.bind(this);57 }58 componentDidMount(){59 this.setConfig()60 }61 setConfig(){62 this.setState({63 "parentElements": this.props.config.parentElements,64 "mainElements": this.props.config.mainElements,65 "tableFields": this.props.config.tableFields,66 "canvasElements": this.props.config.canvasElements,67 "selectedEl": this.props.config.selectedEl,68 "paperWidth": this.props.config.paperWidth,69 "paperHeight": this.props.config.paperHeight,70 "paperOrientation": this.props.config.paperOrientation,71 "paperBackground": this.props.config.paperBackground,72 "useDescriptionWithProduct": this.props.config.useDescriptionWithProduct,73 "isElementSelected": this.props.config.isElementSelected,74 "customPaperSize": this.props.config.customPaperSize,75 "isPrinting": this.props.config.isPrinting,76 "mainElversion": this.props.config.mainElversion77 });78 }79 onSelectedElPropertyChange(e){80 let newProperty = e.target.value;81 let changedProp = e.target.name;82 let selectedEl = this.state.selectedEl;83 let newCanvasElements = this.state.canvasElements;84 selectedEl[changedProp] = newProperty;85 newCanvasElements.forEach((canvasEl) => {86 if(canvasEl.variableName === selectedEl.variableName){87 if(changedProp.indexOf("font") !== -1){88 canvasEl[changedProp] = newProperty;89 }else{90 if(changedProp === "placeHolder"){91 canvasEl[changedProp] = newProperty;92 }else{93 if(newProperty === ""){94 newProperty = 0;95 }96 newProperty = parseInt(newProperty);97 canvasEl[changedProp] = newProperty;98 }99 }100 }101 });102 this.setState({103 selectedEl: selectedEl,104 canvasElements: newCanvasElements105 });106 }107 onDescriptionStatusChange(){108 this.setState({109 useDescriptionWithProduct: !this.state.useDescriptionWithProduct110 })111 }112 changeFieldOrder(variableName,changeTo){113 let newTableFields = [].concat(this.state.tableFields);114 let currentEl;115 let currentInd;116 let currentOrder;117 newTableFields.forEach((tableField, tableFieldInd) => {118 if(tableField.variableName === variableName){119 currentEl = tableField;120 currentInd = tableFieldInd;121 currentOrder = tableField.order;122 }123 });124 if(changeTo === "before"){125 newTableFields[currentInd].order = newTableFields[currentInd -1].order;126 newTableFields[currentInd -1].order = currentOrder;127 }else{128 newTableFields[currentInd].order = newTableFields[currentInd + 1].order;129 newTableFields[currentInd + 1].order = currentOrder;130 }131 newTableFields.sort(function(a, b) {132 return parseInt(a.order) - parseInt(b.order);133 });134 this.setState({135 tableFields: newTableFields,136 mainElversion: Math.random()137 });138 }139 onSelectedElFontWeightChange(){140 let selectedEl = this.state.selectedEl;141 let newProperty = selectedEl.fontWeight === "bold" ? "normal" : "bold";142 let changedProp = "fontWeight";143 let newCanvasElements = this.state.canvasElements;144 selectedEl[changedProp] = newProperty;145 newCanvasElements.forEach((canvasEl) => {146 if(canvasEl.variableName === selectedEl.variableName){147 canvasEl[changedProp] = newProperty;148 }149 });150 this.setState({151 selectedEl: selectedEl,152 canvasElements: newCanvasElements153 });154 }155 onSelectedElFontStyleChange(e){156 let selectedEl = this.state.selectedEl;157 let newProperty = selectedEl.fontStyle === "italic" ? "normal" : "italic";158 let changedProp = "fontStyle";159 let newCanvasElements = this.state.canvasElements;160 selectedEl[changedProp] = newProperty;161 newCanvasElements.forEach((canvasEl) => {162 if(canvasEl.variableName === selectedEl.variableName){163 canvasEl[changedProp] = newProperty;164 }165 });166 this.setState({167 selectedEl: selectedEl,168 canvasElements: newCanvasElements169 });170 }171 onSelectedElTextAlignChange(selectedValue){172 let selectedEl = this.state.selectedEl;173 let newProperty = selectedValue;174 let changedProp = "textAlign";175 let newCanvasElements = this.state.canvasElements;176 selectedEl[changedProp] = newProperty;177 newCanvasElements.forEach((canvasEl) => {178 if(canvasEl.variableName === selectedEl.variableName){179 canvasEl[changedProp] = newProperty;180 }181 });182 this.setState({183 selectedEl: selectedEl,184 canvasElements: newCanvasElements185 });186 }187 onSelectedElRemove(e){188 let newCanvasElements = [];189 let newMainElements = [].concat(this.state.mainElements);190 this.state.canvasElements.forEach((canvasEl) => {191 if(canvasEl.variableName !== this.state.selectedEl.variableName){192 newCanvasElements.push(canvasEl);193 }194 });195 newMainElements.forEach((mainEl) => {196 if(mainEl.variableName === this.state.selectedEl.variableName){197 mainEl.hidden = false;198 }199 });200 this.setState({201 canvasElements: newCanvasElements,202 mainElements: newMainElements,203 selectedEl: false,204 isElementSelected: false205 })206 }207 toggleMainElContainer(parentIndex, e){208 let parentElements = [].concat(this.state.parentElements);209 parentElements.forEach((parentInLoop, indInLoop) => {210 if(indInLoop === parentIndex){211 parentInLoop.isOpen = !parentInLoop.isOpen;212 }else{213 parentInLoop.isOpen = false;214 }215 });216 this.setState({217 parentElements: parentElements,218 mainElversion: Math.random()219 });220 };221 predefinedPaperSize(width, height){222 this.setState({223 paperWidth: width,224 paperHeight: height,225 customPaperSize: false,226 paperOrientation: 'v'227 });228 }229 onCustomPaperSizeChecked(){230 this.setState({231 customPaperSize: true232 })233 }234 onCustomPaperSizeChange(e){235 let newVal = {};236 newVal[e.target.name] = e.target.value;237 this.setState(newVal);238 }239 onPaperOrientationChange(orientation){240 let oldOrientation = this.state.paperOrientation;241 this.setState({242 paperOrientation: orientation,243 paperWidth: oldOrientation === orientation ? this.state.paperWidth : this.state.paperHeight,244 paperHeight: oldOrientation === orientation ? this.state.paperHeight : this.state.paperWidth,245 });246 }247 printTestOutput(){248 this.setState({249 isPrinting: true,250 isElementSelected: false251 }, () => {252 const input = document.getElementById('paper');253 Html2Canvas(input)254 .then((canvas) => {255 const imgData = canvas.toDataURL('image/png');256 const pdf = new jsPDF("p", "mm", "a4");257 let width = pdf.internal.pageSize.width;258 let height = pdf.internal.pageSize.height;259 pdf.addImage(imgData, 'JPEG', 0, 0,width,height);260 window.open(pdf.output('bloburl'));261 this.setState({262 isPrinting: false,263 isElementSelected: true264 })265 });266 });267 }268 save(){269 let newState = Object.assign({}, this.state);270 let myjson = JSON.stringify(newState, null, 2);271 let x = window.open();272 x.document.open();273 x.document.write('<html><body><pre>' + myjson + '</pre></body></html>');274 x.document.close();275 }276 onPaperBackgroundChange(e){277 this.setState({278 paperBackground: e.target.value279 })280 }281 canvasElementClicked(canvasItem){282 let parentElements = [].concat(this.state.parentElements);283 parentElements.forEach((parent) => {284 parent.isOpen = parent.name === canvasItem.parentName;285 });286 this.setState({287 selectedEl: canvasItem,288 isElementSelected: true,289 parentElements: parentElements290 })291 }292 canvasElDragStop(eventEl,e,data){293 if(e.target.classList.contains("designer--canvasEl__remove")){294 this.onSelectedElRemove();295 return;296 }297 let currentEl;298 let newCanvasElements = [];299 this.state.canvasElements.forEach((canvasEl) => {300 if(canvasEl.variableName === eventEl.variableName){301 currentEl = Object.assign({}, canvasEl);302 currentEl.positionX = data.lastX;303 currentEl.positionY = data.lastY;304 newCanvasElements.push(currentEl);305 }else{306 newCanvasElements.push(canvasEl);307 }308 });309 let selectedEl = currentEl || this.state.selectedEl;310 let parentElements = [].concat(this.state.parentElements);311 parentElements.forEach((parent) => {312 parent.isOpen = parent.name === selectedEl.parentName;313 });314 this.setState({315 canvasElements: newCanvasElements,316 selectedEl: selectedEl,317 isElementSelected: true,318 parentElements: parentElements,319 mainElversion: Math.random()320 });321 }322 canvasElResizeStop(eventEl, e, direct, reftoel, delta){323 let deltaX = delta.width;324 let deltaY = delta.height;325 let currentEl;326 let newCanvasElements = [];327 this.state.canvasElements.forEach((canvasEl) => {328 if(canvasEl.variableName === eventEl.variableName){329 currentEl = Object.assign({}, canvasEl);330 currentEl.width = canvasEl.width + deltaX;331 currentEl.height = canvasEl.height + deltaY;332 newCanvasElements.push(currentEl);333 }else{334 newCanvasElements.push(canvasEl);335 }336 });337 this.setState({338 canvasElements: newCanvasElements,339 selectedEl: currentEl || this.state.selectedEl340 });341 }342 mainElDragStop(eventEl, e, data){343 if(e.clientX > 800){344 this.setState({345 mainElversion: Math.random()346 });347 return;348 }349 let draggedX = e.clientX;350 let draggedY = e.clientY;351 let currentEl;352 let currentCanvasElements = this.state.canvasElements;353 this.state.mainElements.forEach((mainEl) => {354 if(mainEl.variableName === eventEl.variableName){355 currentEl = Object.assign({}, Config.componentDefaults);356 currentEl.variableName = mainEl.variableName === "freetext" ? Math.random() : mainEl.variableName;357 currentEl.label = mainEl.label;358 currentEl.placeHolder = mainEl.placeHolder;359 currentEl.positionX = draggedX - this.refs.paper.offsetLeft - 50;360 currentEl.positionY = draggedY - this.refs.paper.offsetTop - 50;361 currentEl.orderInParent = mainEl.orderInParent;362 currentEl.parentName = mainEl.parentName;363 currentEl.isFixedTable = mainEl.isFixedTable;364 currentEl.isFreeText = mainEl.isFreeText;365 if(currentEl.isFixedTable){366 currentEl.fields = mainEl.fields;367 }368 currentCanvasElements.push(currentEl);369 }370 });371 let finalEl = currentEl || this.state.selectedEl;372 this.setState({373 canvasElements: currentCanvasElements,374 selectedEl: finalEl,375 isElementSelected: true,376 mainElversion: Math.random()377 });378 //console.log('dragstop',data);379 }380 onDragStart(eventEl,e,data){381 let currentEl;382 let newCanvasElements = [];383 this.state.canvasElements.forEach((canvasEl) => {384 if(canvasEl.variableName === eventEl.variableName){385 currentEl = Object.assign({}, canvasEl);386 newCanvasElements.push(currentEl);387 }else{388 currentEl.disableDragging = false;389 newCanvasElements.push(canvasEl);390 }391 });392 this.setState({393 canvasElements: newCanvasElements,394 selectedEl: currentEl || this.state.selectedEl,395 isElementSelected: true396 });397 }398 toggleTableField(tableField){399 let newTableFields = [];400 this.state.tableFields.forEach((oldTableField) => {401 let newTableField = Object.assign({}, oldTableField);402 if(oldTableField.variableName === tableField.variableName){403 newTableField.checked = !newTableField.checked;404 }405 newTableFields.push(newTableField);406 });407 this.setState({408 tableFields: newTableFields,409 mainElversion: Math.random()410 })411 }412 onTableWidthChange(visibleFields,newWidths){413 console.log(newWidths);414 let newWidthObj = {};415 let currentTableFields = [].concat(this.state.tableFields);416 let nanCount = 0;417 visibleFields.forEach((visibleField, visibleFieldInd) => {418 if(isNaN(newWidths[visibleFieldInd].size)){419 nanCount++;420 }421 newWidthObj[visibleField.variableName] = visibleField;422 newWidthObj[visibleField.variableName].width = newWidths[visibleFieldInd].size;423 });424 currentTableFields.forEach((tableField) => {425 if(newWidthObj[tableField.variableName]){426 tableField.width = newWidthObj[tableField.variableName].width;427 }428 });429 if(nanCount){430 return;431 }else{432 this.setState({433 tableFields: currentTableFields,434 mainElversion: Math.random()435 })436 }437 }438 onResizing(e){439 let currentTableFields = this.state.tableFields;440 currentTableFields.forEach((field) => {441 if(field.variableName === this.state.currentResizingField){442 field.width = this.state.currentResizingOffset + e.pageX;443 }444 });445 this.setState({446 tableFields: currentTableFields,447 mainElversion: Math.random()448 });449 }450 render() {451 return (452 <div style={{overflow:"hidden", borderBottom:"1px solid black"}} key="app" ref="APP">453 <DesignerHeader454 paperBackground={this.state.paperBackground}455 paperWidth={this.state.paperWidth}456 paperHeight={this.state.paperHeight}457 paperOrientation={this.state.paperOrientation}458 onPaperBackgroundChange={this.onPaperBackgroundChange}459 predefinedPaperSize={this.predefinedPaperSize}460 onCustomPaperSizeChange={this.onCustomPaperSizeChange}461 onPaperOrientationChange={this.onPaperOrientationChange}462 printTestOutput={this.printTestOutput}463 save={this.props.onSave.bind(null,this.state)}464 key="header"465 />466 {467 this.state.isElementSelected &&468 <DesignerToolbar469 selectedEl={this.state.selectedEl}470 onSelectedElPropertyChange={this.onSelectedElPropertyChange}471 onSelectedElFontWeightChange={this.onSelectedElFontWeightChange}472 onSelectedElFontStyleChange={this.onSelectedElFontStyleChange}473 onSelectedElTextAlignChange={this.onSelectedElTextAlignChange}474 onSelectedElRemove={this.onSelectedElRemove}475 key="toolbar"476 />477 }478 <div style={{float:'left', width:"70%", background: 'gray', height:"100%"}}>479 <div ref="paper" id="paper" className={this.state.isPrinting ? "paper paper--is--printing" : "paper"} style={{position: "relative", width: this.state.paperWidth, height: this.state.paperHeight, margin:"0 auto", marginTop: "10px", marginBottom: "10px", backgroundColor:"#fff", backgroundSize:"cover"}}>480 <span481 style={{backgroundImage: "url('"+this.state.paperBackground+"')", backgroundSize: "cover", width: this.state.paperWidth, height: this.state.paperHeight, position:"absolute", opacity: "0.2"}}>482 </span>483 <DesignerCanvasElements484 canvasElements={this.state.canvasElements}485 selectedEl={this.state.selectedEl}486 tableFields={this.state.tableFields}487 canvasElDragStop={this.canvasElDragStop}488 canvasElResizeStop={this.canvasElResizeStop}489 canvasElementClicked={this.canvasElementClicked}490 onSelectedElRemove={this.onSelectedElRemove}491 isElementSelected={this.state.isElementSelected}492 onTableWidthChange={this.onTableWidthChange}493 onResizing={this.onResizing}494 useDescriptionWithProduct={this.state.useDescriptionWithProduct}495 ref="canvasElements"496 />497 </div>498 </div>499 <div style={{float:'right', width:"30%", height: '600px', background:"#e8e7e7"}}>500 <DesignerMainElements501 parentElements={this.state.parentElements}502 mainElements={this.state.mainElements}503 canvasElements={this.state.canvasElements}504 mainElDragStop={this.mainElDragStop}505 toggleMainElContainer={this.toggleMainElContainer}506 tableFields={this.state.tableFields}507 onTableFieldsChange={this.toggleTableField}508 isElementSelected={this.state.isElementSelected}509 selectedEl={this.state.selectedEl}510 onSelectedElPropertyChange={this.onSelectedElPropertyChange}511 useDescriptionWithProduct={this.state.useDescriptionWithProduct}512 onDescriptionStatusChange={this.onDescriptionStatusChange}513 changeFieldOrder={this.changeFieldOrder}514 mainElVersion={this.state.mainElversion}515 />516 </div>517 </div>518 );519 }520}...

Full Screen

Full Screen

presenter.js

Source:presenter.js Github

copy

Full Screen

1function AddonPage_Rating_create() {2 var presenter = function () { };3 var eventBus;4 var selected_img = [],5 deselected_img = [];6 7 presenter.currentRate = 0;8 presenter.playerController = null;9 presenter.isElementSelected = null;10 presenter.isModelError = false;11 presenter.addonID = null;12 presenter.originalDisplay = "";13 presenter.setPlayerController = function(controller) {14 presenter.playerController = controller;15 };16 17 presenter.ERROR_CODES = {18 'E_01': "You have to add at least 2 rates.",19 'E_02': "You did not add Selected or/and Deselected image for at least one rate."20 };21 22 function returnErrorObject(errorCode) {23 return { isError: true, errorCode: errorCode };24 }25 presenter.sanitizeModel = function (model) {26 if(model.Rates.length <2){27 return returnErrorObject('E_01');28 }29 for (var model_img=0; model_img < model.Rates.length; model_img++){30 selected_img[model_img] = model.Rates[model_img].Selected;31 deselected_img[model_img] = model.Rates[model_img].Deselected;32 }33 if(model.Rates.length > 1) {34 for (var img = 0; img < model.Rates.length; img++) {35 if (!model.Rates[img].Selected || !model.Rates[img].Deselected) {36 return returnErrorObject('E_02');37 }38 }39 }40 var isVisible = ModelValidationUtils.validateBoolean(model['Is Visible']);41 var buttonCloseVisible = ModelValidationUtils.validateBoolean(model['Close button visible']);42 return {43 isError: false,44 rates: {45 selected: selected_img,46 deselected: deselected_img47 },48 length: model.Rates.length,49 title: model['Title Text'],50 comment: model['Comment Text'],51 isVisible: isVisible,52 closeButtonVisible: buttonCloseVisible53 }54 };55 function submitEventHandler (e) {56 e.stopPropagation();57 presenter.hide();58 }59 presenter.createRatingEventData = function (data) {60 return {61 source : presenter.addonID,62 item : data.index,63 value : data.selected ? "1" : "0"64 };65 };66 67 function clickEventHandler (e) {68 e.stopPropagation();69 var $image = $(this),70 index = parseInt($image.data('index'), 10),71 eventData = presenter.createRatingEventData({'index' : index+1, 'selected' : $image.attr("name") === "deselected"});72 73 if($image.attr("name") === "deselected") {74 presenter.currentRate = index+1;75 } else {76 presenter.currentRate = 0;77 }78 eventBus.sendEvent('ValueChanged', eventData);79 if( $image.attr("name") === "deselected" ) {80 if(presenter.isElementSelected !== null) {81 var $selectedImage = presenter.$view.find('img[data-index="'+ presenter.isElementSelected +'"]');82 $selectedImage.attr({83 'src': deselected_img[presenter.isElementSelected],84 'name': "deselected"85 });86 }87 presenter.setSelectedImage(index);88 } else {89 if(presenter.isElementSelected === index) {90 $image.attr({91 "src": deselected_img[index],92 "name": "deselected"93 });94 presenter.isElementSelected = null;95 presenter.$view.find('.page-rating-submit-button').attr('disabled','disabled');96 }97 }98 99 }100 101 function updateTitle (view, title) {102 if(title){103 $(view).find('.page-rating-title').html(title);104 }105 }106 107 function updateComment(view, comment, isPreview){108 $(view).find('.page-rating-comment').prepend('<p class="CommentText"></p>');109 $(view).find('.CommentText').html(comment);110 $(view).find('.page-rating-comment').append('<textarea></textarea>');111 $(view).find('textarea').attr('data-name', 'textarea');112 $(view).find('.page-rating-comment').append('<button type="button" class="page-rating-submit-button">Submit</button>');113 $(view).find('.page-rating-submit-button').attr('disabled','disabled');114 if(!isPreview) {115 $(view).find(".page-rating-submit-button").live("click", submitEventHandler);116 }117 }118 119 function updateRates(view, rates, length,isPreview){120 if(rates){121 for (var i=0; i<length; i++){122 var $image = $(document.createElement('img'));123 $image.attr({124 'src': deselected_img[i],125 'name': "deselected",126 'data-index': i127 });128 $(view).find('.page-rating-rates').append($image);129 }130 if(!isPreview){131 $(view).find("img").live("click", clickEventHandler);132 }133 }134 }135 presenter.updateView = function (isPreview){136 if(presenter.configuration.closeButtonVisible){137 presenter.$view.find('.page-rating-wrapper').prepend('<button type="button" class="page-rating-close-button">Close</button>');138 presenter.$view.find(".page-rating-close-button").live("click", submitEventHandler);139 }140 updateTitle(presenter.$view, presenter.configuration.title);141 updateRates(presenter.$view, presenter.configuration.rates, presenter.configuration.length, isPreview);142 updateComment(presenter.$view, presenter.configuration.comment, isPreview);143 presenter.$view.css('display',presenter.originalDisplay);144 };145 presenter.presenterLogic = function (view, model, isPreview) {146 presenter.$view = $(view);147 presenter.configuration = presenter.sanitizeModel(model);148 if(presenter.configuration.isError){149 DOMOperationsUtils.showErrorMessage(view, presenter.ERROR_CODES, presenter.configuration.errorCode);150 return;151 }152 presenter.originalDisplay = $(view).css('display');153 presenter.setVisibility(presenter.configuration.isVisible || isPreview);154 presenter.updateView(isPreview);155 };156 presenter.run = function (view, model) {157 eventBus = presenter.playerController.getEventBus();158 presenter.presenterLogic(view, model, false);159 presenter.addonID = model.ID;160 };161 162 presenter.createPreview = function (view, model) {163 presenter.presenterLogic(view, model, true);164 };165 presenter.setSelectedImage = function(index){166 var $img_RateIndex = presenter.$view.find('img[data-index="'+ index +'"]');167 $img_RateIndex.attr({168 'src': selected_img[index],169 'name': 'selected'170 });171 presenter.isElementSelected = index;172 if(index == null){173 presenter.$view.find('.page-rating-submit-button').attr('disabled', 'disabled');174 }else {175 presenter.$view.find('.page-rating-submit-button').removeAttr('disabled');176 }177 };178 presenter.setCommentValue = function(comment){179 presenter.$view.find('textarea[data-name="textarea"]').text(comment);180 };181 presenter.getCommentValue = function(){182 return presenter.$view.find('textarea[data-name="textarea"]').val();183 };184 presenter.getState = function () {185 if (presenter.configuration.isError) {186 return "";187 }188 return JSON.stringify({189 commentValue: presenter.getCommentValue(),190 isVisible: presenter.configuration.isVisible,191 selectedItem: presenter.isElementSelected,192 currentRate: presenter.currentRate193 });194 };195 presenter.setState = function (state) {196 if (!state) return;197 var parsedState = JSON.parse(state),198 selectedItem = parsedState.selectedItem,199 currentRate = parsedState.currentRate;200 201 202 presenter.setCommentValue(parsedState.commentValue);203 presenter.setSelectedImage(selectedItem);204 presenter.currentRate = currentRate ? currentRate : "0";205 presenter.configuration.isVisible = parsedState.isVisible;206 presenter.setVisibility(presenter.configuration.isVisible);207 };208 209 presenter.executeCommand = function (name, params) {210 var commands = {211 'show': presenter.show,212 'hide': presenter.hide,213 'getRate': presenter.getRate214 };215 return Commands.dispatch(commands, name, params, presenter);216 };217 presenter.setVisibility = function (isVisible) {218 presenter.$view.css('visibility', isVisible ? 'visible' : 'hidden');219 };220 221 presenter.hide = function () {222 presenter.setVisibility(false);223 presenter.configuration.isVisible = false;224 };225 presenter.show = function () {226 presenter.setVisibility(true);227 presenter.configuration.isVisible = true;228 };229 230 presenter.getRate = function() {231 return presenter.currentRate;232 };233 presenter.reset = function () {234 presenter.isElementSelected = null;235 var $img = presenter.$view.find("img[name='selected']"),236 index = parseInt($img.data('index'), 10);237 $img.attr({238 "src": deselected_img[index],239 "name": "deselected"240 });241 presenter.$view.find('textarea[data-name="textarea"]').val("");242 presenter.$view.find('.page-rating-submit-button').attr('disabled','disabled');243 };244 245 return presenter;...

Full Screen

Full Screen

SelectableDirective.js

Source:SelectableDirective.js Github

copy

Full Screen

...36 });37 this.toggleSelection = function(element, index) {38 lastClickedIndex = index;39 shiftSelectedElements.length = 0;40 if(this.isElementSelected(element)) {41 unselectElement(element);42 }43 else {44 selectElement(element);45 }46 };47 this.toggleSelectAll = function() {48 if(this.selectedElements.length === this.selectableElements.length){49 this.selectedElements.length = 0;50 }51 else {52 angular.forEach(this.selectableElements, function(element) {53 if(!self.isElementSelected(element)) {54 selectElement(element);55 }56 });57 }58 };59 this.shiftedClick = function(element, index) {60 if(typeof lastClickedIndex !== undefined) {61 toggleRangeUpTo(lastClickedIndex, index);62 }63 };64 this.registerElement = function(element, directive) {65 this.selectableElements.push(element);66 };67 this.unregisterElement = function(element) {68 var index = this.selectableElements.indexOf(element);69 if(index > -1) {70 this.selectableElements.splice(index, 1);71 }72 index = this.selectedElements.indexOf(element);73 if(index > -1) {74 this.selectedElements.splice(index, 1);75 }76 };77 this.areAllElementSelected = function() {78 return this.selectedElements.length === this.selectableElements.length79 && this.selectedElements.length !== 0;80 };81 this.isElementSelected = function(element) {82 return self.selectedElements.indexOf(element) > -1;83 };84 function toggleRangeUpTo(firstIndex, lastIndex) {85 var lastElement = getElementAtIndex(lastIndex),86 min = Math.min(firstIndex, lastIndex),87 max = Math.max(firstIndex, lastIndex),88 element,89 i;90 angular.forEach(shiftSelectedElements, function(element, index) {91 unselectElement(element);92 });93 if(self.isElementSelected(lastElement)) {94 for(i = min; i <= max; i++) {95 element = getElementAtIndex(i);96 unselectElement(element);97 }98 lastClickedIndex = lastIndex;99 shiftSelectedElements.length = 0;100 }101 else {102 shiftSelectedElements.length = 0;103 for(i = min; i <= max; i++) {104 element = getElementAtIndex(i);105 selectElement(element);106 shiftSelectedElements.push(element);107 }108 }109 }110 function getElementAtIndex(index) {111 return self.selectableElements[index];112 }113 function selectElement(element) {114 if(!self.isElementSelected(element)) {115 self.selectedElements.push(element);116 }117 }118 function unselectElement(element) {119 var index = self.selectedElements.indexOf(element);120 if(index > -1) {121 self.selectedElements.splice(index, 1);122 }123 }124 }]125 };126 }])127 .directive('selectable', ['$parse', function($parse) {128 return {129 restrict: 'A',130 require: ['^selectableSet', '?ngModel'],131 link: function(scope, element, attr, ctrls) {132 var currentElementGetter = $parse(attr.selectable);133 var currentElement = currentElementGetter(scope);134 var ctrl = ctrls[0],135 modelCtrl = ctrls[1];136 ctrl.registerElement(currentElement);137 scope.$on('$destroy', function() {138 ctrl.unregisterElement(currentElement);139 });140 scope.$watch(function() { return ctrl.isElementSelected(currentElement); }, function() {141 scope.selected = ctrl.isElementSelected(currentElement);142 if(modelCtrl) {143 modelCtrl.$setViewValue(scope.selected);144 }145 });146 element.on('click', function(event) {147 scope.$apply(function() {148 handleClick(event);149 });150 });151 function handleClick(event) {152 if (event.shiftKey) {153 ctrl.shiftedClick(currentElement, scope.$index);154 }155 else if (event.ctrlKey || angular.element(event.target).is('[type=checkbox]')) {...

Full Screen

Full Screen

List.es.js

Source:List.es.js Github

copy

Full Screen

...69 return checkable 70 ? <CheckableListElement {...data} />71 : <BaseListElement {...data} />72}73export function isElementSelected(currentElValue, selectedData) {74 return selectedData.reduce(75 (acc, addedElement) => acc || currentElValue === addedElement.value,76 false77 )78}79export function List(props) {80 if(81 props.query && 82 props.data && 83 props.data.length && 84 props.filteredValues85 ) {86 return (87 props.filteredValues.length 88 ? <Fragment>89 {90 !props.multiselect && 91 <BaseListElement 92 resetState={props.resetState}93 />94 }95 {96 props.filteredValues.map(97 filteredValue => {98 return props.data99 .filter( dataElement => dataElement.value === filteredValue )100 .map(101 (dataElement, i) => (102 <ListElement103 key={ i }104 checkable={ !!props.multiselect }105 value={ dataElement.value }106 label={ dataElement.label }107 query={ props.query }108 name={ props.name }109 selected={ isElementSelected(dataElement.value, props.selectedData) }110 updateElementState={ props.updateElementState }111 />112 )113 )114 }115 )116 }117 </Fragment>118 : <Empty />119 )120 }121 return (122 props.data && 123 props.data.length124 ) ? (125 <Fragment>126 {127 !props.multiselect && 128 <BaseListElement 129 resetState={props.resetState}130 />131 }132 {props.data.map( 133 (dataElement, i) => (134 <ListElement135 key={i}136 checkable={ !!props.multiselect }137 value={ dataElement.value }138 label={ dataElement.label }139 query={ props.query }140 name={ props.name }141 selected={ isElementSelected(dataElement.value, props.selectedData) }142 updateElementState={ props.updateElementState }143 />144 )145 )}146 </Fragment>147 ) : <Empty />148}...

Full Screen

Full Screen

Draggable.js

Source:Draggable.js Github

copy

Full Screen

...85 /**86 * If element not selected yet make selected.87 */88 makeActiveIfIsNot() {89 if (!this.isElementSelected()) {90 // eslint-disable-next-line no-shadow91 const { makeElementActive, id } = this.props;92 makeElementActive(id);93 }94 }95 render() {96 const { activeElement, properties, style, children } = this.props;97 const { location, size } = this.isElementSelected() ? activeElement.properties : properties;98 return (99 <Rnd100 bounds="parent"101 size={size}102 position={location}103 onClick={this.onSelectItem}104 onDragStart={this.onSelectItem}105 onResizeStart={this.onSelectItem}106 onDrag={this.onDrag}107 onResize={this.onResize}108 resizeHandleClasses={resizeHandlerClasses}109 className={`draggable ${this.isElementSelected() ? 'active' : ''}`}110 style={{ ...style }}111 resizeHandleWrapperClass={`resizeHandlerWrapper ${112 this.isElementSelected() ? 'active' : ''113 }`}114 >115 {children}116 {this.isElementSelected() ? <DraggableRemoveHandler click={this.dropElement} /> : null}117 </Rnd>118 );119 }120}121const mapStateToProp = state => ({122 ...state,123 activeElement: state.appReducers.activeElement,124 activeElementId: state.appReducers.activeElement ? state.appReducers.activeElement.id : null125});126export default connect(127 mapStateToProp,128 {129 makeElementActive,130 changeProperties,...

Full Screen

Full Screen

inputHandleCreateRecipe.js

Source:inputHandleCreateRecipe.js Github

copy

Full Screen

1// $('#createRecipeBtn').click(function() {2// // Handle all the input from the form3// if($("#title").val() == "Hello")4// {5// alert("You write Hello!");6// $('#createRecipe').submit();7// }8// else{9// $('#createRecipe').submit(function(e){10// alert('Error');11// e.preventDefault(e);12// });13// // $('.msg').text("error");14// }15// });16$(function(){17 $("input[name=title]")[0].onchange = function () {18 let regex = /^[A-Za-z0-9 ]{2,70}$/;19 let title = $(this).val();20 if(!regex.test(title)) {21 this.setCustomValidity("Title is not in the correct format!");22 }23 else{24 this.setCustomValidity("");25 }26 };27 $("input[name=calories]")[0].onchange = function () {28 let regex = /^[0-9]{1,}$/;29 let calories = $(this).val();30 if(!regex.test(calories)) {31 this.setCustomValidity("Calories is not in the correct format!");32 }33 else{34 this.setCustomValidity("");35 }36 };37 function IsElementFromDatalistSelected(inputValue, datalist) {38 //var inputCuisine = $('input[name=cuisine]').val();39 //var cuisineChildren = $('#cuisine').children();40 let isInputSelected = false;41 for (let i = 0; i < datalist.length; i++) {42 if (datalist[i].value === inputValue) {43 isInputSelected = true;44 }45 }46 return isInputSelected;47 }48 $("input[name=cuisine]")[0].onchange = function () {49 let isElementSelected = IsElementFromDatalistSelected($('input[name=cuisine]').val(),50 $('#cuisine').children());51 if (!isElementSelected) {52 this.setCustomValidity("Please, choose cuisine from the dropdown!");53 } else {54 this.setCustomValidity("");55 }56 }57 $("input[name=duration]")[0].onchange = function () {58 let regex = /^[0-9]{1,3}$/;59 let duration = $(this).val();60 if(!regex.test(duration)) {61 this.setCustomValidity("Duration is not in the correct format!");62 }63 else{64 this.setCustomValidity("");65 }66 };67 $("input[name=duration-units]")[0].onchange = function () {68 let isElementSelected = IsElementFromDatalistSelected($('input[name=duration-units]').val(),69 $('#duration-units').children());70 if (!isElementSelected) {71 this.setCustomValidity("Please, choose duration unit from the dropdown!");72 } else {73 this.setCustomValidity("");74 }75 }76 $("input[name=difficulty]")[0].onchange = function () {77 let isElementSelected = IsElementFromDatalistSelected($('input[name=difficulty]').val(),78 $('#difficulty').children());79 if (!isElementSelected) {80 this.setCustomValidity("Please, choose difficulty from the dropdown!");81 } else {82 this.setCustomValidity("");83 }84 }85 $("input[name=servings]")[0].onchange = function () {86 let regex = /^[0-9]{1,3}$/;87 let servings = $(this).val();88 if(!regex.test(servings)) {89 this.setCustomValidity("Servings value is not in the correct format!");90 }91 else{92 this.setCustomValidity("");93 }94 };...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

...17 const elem = {18 id: element.id,19 context: props.context20 };21 const selected = !!(building && !disableSelection && isElementSelected(pageBuilder.selected, elem));22 const overed = !!(building && !disableSelection && isElementSelected(pageBuilder.overed, elem));23 const focused = isElementSelected(pageBuilder.focused, elem);24 const linkingDataMode = pageBuilder.menuTab === 'link';25 const isHighlightable = !!(26 building && editing && !dragging && (27 (props.elementLinks && props.elementLinks.length) ||28 props.editing && (focused || selected || overed)29 )30 );31 const isDraggable =32 editing &&33 settings.drag &&34 !isTemplate &&35 !disableSelection &&36 !(selected && settings.drag.dragSelected === false);37 return {...

Full Screen

Full Screen

Keymaster.js

Source:Keymaster.js Github

copy

Full Screen

...38 unbindAll() {39 Object.keys(this.handlers).forEach(keyCode => key.unbind(keyCode));40 }41 handleDelete() {42 if (!this.isElementSelected()) {43 return;44 }45 this.props.onDeleteElement(this.props.selectedUuids);46 }47 handleDuplicate() {48 if (!this.isElementSelected()) {49 return;50 }51 this.props.onDuplicateElement(this.props.selectedUuids);52 }53 handleUndo() {54 this.props.onUndo();55 }56 handleRedo() {57 this.props.onRedo();58 }59 handleFontStyle(prop) {60 return () => {61 if (!this.isElementSelected()) {62 return;63 }64 const { meta, meta: { fontStyle }} = this.props;65 const style = (fontStyle || []).slice();66 if (style.includes(prop)) {67 style.splice(style.indexOf(prop), 1);68 } else {69 style.push(prop);70 }71 this.props.onUpdateElement({ ...meta, fontStyle: style });72 }73 }74 isElementSelected() {75 return this.props.selectedUuids.length;76 }77 render() {78 return '';79 }80}81Keymaster.propTypes = {82 meta: PropTypes.object,83 selectedUuids: PropTypes.array,84 onDeleteElement: PropTypes.func.isRequired,85 onUndo: PropTypes.func.isRequired,86 onRedo: PropTypes.func.isRequired,87 onUpdateElement: PropTypes.func.isRequired,88};...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const assert = require('assert');2const { remote } = require('webdriverio');3(async () => {4 const browser = await remote({5 capabilities: {6 }7 })8 const searchInput = await browser.$('#search_input_react')9 await searchInput.setValue('WebdriverIO')10 const submitBtn = await browser.$('#search_button_react')11 await submitBtn.click()12 const header = await browser.$('h1')13 await browser.deleteSession()14})().catch((e) => console.error(e))

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 console.log('Title is: ' + title)5 })6 it('should have the right title', () => {7 const title = browser.getTitle()8 console.log('Title is: ' + title)9 })10 it('should have the right title', () => {11 const title = browser.getTitle()12 console.log('Title is: ' + title)13 })14 it('should have the right title', () => {15 const title = browser.getTitle()16 console.log('Title is: ' + title)17 })18 it('should have the right title', () => {19 const title = browser.getTitle()20 console.log('Title is: ' + title)21 })22 it('should have the right title', () => {23 const title = browser.getTitle()24 console.log('Title is: ' + title)25 })26 it('should have the right title', () => {27 const title = browser.getTitle()28 console.log('Title is: ' + title)29 })30 it('should have the right title', () => {31 const title = browser.getTitle()32 console.log('Title is: ' + title)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle();4 console.log('Title is: ' + title);5 browser.pause(3000);6 });7});8describe('webdriver.io page', () => {9 it('should have the right title', () => {10 const title = browser.getTitle();11 console.log('Title is: ' + title);12 browser.pause(3000);13 });14});15describe('webdriver.io page', () => {16 it('should have the right title', () => {17 const title = browser.getTitle();18 console.log('Title is: ' + title);19 browser.pause(3000);20 });21});22describe('webdriver.io page', () => {23 it('should have the right title', () => {24 const title = browser.getTitle();25 console.log('Title is: ' + title);26 browser.pause(3000);27 });28});29describe('webdriver.io page', () => {30 it('should have the right title', () => {31 const title = browser.getTitle();32 console.log('Title is: ' + title);33 browser.pause(3000);34 });35});36describe('webdriver.io page', () => {37 it('should have the right title', () => {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', function() {2 it('should be able to get the title', function () {3 var title = browser.getTitle();4 console.log('Title was: ' + title);5 });6 it('should be able to get the title', function () {7 var title = browser.getTitle();8 console.log('Title was: ' + title);9 });10});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 const isTitle = browser.isTitle('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')5 expect(title).toEqual('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js')6 expect(isTitle).toEqual(true)7 })8})

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 var searchBox = browser.element('input[name=q]');4 searchBox.setValue('webdriverio');5 browser.keys('Enter');6 browser.pause(5000);7 var isElementSelected = browser.isSelected('input[name=q]');8 console.log(isElementSelected);9 });10});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 expect(title).toEqual('WebdriverIO - WebDriver bindings for Node.js')5 })6 it('should have a checkbox', () => {7 })8})

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle();4 expect(title).toEqual('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');5 const isSelected = browser.isElementSelected('css selector', 'input[type="checkbox"]');6 console.log('Is the checkbox selected? ' + isSelected);7 });8});9describe('webdriver.io page', () => {10 it('should have the right title', () => {11 const title = browser.getTitle();12 expect(title).toEqual('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');13 const isVisible = browser.isElementVisible('css selector', 'input[type="checkbox"]');14 console.log('Is the checkbox visible? ' + isVisible);15 });16});17describe('webdriver.io page', () => {18 it('should have the right title', () => {19 const title = browser.getTitle();20 expect(title).toEqual('WebdriverIO · Next-gen browser and mobile automation test framework for Node.js');21 const isClickable = browser.isElementClickable('css selector', 'input[type="checkbox"]');22 console.log('Is the checkbox clickable? ' + isClickable);23 });24});25describe('webdriver.io page', () => {26 it('should have the right title', () => {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('webdriver.io page', () => {2 it('should have the right title', () => {3 const title = browser.getTitle()4 expect(title).toBe('WebdriverIO · Next-gen WebDriver test framework for Node.js')5 })6 it('should have the right title', () => {7 const title = browser.getTitle()8 expect(title).toBe('WebdriverIO · Next-gen WebDriver test framework for Node.js')9 const isElementSelected = browser.isElementSelected('#search_form_input_homepage')10 console.log("isElementSelected = " + isElementSelected)11 })12})13describe('webdriver.io page', () => {14 it('should have the right title', () => {15 const title = browser.getTitle()16 expect(title).toBe('WebdriverIO · Next-gen WebDriver test framework for Node.js')17 })18 it('should have the right title', () => {19 const title = browser.getTitle()20 expect(title).toBe('WebdriverIO · Next-gen WebDriver test framework for Node.js')21 const isEnabled = browser.isEnabled('#search_form_input_homepage')22 console.log("isEnabled = " + isEnabled)23 })24})

Full Screen

Full Screen

WebdriverIO Tutorial

Wondering what could be a next-gen browser and mobile test automation framework that is also simple and concise? Yes, that’s right, it's WebdriverIO. Since the setup is very easy to follow compared to Selenium testing configuration, you can configure the features manually thereby being the center of attraction for automation testing. Therefore the testers adopt WedriverIO to fulfill their needs of browser testing.

Learn to run automation testing with WebdriverIO tutorial. Go from a beginner to a professional automation test expert with LambdaTest WebdriverIO tutorial.

Chapters

  1. Running Your First Automation Script - Learn the steps involved to execute your first Test Automation Script using WebdriverIO since the setup is very easy to follow and the features can be configured manually.

  2. Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.

  3. Browser Commands For Selenium Testing - Understand more about the barriers faced while working on your Selenium Automation Scripts in WebdriverIO, the ‘browser’ object and how to use them?

  4. Handling Alerts & Overlay In Selenium - Learn different types of alerts faced during automation, how to handle these alerts and pops and also overlay modal in WebdriverIO.

  5. How To Use Selenium Locators? - Understand how Webdriver uses selenium locators in a most unique way since having to choose web elements very carefully for script execution is very important to get stable test results.

  6. Deep Selectors In Selenium WebdriverIO - The most popular automation testing framework that is extensively adopted by all the testers at a global level is WebdriverIO. Learn how you can use Deep Selectors in Selenium WebdriverIO.

  7. Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.

  8. Automated Monkey Testing with Selenium & WebdriverIO - Understand how you can leverage the amazing quality of WebdriverIO along with selenium framework to automate monkey testing of your website or web applications.

  9. JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.

  10. Cross Browser Testing With WebdriverIO - Learn more with this step-by-step tutorial about WebdriverIO framework and how cross-browser testing is done with WebdriverIO.

Run Webdriverio 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