How to use inputDrag method in Playwright Internal

Best JavaScript code snippet using playwright-internal

nxtCustomForm.js

Source:nxtCustomForm.js Github

copy

Full Screen

1var arrayTitleField = [];2var arrayNameField = [];3$("#NXT_form").disableSelection();4function ajax_global(dataString, urlSend, method, type) {5 var res = '';6 $.ajax({7 url: $('base').attr('href') + urlSend + '-lang-' + lang,8 type: method,9 async: false,10 dataType: type,11 data: dataString,12 })13 .success(function(res) {14 result = res;15 })16 .error(function(error) {17 console.log(error);18 });19 return result;20}21var nxtCustomForm = function() {22 var handleFixAutoVal = function() {23 $('body').on('change keyup', '#NXT_modal_clone input', function(event) {24 event.preventDefault();25 var vl = $(this).val();26 $(this).attr('value', vl);27 });28 }29 var handleOnload = function() {30 $('body').find('input[type="radio"]').css({31 marginLeft: '-10px'32 });33 $('div.radio').css({34 marginTop: '-10px'35 });36 $("#NXT_sortable,.NXT_tab_content").disableSelection();37 }38 var handleRemove = function() {39 $('body').on('click', '.redColorNxt', function(event) {40 event.preventDefault();41 var NXT_parent = $(this).parent().parent();42 var classOr = NXT_parent.attr('data-class');43 var positonOr = $('.NXT_tab_content').find('.' + classOr);44 var offSet = positonOr.offset();45 NXT_parent.animate({46 top: offSet.top * (-1),47 //left: offSet.left*(-1),48 }, 500, function() {49 $(this).remove();50 });51 //Remove modal52 var modal_id = $(this).attr('data-id-modal');53 $('#' + modal_id).remove();54 // NXT_parent.slideUp('400', function() {55 // NXT_parent.remove();56 // });57 });58 }59 var handleSetting = function() {60 $('body').on('click', '.NXT_setting', function(event) {61 event.preventDefault();62 var modal_id = $(this).attr('data-id-modal');63 $('body').find('#NXT_modal_clone').find('#' + modal_id).modal('show');64 });65 }66 var handleSaveEditInput = function() {67 $('body').on('click', '.NXT_save_edit_input', function(event) {68 event.preventDefault();69 var inputClass = $(this).parent().parent().parent().parent();70 var id = inputClass.attr('id');71 var inputDrag = $('body').find('.' + id);72 var classInput = inputDrag.attr('data-class');73 var name = inputClass.find('input[name="label"]').val();74 var required = inputClass.find('input[name="require"]').parent('span').hasClass('checked');75 if (required == true) {76 inputClass.find('input[name="require"]').attr('checked', 'checked');77 }78 var pro_name = inputClass.find('input[name="name"]').val();79 if (classInput == 'input_1_1' || classInput == 'input_1_2' || classInput == 'input_1_5') {80 var valueDefault = inputClass.find('input[name="default"]').val();81 var placeholder = inputClass.find('input[name="placeholder"]').val();82 inputDrag.find('label').text(name + ':');83 inputDrag.find('input').val(valueDefault);84 inputDrag.find('input').attr('placeholder', placeholder);85 if (required == true) {86 inputDrag.find('input').attr('required', required);87 }88 //inputDrag.find('input').attr('name',pro_name);89 } else if (classInput == 'input_1_3') {90 var valueDefault = inputClass.find('input[name="default"]').val();91 var placeholder = inputClass.find('input[name="placeholder"]').val();92 //Or93 var min = parseInt(inputClass.find('input[name="min"]').val());94 var max = parseInt(inputClass.find('input[name="max"]').val());95 inputDrag.find('label').text(name + ':');96 inputDrag.find('input').val(valueDefault);97 inputDrag.find('input').attr('placeholder', placeholder);98 inputDrag.find('input').attr('min', min);99 inputDrag.find('input').attr('max', max);100 if (required == true) {101 inputDrag.find('input').attr('required', required);102 }103 //inputDrag.find('input').attr('name',pro_name);104 } else if (classInput == 'input_1_4') {105 var valueDefault = inputClass.find('input[name="default"]').val();106 var placeholder = inputClass.find('input[name="placeholder"]').val();107 inputDrag.find('label').text(name + ':');108 inputDrag.find('textarea').val(valueDefault);109 inputDrag.find('textarea').attr('placeholder', placeholder);110 if (required == true) {111 inputDrag.find('input').attr('required', required);112 }113 //inputDrag.find('input').attr('name',pro_name);114 } else if (classInput == 'input_2_1' || classInput == 'input_2_2') {115 var valueDefault = inputClass.find('input[name="default"]').val();116 inputDrag.find('label').text(name + ':');117 var allSelect = inputClass.find('input');118 var arraySelect = [];119 $.each(allSelect, function(k, v) {120 if ($(this).attr('name') != 'name' && $(this).attr('name') != 'default' && $(this).attr('name') != 'label') {121 var tmp_name_option = $(this).val();122 if (tmp_name_option != undefined && tmp_name_option !== '1') {123 arraySelect.push(tmp_name_option);124 }125 }126 });127 var htmlSelect = '';128 $.each(arraySelect, function(k, v) {129 if (k % 2 == 0) {130 var tmp_name = v;131 var tmp_value = arraySelect[k + 1];132 if (tmp_name === valueDefault) {133 htmlSelect += '<option selected value="' + tmp_value + '">' + tmp_name + '</option>';134 } else {135 htmlSelect += '<option value="' + tmp_value + '">' + tmp_name + '</option>';136 }137 }138 });139 inputDrag.find('select').html(htmlSelect);140 if (required == true) {141 inputDrag.find('input').attr('required', required);142 }143 //inputDrag.find('select').attr('name',pro_name);144 } else if (classInput == 'input_2_3') {145 var allSelect = inputClass.find('input');146 var arraySelect = [];147 console.log(arraySelect);148 $.each(allSelect, function(k, v) {149 if ($(this).attr('name') != 'name' && $(this).attr('name') != 'default' && $(this).attr('name') != 'label') {150 var tmp_name_option = $(this).val();151 if (tmp_name_option != undefined && tmp_name_option !== '1') {152 arraySelect.push(tmp_name_option);153 }154 }155 });156 var htmlCheckbox = '<label>' + name + ':</label><br/>';157 $.each(arraySelect, function(k, v) {158 if (k % 3 == 0) {159 var tmp_label = v;160 var tmp_name = arraySelect[k + 1];161 var tmp_value = arraySelect[k + 2];162 htmlCheckbox += '<label>' + tmp_label + '</label><input type="checkbox" value="' + tmp_value + '" name="' + tmp_name + '"/>';163 }164 });165 inputDrag.children(':first-child').html(htmlCheckbox);166 $(':checkbox').uniform();167 } else if (classInput == 'input_2_4') {168 var allSelect = inputClass.find('input');169 var valueDefault = inputClass.find('input[name="default"]').val();170 var arraySelect = [];171 $.each(allSelect, function(k, v) {172 if ($(this).attr('name') != 'name' && $(this).attr('name') != 'default' && $(this).attr('name') != 'label') {173 var tmp_name_option = $(this).val();174 if (tmp_name_option != undefined && tmp_name_option !== '1') {175 arraySelect.push(tmp_name_option);176 }177 }178 });179 var htmlRadio = '<label>' + name + ':</label><br/>';180 $.each(arraySelect, function(k, v) {181 if (k % 2 == 0) {182 var tmp_label = v;183 var tmp_value = arraySelect[k + 1];184 if (tmp_label == valueDefault) {185 htmlRadio += '<label>' + tmp_label + '</label><input type="radio" checked value="' + tmp_value + '" name="' + pro_name + '"/>&nbsp;';186 } else {187 htmlRadio += '<label>' + tmp_label + '</label><input type="radio" value="' + tmp_value + '" name="' + pro_name + '"/>&nbsp;';188 }189 }190 });191 inputDrag.children(':first-child').html(htmlRadio);192 $(':radio').uniform();193 $('.radio').css({194 marginTop: '-10px'195 });196 $('input[type="radio"]').css({197 marginLeft: '-10px'198 });199 } else if (classInput == 'input_3_1' || classInput == 'input_3_2') {200 inputDrag.find('button:first-child').text(name);201 } else if (classInput == 'input_3_3') {202 inputDrag.find('label').text(name);203 //inputDrag.find('input[type="file"]').attr('name',pro_name);204 } else if (classInput == 'input_3_4') {205 var allSelect = inputClass.find('input');206 var arraySelect = [];207 $.each(allSelect, function(k, v) {208 if ($(this).attr('name') != 'name' && $(this).attr('name') != 'default' && $(this).attr('name') != 'label') {209 var tmp_name_option = $(this).val();210 if (tmp_name_option != undefined) {211 arraySelect.push(tmp_name_option);212 }213 }214 });215 var htmlButton = '';216 $.each(arraySelect, function(k, v) {217 if (k % 2 == 0) {218 var tmp_label = v;219 var tmp_type = arraySelect[k + 1];220 htmlCheckbox += '<button type="button" data-type="' + tmp_type + '" class="btn btn-default">' + tmp_label + '</button>&nbsp;';221 }222 });223 inputDrag.find('button').remove();224 $(htmlCheckbox).prependTo(inputDrag);225 }226 inputClass.modal('hide');227 });228 }229 var handleDrag = function() {230 $("#NXT_ul").sortable({231 revert: true232 });233 $(".NXT_drag").draggable({234 connectToSortable: "#NXT_ul",235 accept: '#NXT_ul',236 appendTo: "body",237 helper: "clone",238 cursor: 'move',239 revert: "invalid",240 start: function(event, ui) {241 var myDrag = ui.helper;242 myDrag.width($(this).width());243 },244 stop: function(event, ui) {245 //Xu ly su kien keo tha dung lai246 //Chuoi random247 var NXT_random = handleRanDom(32);248 var myDrag = ui.helper;249 var myClassInput = myDrag.attr('data-class');250 var html = '<div class="removeNXT"><a href="javascript:void(0)" class="NXT_setting" data-id-modal="' + NXT_random + '"><i class="fa fa-cog fa-15x"></i></a> <a href="javascript:void(0)" class="redColorNxt" data-id-modal="' + NXT_random + '"><i class="fa fa-times-circle-o fa-15x"></i></a></div>';251 myDrag.addClass('hoverShowAction');252 myDrag.append(html);253 //Them 1 du lieu vao254 myDrag.attr('data-id-modal', NXT_random);255 myDrag.addClass(NXT_random);256 //Tim modal va nhan ban257 $('body').find('#NXT_modal_' + myClassInput).clone().appendTo('#NXT_modal_clone').attr('id', NXT_random);258 var firstChild = myDrag.children(':first-child');259 if (firstChild.find('.checker').length >= 1) {260 firstChild.find('.checker').remove();261 firstChild.append('<input value="1" name="checkbox_1" type="checkbox" class="form-control"/>');262 } else if (firstChild.find('.radio').length >= 1) {263 firstChild.find('.radio').remove();264 firstChild.find('label:last-child').each(function(k, v) {265 $('<input value="' + parseInt(k + 1) + '" type="radio" name="radio_1" class="form-control"/>').insertAfter($(this));266 });267 }268 $(':checkbox,:radio').uniform();269 $('.radio').css({270 marginTop: '-10px'271 });272 $('input[type="radio"]').css({273 marginLeft: '-10px'274 });275 }276 });277 $("#NXT_ul").droppable({278 accept: '.NXT_drag',279 hoverClass: "NXT_remove",280 drop: function(ev, ui) {},281 out: function(event, ui) {282 var myDrop = ui.helper;283 myDrop.remove();284 },285 });286 }287 var handleRanDom = function(len, charSet) {288 charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';289 var randomString = '';290 for (var i = 0; i < len; i++) {291 var randomPoz = Math.floor(Math.random() * charSet.length);292 randomString += charSet.substring(randomPoz, randomPoz + 1);293 }294 return randomString;295 }296 var handleRemoveSelect = function() {297 $('body').on('click', '.remove_select', function(event) {298 event.preventDefault();299 var parent = $(this).parent().parent();300 var parentNext = parent.next();301 if (parentNext.children(':first-child').text() == '') {302 parentNext.children(':first-child').text(parent.children(':first-child').text());303 }304 parent.remove();305 });306 }307 var handleNewSelect = function() {308 $('body').on('click', '.new_select', function(event) {309 event.preventDefault();310 var parent = $(this).parent().parent();311 var parentForm = parent.parent();312 parent.clone().appendTo(parentForm).find('input').val('');313 $(this).removeClass('new_select').addClass('remove_select');314 $(this).html('<i class="fa fa-minus"></i>');315 });316 }317 var handleRemoveCheckbox = function() {318 $('body').on('click', '.remove_checkbox', function(event) {319 event.preventDefault();320 var parent = $(this).parent().parent();321 var parentNext = parent.next();322 if (parentNext.children(':first-child').text() == '') {323 parentNext.children(':first-child').text(parent.children(':first-child').text());324 }325 parent.remove();326 });327 }328 var handleNewCheckbox = function() {329 $('body').on('click', '.new_checkbox', function(event) {330 event.preventDefault();331 var parent = $(this).parent().parent();332 var parentForm = parent.parent();333 parent.clone().appendTo(parentForm).children(':first-child').text('');334 parentForm.children(':last-child').find('input').val('');335 $(this).removeClass('new_checkbox').addClass('remove_checkbox');336 $(this).html('<i class="fa fa-minus"></i>');337 });338 }339 var handleRemoveRadio = function() {340 $('body').on('click', '.remove_radio', function(event) {341 event.preventDefault();342 var parent = $(this).parent().parent();343 var parentNext = parent.next();344 if (parentNext.children(':first-child').text() == '') {345 parentNext.children(':first-child').text(parent.children(':first-child').text());346 }347 parent.remove();348 });349 }350 var handleNewRadio = function() {351 $('body').on('click', '.new_radio', function(event) {352 event.preventDefault();353 var parent = $(this).parent().parent();354 var parentForm = parent.parent();355 parent.clone().appendTo(parentForm).children(':first-child').text('');356 parentForm.children(':last-child').find('input').val('');357 $(this).removeClass('new_radio').addClass('remove_radio');358 $(this).html('<i class="fa fa-minus"></i>');359 });360 }361 var handleRemoveButton = function() {362 $('body').on('click', '.remove_button', function(event) {363 event.preventDefault();364 var parent = $(this).parent().parent();365 var parentNext = parent.next();366 if (parentNext.children(':first-child').text() == '') {367 parentNext.children(':first-child').text(parent.children(':first-child').text());368 }369 parent.remove();370 });371 }372 var handleNewButton = function() {373 $('body').on('click', '.new_button', function(event) {374 event.preventDefault();375 var parent = $(this).parent().parent();376 var parentForm = parent.parent();377 parent.clone().appendTo(parentForm).children(':first-child').text('');378 parentForm.children(':last-child').find('input').val('');379 $(this).removeClass('new_radio').addClass('remove_radio');380 $(this).html('<i class="fa fa-minus"></i>');381 });382 }383 var handleSaveForm = function() {384 $('body').on('click', '.continue, .NXT_save_form', function(event) {385 event.preventDefault();386 var name_form = $('input[name="name_form"]').val();387 var id_form = $('input[name="id_form"]').val();388 if (name_form == '' && id_form == '') {389 $('#name_form').modal('show');390 return false;391 } else {392 var form_frontend = handleAnalyzeForm();393 var trimForm = form_frontend.trim();394 if (trimForm == '') {395 toastr.error('Hãy thiết kế form trước khi lưu.');396 $('.NXT_progress').slideUp();397 return false;398 } else {399 var form_backend = handleFormBackEnd();400 var form_modal_backend = handleFormModalBackEnd();401 if (id_form == '') {402 var result = handleSaveFormToData(form_backend, form_modal_backend, form_frontend, name_form, null);403 } else {404 var result = handleSaveFormToData(form_backend, form_modal_backend, form_frontend, name_form, id_form);405 }406 if (result.status == true) {407 toastr.success(result.message);408 setTimeout(function() {409 if ($(this).attr('data-continue') != undefined && $(this).attr('data-continue') == 'slidelist') {410 location.reload();411 } else {412 location.href = '/template-customForm-listForm-lang-' + lang;413 }414 }, 3000);415 }416 }417 }418 });419 }420 var handleFormBackEnd = function() {421 return $('body').find('#NXT_sortable').children('ul').html().toString();422 }423 var handleFormModalBackEnd = function() {424 return $('body').find('#NXT_modal_clone').html().toString();425 }426 var handleAnalyzeForm = function() {427 //Clone428 var nxt_clone = $('body').find('#NXT_tmp_clone_form_basic');429 nxt_clone.empty();430 $('#NXT_ul').clone().appendTo("#NXT_tmp_clone_form_basic");431 //remove all parent432 var allItem = $('#NXT_tmp_clone_form_basic').children(':first-child').find('.borderInput');433 allItem.find('.removeNXT').remove();434 $('.NXT_progress').slideDown();435 for (var i = 0; i <= 100; i++) {436 $('.NXT_progress').children('div').attr('aria-valuenow', i).text(i + '%').css({437 width: i + '%',438 });439 allItem.find('input,textarea,select,button').unwrap().removeAttr('class');440 };441 //Process name442 var all_after_clone = $('#NXT_tmp_clone_form_basic').find('input,select,textarea');443 var all_after_clone_button = $('#NXT_tmp_clone_form_basic').find('button');444 all_after_clone_button.each(function(k, v) {445 var tmp_type = $(this).attr('data-type');446 $(this).removeAttr('data-type');447 $(this).attr('type', tmp_type);448 });449 var data_name = [];450 all_after_clone.each(function(k, v) {451 $(this).removeAttr('style');452 var tmp_name = $(this).attr('name');453 if ($.inArray(tmp_name, data_name) == -1) {454 data_name.push(tmp_name);455 } else {456 var tmp_name_new = $(this).attr('name') + '_' + k;457 $(this).attr('name', tmp_name_new);458 data_name.push(tmp_name_new);459 }460 });461 var all_after_clone_label = $('#NXT_tmp_clone_form_basic').find('label');462 all_after_clone_label.each(function(k, v) {463 if ($(this).next().is('label') != true) {464 var tmp_name_label = $(this).next().attr('name');465 var tmp_text_label = $(this).text();466 arrayTitleField.push(tmp_text_label);467 arrayNameField.push(tmp_name_label);468 }469 });470 console.log(arrayTitleField);471 console.log(arrayNameField);472 return $('#NXT_tmp_clone_form_basic').children('ul').html().toString();473 }474 var handleSaveFormToData = function(form_backend, modal_backend, form_frontend, title, id) {475 var dataString = {476 'id': id,477 'title': title,478 'form_backend': form_backend,479 'modal_backend': modal_backend,480 'form_frontend': form_frontend,481 'arrayTitleField': arrayTitleField,482 'arrayNameField': arrayNameField,483 };484 var urlSend = '/template-customForm-saveForm';485 var data = ajax_global(dataString, urlSend, 'POST', 'json');486 return data;487 }488 var array2json = function(arr) {489 var parts = [];490 var is_list = (Object.prototype.toString.apply(arr) === '[object Array]');491 for (var key in arr) {492 var value = arr[key];493 if (typeof value == "object") { //Custom handling for arrays494 if (is_list) parts.push(array2json(value)); /* :RECURSION: */495 else parts.push('"' + key + '":' + array2json(value)); /* :RECURSION: */496 //else parts[key] = array2json(value); /* :RECURSION: */497 } else {498 var str = "";499 if (!is_list) str = '"' + key + '":';500 //Custom handling for multiple data types501 if (typeof value == "number") str += value; //Numbers502 else if (value === false) str += 'false'; //The booleans503 else if (value === true) str += 'true';504 else str += '"' + value + '"'; //All other things505 // :TODO: Is there any more datatype we should be in the lookout for? (Functions?)506 parts.push(str);507 }508 }509 var json = parts.join(",");510 if (is_list) return '[' + json + ']'; //Return numerical JSON511 return '{' + json + '}'; //Return associative JSON512 }513 return {514 //main function to initiate the module515 init: function() {516 handleOnload();517 handleDrag();518 handleRemove();519 handleSetting();520 handleSaveEditInput();521 handleRemoveSelect();522 handleNewSelect();523 handleNewCheckbox();524 handleRemoveCheckbox();525 handleNewRadio();526 handleRemoveRadio();527 handleNewButton();528 handleRemoveButton();529 handleSaveForm();530 handleFixAutoVal();531 }532 };...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1/**2 * WordPress dependencies3 */4/**5 * Internal dependencies6 */7import checkCoreBlock from '../check-core-block';8import getIcon from '../../utils/get-icon';9import InputDrag from '../../components/input-drag';10import ResponsiveTabPanel from '../../components/responsive-tab-panel';11import ActiveIndicator from '../../components/active-indicator';12const { merge, cloneDeep } = window.lodash;13const { __ } = wp.i18n;14const {15 applyFilters,16 addFilter,17} = wp.hooks;18const {19 Component,20 Fragment,21} = wp.element;22const {23 createHigherOrderComponent,24} = wp.compose;25const { InspectorControls } = wp.blockEditor;26const {27 BaseControl,28 PanelBody,29 CheckboxControl,30} = wp.components;31const {32 GHOSTKIT,33 ghostkitVariables,34} = window;35let initialOpenPanel = false;36/**37 * Spacings Component.38 */39class SpacingsComponent extends Component {40 constructor( props ) {41 super( props );42 this.updateSpacings = this.updateSpacings.bind( this );43 this.getCurrentSpacing = this.getCurrentSpacing.bind( this );44 }45 componentDidMount() {46 const {47 attributes,48 setAttributes,49 } = this.props;50 const {51 ghostkitIndents = {},52 ghostkitSpacings = {},53 } = attributes;54 // since Indents renamed to Spacings we need to migrate it.55 if ( 0 < Object.keys( ghostkitIndents ).length && 0 === Object.keys( ghostkitSpacings ).length ) {56 setAttributes( {57 ghostkitIndents: {},58 ghostkitSpacings: ghostkitIndents,59 } );60 }61 }62 /**63 * Get current spacing for selected device type.64 *65 * @param {String} name - name of spacing.66 * @param {String} device - spacing for device.67 *68 * @returns {String} spacing value.69 */70 getCurrentSpacing( name, device ) {71 const { ghostkitSpacings = {} } = this.props.attributes;72 let result = '';73 if ( ! device ) {74 if ( ghostkitSpacings[ name ] ) {75 result = ghostkitSpacings[ name ];76 }77 } else if ( ghostkitSpacings[ device ] && ghostkitSpacings[ device ][ name ] ) {78 result = ghostkitSpacings[ device ][ name ];79 }80 return result;81 }82 /**83 * Update spacings object.84 *85 * @param {String} name - name of new spacing.86 * @param {String} val - value for new spacing.87 * @param {String} device - spacing for device.88 */89 updateSpacings( name, val, device ) {90 const { setAttributes } = this.props;91 let { ghostkitSpacings = {} } = this.props.attributes;92 const result = {};93 const newSpacings = {};94 if ( device ) {95 newSpacings[ device ] = {};96 newSpacings[ device ][ name ] = val;97 } else {98 newSpacings[ name ] = val;99 }100 // add default properties to keep sorting.101 ghostkitSpacings = merge( {102 media_xl: {},103 media_lg: {},104 media_md: {},105 media_sm: {},106 }, ghostkitSpacings, newSpacings );107 // validate values.108 Object.keys( ghostkitSpacings ).forEach( ( key ) => {109 if ( ghostkitSpacings[ key ] ) {110 // check if device object.111 if ( 'object' === typeof ghostkitSpacings[ key ] ) {112 Object.keys( ghostkitSpacings[ key ] ).forEach( ( keyDevice ) => {113 if ( ghostkitSpacings[ key ][ keyDevice ] ) {114 if ( ! result[ key ] ) {115 result[ key ] = {};116 }117 result[ key ][ keyDevice ] = ghostkitSpacings[ key ][ keyDevice ];118 }119 } );120 } else {121 result[ key ] = ghostkitSpacings[ key ];122 }123 }124 } );125 setAttributes( {126 ghostkitSpacings: Object.keys( result ).length ? result : '',127 } );128 }129 render() {130 const { props } = this;131 let allow = false;132 const {133 ghostkitSpacings,134 } = props.attributes;135 if ( GHOSTKIT.hasBlockSupport( props.name, 'spacings', false ) || GHOSTKIT.hasBlockSupport( props.name, 'indents', false ) ) {136 allow = true;137 }138 if ( ! allow ) {139 allow = checkCoreBlock( props.name );140 allow = applyFilters(141 'ghostkit.blocks.allowSpacings',142 allow,143 props,144 props.name145 );146 allow = applyFilters(147 'ghostkit.blocks.allowIndents',148 allow,149 props,150 props.name151 );152 }153 if ( ! allow ) {154 return null;155 }156 const filledTabs = {};157 const allSpacings = [158 'marginLeft',159 'marginTop',160 'marginRight',161 'marginBottom',162 'paddingLeft',163 'paddingTop',164 'paddingRight',165 'paddingBottom',166 ];167 if ( ghostkitVariables && ghostkitVariables.media_sizes && Object.keys( ghostkitVariables.media_sizes ).length ) {168 [169 'all',170 ...Object.keys( ghostkitVariables.media_sizes ),171 ].forEach( ( media ) => {172 filledTabs[ media ] = false;173 allSpacings.forEach( ( spacing ) => {174 if ( this.getCurrentSpacing( spacing, 'all' !== media ? `media_${ media }` : '' ) ) {175 filledTabs[ media ] = true;176 }177 } );178 } );179 }180 // add new spacings controls.181 return (182 <InspectorControls>183 <PanelBody184 title={ (185 <Fragment>186 <span className="ghostkit-ext-icon">187 { getIcon( 'extension-spacings' ) }188 </span>189 <span>{ __( 'Spacings', 'ghostkit' ) }</span>190 { ghostkitSpacings && Object.keys( ghostkitSpacings ).length ? (191 <ActiveIndicator />192 ) : '' }193 </Fragment>194 ) }195 initialOpen={ initialOpenPanel }196 onToggle={ () => {197 initialOpenPanel = ! initialOpenPanel;198 } }199 >200 <ResponsiveTabPanel filledTabs={ filledTabs }>201 {202 ( tabData ) => {203 let device = '';204 if ( 'all' !== tabData.name ) {205 device = `media_${ tabData.name }`;206 }207 return (208 <Fragment>209 <BaseControl className="ghostkit-control-spacing">210 { getIcon( 'icon-box' ) }211 <div className="ghostkit-control-spacing-margin">212 <span>{ __( 'Margin', 'ghostkit' ) }</span>213 <div className="ghostkit-control-spacing-margin-left">214 <InputDrag215 value={ this.getCurrentSpacing( 'marginLeft', device ) }216 placeholder="-"217 onChange={ ( nextValue ) => this.updateSpacings( 'marginLeft', nextValue, device ) }218 autoComplete="off"219 />220 </div>221 <div className="ghostkit-control-spacing-margin-top">222 <InputDrag223 value={ this.getCurrentSpacing( 'marginTop', device ) }224 placeholder="-"225 onChange={ ( nextValue ) => this.updateSpacings( 'marginTop', nextValue, device ) }226 autoComplete="off"227 />228 </div>229 <div className="ghostkit-control-spacing-margin-right">230 <InputDrag231 value={ this.getCurrentSpacing( 'marginRight', device ) }232 placeholder="-"233 onChange={ ( nextValue ) => this.updateSpacings( 'marginRight', nextValue, device ) }234 autoComplete="off"235 />236 </div>237 <div className="ghostkit-control-spacing-margin-bottom">238 <InputDrag239 value={ this.getCurrentSpacing( 'marginBottom', device ) }240 placeholder="-"241 onChange={ ( nextValue ) => this.updateSpacings( 'marginBottom', nextValue, device ) }242 autoComplete="off"243 />244 </div>245 </div>246 <div className="ghostkit-control-spacing-padding">247 <span>{ __( 'Padding', 'ghostkit' ) }</span>248 <div className="ghostkit-control-spacing-padding-left">249 <InputDrag250 value={ this.getCurrentSpacing( 'paddingLeft', device ) }251 placeholder="-"252 onChange={ ( nextValue ) => this.updateSpacings( 'paddingLeft', nextValue, device ) }253 autoComplete="off"254 />255 </div>256 <div className="ghostkit-control-spacing-padding-top">257 <InputDrag258 value={ this.getCurrentSpacing( 'paddingTop', device ) }259 placeholder="-"260 onChange={ ( nextValue ) => this.updateSpacings( 'paddingTop', nextValue, device ) }261 autoComplete="off"262 />263 </div>264 <div className="ghostkit-control-spacing-padding-right">265 <InputDrag266 value={ this.getCurrentSpacing( 'paddingRight', device ) }267 placeholder="-"268 onChange={ ( nextValue ) => this.updateSpacings( 'paddingRight', nextValue, device ) }269 autoComplete="off"270 />271 </div>272 <div className="ghostkit-control-spacing-padding-bottom">273 <InputDrag274 value={ this.getCurrentSpacing( 'paddingBottom', device ) }275 placeholder="-"276 onChange={ ( nextValue ) => this.updateSpacings( 'paddingBottom', nextValue, device ) }277 autoComplete="off"278 />279 </div>280 </div>281 <div className="ghostkit-control-spacing-important">282 <CheckboxControl283 label="!important"284 checked={ !! this.getCurrentSpacing( '!important', device ) }285 onChange={ ( nextValue ) => this.updateSpacings( '!important', nextValue, device ) }286 />287 </div>288 </BaseControl>289 </Fragment>290 );291 }292 }293 </ResponsiveTabPanel>294 </PanelBody>295 </InspectorControls>296 );297 }298}299/**300 * Allow custom styles in blocks.301 *302 * @param {Boolean} allow Original block allow custom styles.303 * @param {Object} settings Original block settings.304 *305 * @return {Object} Filtered block settings.306 */307function allowCustomStyles( allow, settings ) {308 if ( GHOSTKIT.hasBlockSupport( settings, 'spacings', false ) || GHOSTKIT.hasBlockSupport( settings, 'indents', false ) ) {309 allow = true;310 }311 if ( ! allow ) {312 allow = checkCoreBlock( settings.name );313 allow = applyFilters(314 'ghostkit.blocks.allowSpacings',315 allow,316 settings,317 settings.name318 );319 allow = applyFilters(320 'ghostkit.blocks.allowIndents',321 allow,322 settings,323 settings.name324 );325 }326 return allow;327}328/**329 * Extend ghostkit block attributes with spacings.330 *331 * @param {Object} settings Original block settings.332 *333 * @return {Object} Filtered block settings.334 */335function addAttribute( settings ) {336 let allow = false;337 if ( GHOSTKIT.hasBlockSupport( settings, 'spacings', false ) || GHOSTKIT.hasBlockSupport( settings, 'indents', false ) ) {338 allow = true;339 }340 if ( ! allow ) {341 allow = checkCoreBlock( settings.name );342 allow = applyFilters(343 'ghostkit.blocks.allowSpacings',344 allow,345 settings,346 settings.name347 );348 allow = applyFilters(349 'ghostkit.blocks.allowIndents',350 allow,351 settings,352 settings.name353 );354 }355 if ( allow ) {356 if ( ! settings.attributes.ghostkitSpacings ) {357 settings.attributes.ghostkitSpacings = {358 type: 'object',359 default: '',360 };361 // add to deprecated items.362 if ( settings.deprecated && settings.deprecated.length ) {363 settings.deprecated.forEach( ( item, i ) => {364 if ( settings.deprecated[ i ].attributes ) {365 settings.deprecated[ i ].attributes.ghostkitSpacings = settings.attributes.ghostkitSpacings;366 }367 } );368 }369 }370 if ( ! settings.attributes.ghostkitIndents ) {371 settings.attributes.ghostkitIndents = {372 type: 'object',373 default: '',374 };375 // add to deprecated items.376 if ( settings.deprecated && settings.deprecated.length ) {377 settings.deprecated.forEach( ( item, i ) => {378 if ( settings.deprecated[ i ].attributes ) {379 settings.deprecated[ i ].attributes.ghostkitIndents = settings.attributes.ghostkitIndents;380 }381 } );382 }383 }384 }385 return settings;386}387/**388 * Override the default edit UI to include a new block inspector control for389 * assigning the custom spacings if needed.390 *391 * @param {function|Component} BlockEdit Original component.392 *393 * @return {string} Wrapped component.394 */395const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => function( props ) {396 return (397 <Fragment>398 <BlockEdit { ...props } />399 <SpacingsComponent { ...props } />400 </Fragment>401 );402}, 'withInspectorControl' );403/**404 * Add custom styles to element in editor.405 *406 * @param {Object} customStyles Additional element styles object.407 * @param {Object} props Element props.408 *409 * @return {Object} Additional element styles object.410 */411function addEditorCustomStyles( customStyles, props ) {412 let customSpacings = props.attributes.ghostkitSpacings && 0 !== Object.keys( props.attributes.ghostkitSpacings ).length ? cloneDeep( props.attributes.ghostkitSpacings ) : false;413 // prepare !important tag.414 // validate values.415 const result = {};416 Object.keys( customSpacings ).forEach( ( key ) => {417 if ( customSpacings[ key ] && '!important' !== key ) {418 // check if device object.419 if ( 'object' === typeof customSpacings[ key ] ) {420 Object.keys( customSpacings[ key ] ).forEach( ( keyDevice ) => {421 if ( customSpacings[ key ][ keyDevice ] && '!important' !== keyDevice ) {422 if ( ! result[ key ] ) {423 result[ key ] = {};424 }425 result[ key ][ keyDevice ] = customSpacings[ key ][ keyDevice ] + ( customSpacings[ key ][ '!important' ] ? ' !important' : '' );426 }427 } );428 } else {429 result[ key ] = customSpacings[ key ] + ( customSpacings[ '!important' ] ? ' !important' : '' );430 }431 }432 } );433 customSpacings = 0 !== Object.keys( result ).length ? result : false;434 if ( customStyles && customSpacings ) {435 customStyles = merge( customStyles, customSpacings );436 }437 return customStyles;438}439// Init filters.440addFilter( 'ghostkit.blocks.allowCustomStyles', 'ghostkit/spacings/allow-custom-styles', allowCustomStyles );441addFilter( 'ghostkit.blocks.withCustomStyles', 'ghostkit/spacings/additional-attributes', addAttribute );442addFilter( 'ghostkit.blocks.customStyles', 'ghostkit/spacings/editor-custom-styles', addEditorCustomStyles );...

Full Screen

Full Screen

dragImage.js

Source:dragImage.js Github

copy

Full Screen

1var cambio = false;2var valPrima;3var ci = false;4$(document).ready(function(){5 let fileListEmpty = document.getElementById('lab4').files;6 7 for(let a = 1; a<=4; a++){8 let dropzone = document.getElementById('dropzone'+a);9 let lab = document.getElementById('lab'+a);10 let xSign = document.getElementById('sign'+a);11 12 dropzone.ondragover = function(){13 DataTransfer.dropEffect = 'copy';14 15 if(this.className !== 'dropzone full'){16 this.className = 'dropzone dragover';17 }18 return false;19 };20 dropzone.ondragleave = function(){21 if(this.className !== 'dropzone full'){22 this.className = 'dropzone';23 }24 return false;25 };26 dropzone.ondrop = function(e){27 e.preventDefault();28 29 this.className = 'dropzone'; 30 let fotoDrag = e.dataTransfer.files; 31 mostraDrag(fotoDrag);32 };33 34 lab.onchange = function(){35 if(cambio === false){36 let subId = this.id.substring(3, 4);37 $('#dropzone'+subId).attr('class','dropzone');38 let valore;39 40 if(this.files.length === fileListEmpty.length){41 valore = valPrima;42 }43 else{44 valore = this.files;45 cambio = true;46 this.files = fileListEmpty;47 cambio = false; 48 } 49 mostraDrag(valore);50 } 51 };52 53 lab.onclick = function(e){54 if(ci === true){55 e.preventDefault();56 ci = false;57 }58 else{ 59 valPrima = this.files;60 }61 };62 63 xSign.onclick = function(){64 ci = true;65 let subIdString = this.id.substring(4, 5);66 let subId = parseInt(subIdString); 67 68 for(let a = subId; a <= 4; a++){69 if(a !== 4){70 if($('#sign'+(1+a)).css('display') === 'block'){71 let img = $('#dropzone'+(1+a)).css('backgroundImage');72 $('#dropzone'+a).css('backgroundImage',img);73 74 let file = document.getElementById('lab'+(1+a)).files;75 cambio = true;76 document.getElementById('lab'+a).files = file;77 cambio = false;78 }79 else{80 $('#sign'+a).css('display','none');81 $('#dropzone'+a).attr('class','dropzone');82 $('#dropzone'+a).css('backgroundImage','url()');83 cambio = true;84 document.getElementById('lab'+a).files = fileListEmpty;85 cambio = false;86 break;87 }88 }89 else{90 $('#sign4').css('display','none');91 $('#dropzone4').attr('class','dropzone');92 $('#dropzone4').css('backgroundImage','url()');93 cambio = true;94 document.getElementById('lab4').files = fileListEmpty;95 cambio = false;96 }97 }98 };99 100 xSign.onmouseover = function(){101 this.style.border = '2px solid grey';102 };103 104 xSign.onmouseleave = function(){105 this.style.border = '0px solid grey';106 };107 }108});109function mostraDrag(foto){110 let formData = new FormData();111 formData.append('file[]', foto[0]);112 113 $.ajax({114 url: 'Resources/php/esitoDragFoto.php', method: 'POST', data: formData, processData: false, contentType: false, cache: false, success:115 116 function(response){117 let labDrag = $('.dropzone');118 let inputDrag = $('.inputfile');119 if(response === 'errorType'){120 $('#checkType').html("<img src='Resources/Images/smallWarning.png' style='vertical-align:top'> Puoi inserire solo immagini");121 for(let b = 0; b < labDrag.length; b++){122 if(inputDrag[b].files.length > 0){123 labDrag[b].className = 'dropzone full';124 }125 }126 }127 else{ 128 for(let b = 0; b < labDrag.length; b++){129 if(labDrag[b].className === 'dropzone'){130 labDrag[b].style.backgroundImage = 'url(data:image;base64,'+response+')';131 labDrag[b].className = 'dropzone full';132 133 let c = b + 1;134 $('#sign'+c).css('display','block'); 135 136 cambio = true;137 inputDrag[b].files = foto;138 cambio = false;139 140 break;141 }142 } 143 }144 }145 });...

Full Screen

Full Screen

dragMenuImage.js

Source:dragMenuImage.js Github

copy

Full Screen

1var cambio = false;2var valPrima;3var click = false;4$(document).ready(function(){5 let fileListEmpty = document.getElementById('lab1').files;6 7 let dropzone = document.getElementById('dropzone1');8 let lab = document.getElementById('lab1');9 let xSign = document.getElementById('sign1');10 11 dropzone.ondragover = function(){12 DataTransfer.dropEffect = 'copy';13 14 if(this.className !== 'dropzone full'){15 this.className = 'dropzone dragover';16 }17 return false;18 };19 dropzone.ondragleave = function(){20 if(this.className !== 'dropzone full'){21 this.className = 'dropzone';22 }23 return false;24 };25 dropzone.ondrop = function(e){26 e.preventDefault();27 28 this.className = 'dropzone'; 29 let fotoDrag = e.dataTransfer.files; 30 mostraDrag(fotoDrag);31 };32 33 lab.onchange = function(){34 if(cambio === false){35 $('#dropzone1').attr('class','dropzone');36 let valore;37 38 if(this.files.length === fileListEmpty.length){39 valore = valPrima;40 }41 else{42 valore = this.files;43 cambio = true;44 this.files = fileListEmpty;45 cambio = false; 46 } 47 mostraDrag(valore);48 } 49 };50 51 lab.onclick = function(e){52 if(click === true){53 e.preventDefault();54 click = false;55 }56 else{ 57 valPrima = this.files;58 }59 };60 61 xSign.onclick = function(){62 click = true; 63 64 $('#sign1').css('display','none');65 $('#dropzone1').attr('class','dropzone');66 $('#dropzone1').css('backgroundImage','url()');67 cambio = true;68 document.getElementById('lab1').files = fileListEmpty;69 cambio = false;70 };71 72 xSign.onmouseover = function(){73 this.style.border = '2px solid grey';74 };75 76 xSign.onmouseleave = function(){77 this.style.border = '0px solid grey';78 };79});80function mostraDrag(foto){81 let formData = new FormData();82 formData.append('file[]', foto[0]);83 84 $.ajax({85 url: 'Resources/php/esitoDragFoto.php', method: 'POST', data: formData, processData: false, contentType: false, cache: false, success:86 87 function(response){88 let inputDrag = document.getElementById('lab1');89 if(response === 'errorType'){90 $('#redFoto').css('background-color','red');91 if(inputDrag.files.length > 0){92 $('#dropzone1').attr('class','dropzone full');93 }94 }95 else{ 96 $('#dropzone1').css('background-image','url(data:image;base64,'+response+')');97 $('#dropzone1').attr('class','dropzone full');98 99 $('#sign1').css('display','block'); 100 101 $('#redFoto').css('background-color','white');102 103 cambio = true;104 inputDrag.files = foto;105 cambio = false; 106 }107 }108 });...

Full Screen

Full Screen

daysItem.js

Source:daysItem.js Github

copy

Full Screen

1import React, { useState, useEffect } from 'react'2import InputDrag from '../UI/inputDrag/inputDrag'3import './daysItem.css'4export default function DaysItem({ board, role }) {5 const [arrActions, setarrActions] = useState(board.Actions)6 const addItem = () => {7 const newActions = arrActions;8 while (newActions.length < 5) {9 newActions.push({ Id:0,Description: '', Name: '', TimeOfAction: '' });10 11 }12 setarrActions(newActions);13 }14 useEffect(() => {15 addItem()16 }, [])17 return (18 <div className='days'>19 <div className='days__tittle'>20 <p>{board.Date}</p>21 <p>{board.DayOfWeek.toUpperCase()}</p>22 </div>23 <div24 className='days__inputs'>25 {26 arrActions.map(item => (27 <InputDrag28 DayId={board.TripDayId}29 key={item?.id}30 name={item.Name}31 timeAction={item.TimeOfAction}32 comm={item.Description}33 quiz={item.Poll}34 id={item.Id}35 role={role}36 day={board.Date}37 dayWeek={board.DayOfWeek}38 />39 ))40 }41 </div>42 </div>43 )...

Full Screen

Full Screen

drag_drop.js

Source:drag_drop.js Github

copy

Full Screen

1Vue.component('drag-drop-area', {2 data() {3 return {4 dragging: false5 }6 },7 template:8 `<div class="drag-area p-4" :class="{active: dragging}" @drop.prevent="drop_file" @dragover.prevent="drag_feedback" @dragleave.prevent="dragleave_feedback">9 <input type="file" ref="inputDrag" @change="click_input" hidden>10 <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>11 <header v-if="!dragging">Drag & Drop to Upload File</header>12 <header v-else>Release to Upload File</header>13 <span>OR</span>14 <button type="button" class="btn btn-dark" v-on:click="browse_button">Browse File</button>15 </div>`,16 methods:{17 // browse file button v-on:click="browse_button"18 browse_button (){19 this.$refs.inputDrag.click();20 },21 // select local image from pc and upload22 click_input (event) {23 file = event.target.files[0];24 this.$parent.upload_image(file);25 },26 // Drag and drop file27 drop_file(e) {28 let droppedFiles = e.dataTransfer.files;29 if(!droppedFiles) return;30 this.$parent.upload_image(droppedFiles[0]);31 },32 // give visual feedback for drag action33 drag_feedback(){34 this.dragging = true;35 },36 // give visual feedback for dragleave action37 dragleave_feedback(){38 this.dragging = false;39 }40 } ...

Full Screen

Full Screen

script.js

Source:script.js Github

copy

Full Screen

1// const axios = require("axios");2document.addEventListener(3 "DOMContentLoaded",4 () => {5 console.log("IronGenerator JS imported successfully!");6 },7 false8);9var dragposition = "";10$(".drag2").draggable({11 // other options...12 drag: function(event, ui) {13 dragposition = ui.position;14 },15 stop: (event, ui) => {16 let peopleId = $(event.target).attr("id");17 let xvalue = ui.position.left;18 let yvalue = ui.position.top;19 console.log("This is the", ui.position);20 axios.post(`/add-point/${peopleId}`, { xvalue, yvalue });21 ///ask axios to storelocation22 }23});24$(".drag").draggable({25 // other options...26 drag: function(event, ui) {27 dragposition = ui.position;28 },29 stop: (event, ui) => {30 let commentId = $(event.target).attr("id");31 console.log(event.target.id);32 let xvalue = ui.position.left;33 let yvalue = ui.position.top;34 console.log("This is the", ui.position);35 axios.post(`/add-point-comment/${commentId}`, { xvalue, yvalue });36 ///ask axios to storelocation37 }38});39var inputdrag =40 '<input type="hidden" id="dragposition" value="' +41 dragposition.left +42 "," +43 dragposition.top +44 '"/>';...

Full Screen

Full Screen

selectors.js

Source:selectors.js Github

copy

Full Screen

1/**2 * Internal dependencies3 */4import ApplyFilters from '../../../components/apply-filters';5import CodeEditor from '../../../components/code-editor';6import ColorPicker from '../../../components/color-picker';7import IconPicker from '../../../components/icon-picker';8import ImagePicker from '../../../components/image-picker';9import InputDrag from '../../../components/input-drag';10import Modal from '../../../components/modal';11import RemoveButton from '../../../components/remove-button';12import ResponsiveTabPanel from '../../../components/responsive-tab-panel';13import URLPicker from '../../../components/url-picker';14import Typography from '../../../components/typography';15export function get() {16 return {17 ApplyFilters,18 CodeEditor,19 ColorPicker,20 IconPicker,21 ImagePicker,22 InputDrag,23 Modal,24 RemoveButton,25 ResponsiveTabPanel,26 URLPicker,27 Typography,28 };...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2const path = require('path');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click('input[name="q"]');8 await page.inputDrag('input[name="q"]', { steps: 10, delay: 100 });9 await page.fill('input[name="q"]', 'Playwright');10 await page.press('input[name="q"]', 'Enter');11 await page.screenshot({ path: path.join(__dirname, 'google-playwright.png') });12 await browser.close();13})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { inputDrag } = require('playwright/lib/input');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.click('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input');8 const element = await page.$('#tsf > div:nth-child(2) > div > div.RNNXgb > div > div.a4bIc > input');9 await inputDrag(page, element, { x: 100, y: 100 });10})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2const { inputDrag } = require('playwright/lib/input');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.waitForSelector('input[name="q"]');7 await page.focus('input[name="q"]');8 await inputDrag(page, { x: 100, y: 100 }, { x: 200, y: 200 });9 await page.keyboard.type('Hello World');10 await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const page = await browser.newPage();16 await page.waitForSelector('input[name="q"]');17 await page.focus('input[name="q"]');18 await page.mouse.move(100, 100);19 await page.mouse.down();20 await page.mouse.move(200, 200);21 await page.mouse.up();22 await page.keyboard.type('Hello World');23 await browser.close();24})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const inputDrag = require('@playwright/test/lib/internal/inputDrag');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.waitForSelector('#drag1');8 await inputDrag(page, '#drag1', 100, 100);9 await browser.close();10})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text=Docs');7 await page.click('text=Getting Started');8 await page.click('text=API Reference');9 await page.click('text=

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {inputDrag} = require('playwright/lib/internal/selectorPlaywright');2(async () => {3 const browser = await chromium.launch({headless: false});4 const page = await browser.newPage();5 await page.waitForTimeout(2000);6 await page.click('text="Run"');7 await page.waitForTimeout(2000);8 const frame = page.frame({name: 'iframeResult'});9 const element = await frame.$('#div1');10 await inputDrag(element, {x: 100, y: 0});11 await page.waitForTimeout(2000);12 await browser.close();13})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { inputDrag } = require('@playwright/test/lib/server/inputDrag');2const { inputDrag } = require('@playwright/test/lib/server/inputDrag');3const { inputDrag } = require('@playwright/test/lib/server/inputDrag');4const { inputDrag } = require('@playwright/test/lib/server/inputDrag');5const { inputDrag } = require('@playwright/test/lib/server/inputDrag');6const { inputDrag } = require('@playwright/test/lib/server/inputDrag');7const { inputDrag } = require('@playwright/test/lib/server/inputDrag');8const { inputDrag } = require('@playwright/test/lib/server/inputDrag');9const { inputDrag } = require('@playwright/test/lib/server/inputDrag');10const { inputDrag } = require('@playwright/test/lib/server/inputDrag');11const { inputDrag } = require('@playwright/test/lib/server/inputDrag');12const { inputDrag }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Input } = require('playwright/lib/input');2const input = new Input(page);3await input.inputDrag(x1, y1, x2, y2, options);4const { Input } = require('playwright/lib/input');5const input = new Input(page);6await input.inputDrag(x1, y1, x2, y2, options);7const { Input } = require('playwright/lib/input');8const input = new Input(page);9await input.inputDrag(x1, y1, x2, y2, options);10const { Input } = require('playwright/lib/input');11const input = new Input(page);12await input.inputDrag(x1, y1, x2, y2, options);13const { Input } = require('playwright/lib/input');14const input = new Input(page);15await input.inputDrag(x1, y1, x2, y2, options);16const { Input } = require('playwright/lib/input');17const input = new Input(page);18await input.inputDrag(x1, y1, x2, y2, options);19const { Input } = require('playwright/lib/input');20const input = new Input(page);21await input.inputDrag(x1, y1, x2, y2, options);22const { Input } = require('playwright/lib/input');23const input = new Input(page);24await input.inputDrag(x1, y1, x2, y2, options);25const { Input } = require('playwright/lib/input');26const input = new Input(page);27await input.inputDrag(x1, y1, x2, y2, options);28const { Input } = require('playwright/lib/input');29const input = new Input(page);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { inputDrag } = require('@playwright/test/lib/server/inputDrag');2module.exports = { 3}4const { test, expect } = require('@playwright/test');5const { inputDrag } = require('./test');6test('test', async ({ page }) => {7 await inputDrag(page, {x: 0, y: 0}, {x: 100, y: 100});8});9const { test, expect } = require("@playwright/test");10test("Drag and Drop", async ({ page }) => {

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