Edit File by line

/* global wpformsElementorVars, elementor, elementorFrontend */

[0] Fix | Delete

[1] Fix | Delete

'use strict';

[2] Fix | Delete

[3] Fix | Delete

/**

[4] Fix | Delete

* WPForms integration with Elementor in the editor.

[5] Fix | Delete

[6] Fix | Delete

* @since 1.6.0

[7] Fix | Delete

* @since 1.6.2 Moved frontend integration to `wpforms-elementor-frontend.js`

[8] Fix | Delete

[9] Fix | Delete

var WPFormsElementor = window.WPFormsElementor || ( function( document, window, $ ) {

[10] Fix | Delete

[11] Fix | Delete

/**

[12] Fix | Delete

* Runtime variables.

[13] Fix | Delete

[14] Fix | Delete

* @since 1.6.2

[15] Fix | Delete

[16] Fix | Delete

* @type {object}

[17] Fix | Delete

[18] Fix | Delete

var vars = {};

[19] Fix | Delete

[20] Fix | Delete

/**

[21] Fix | Delete

* Public functions and properties.

[22] Fix | Delete

[23] Fix | Delete

* @since 1.6.0

[24] Fix | Delete

[25] Fix | Delete

* @type {object}

[26] Fix | Delete

[27] Fix | Delete

var app = {

[28] Fix | Delete

[29] Fix | Delete

/**

[30] Fix | Delete

* Start the engine.

[31] Fix | Delete

[32] Fix | Delete

* @since 1.6.0

[33] Fix | Delete

[34] Fix | Delete

init: function() {

[35] Fix | Delete

[36] Fix | Delete

app.events();

[37] Fix | Delete

[38] Fix | Delete

[39] Fix | Delete

/**

[40] Fix | Delete

* Register JS events.

[41] Fix | Delete

[42] Fix | Delete

* @since 1.6.0

[43] Fix | Delete

[44] Fix | Delete

events: function() {

[45] Fix | Delete

[46] Fix | Delete

// Widget events.

[47] Fix | Delete

$( window ).on( 'elementor/frontend/init', function( event, id, instance ) {

[48] Fix | Delete

[49] Fix | Delete

// Widget buttons click.

[50] Fix | Delete

elementor.channels.editor.on( 'elementorWPFormsAddFormBtnClick', app.addFormBtnClick );

[51] Fix | Delete

[52] Fix | Delete

// Widget frontend events.

[53] Fix | Delete

elementorFrontend.hooks.addAction( 'frontend/element_ready/wpforms.default', app.widgetPreviewEvents );

[54] Fix | Delete

[55] Fix | Delete

// Initialize widget controls.

[56] Fix | Delete

elementor.hooks.addAction( 'panel/open_editor/widget/wpforms', app.widgetPanelOpen );

[57] Fix | Delete

[58] Fix | Delete

} );

[59] Fix | Delete

[60] Fix | Delete

[61] Fix | Delete

/**

[62] Fix | Delete

* Widget events.

[63] Fix | Delete

[64] Fix | Delete

* @since 1.6.2

[65] Fix | Delete

[66] Fix | Delete

* @param {jQuery} $scope The current element wrapped with jQuery.

[67] Fix | Delete

[68] Fix | Delete

widgetPreviewEvents: function( $scope ) {

[69] Fix | Delete

[70] Fix | Delete

$scope

[71] Fix | Delete

.on( 'click', '.wpforms-btn', app.addFormBtnClick )

[72] Fix | Delete

.on( 'click', '.wpforms-admin-no-forms-container a', app.clickLinkInPreview )

[73] Fix | Delete

.on( 'change', '.wpforms-elementor-form-selector select', app.selectFormInPreview )

[74] Fix | Delete

.on( 'click mousedown focus keydown submit', '.wpforms-container *', app.disableEvents )

[75] Fix | Delete

.on( 'click', '.wpforms-comprehensive-link', app.openComprehensiveLink );

[76] Fix | Delete

[77] Fix | Delete

app.updateSameForms( $scope );

[78] Fix | Delete

[79] Fix | Delete

[80] Fix | Delete

/**

[81] Fix | Delete

* Update all the same forms on the preview.

[82] Fix | Delete

[83] Fix | Delete

* @since 1.6.3

[84] Fix | Delete

[85] Fix | Delete

* @param {jQuery} $scope The current element wrapped with jQuery.

[86] Fix | Delete

[87] Fix | Delete

updateSameForms: function( $scope ) {

[88] Fix | Delete

[89] Fix | Delete

var elementId = $scope.data( 'id' ),

[90] Fix | Delete

$formContainer = $scope.find( '.wpforms-container' ),

[91] Fix | Delete

formContainerHtml = $formContainer.html(),

[92] Fix | Delete

formContainerId = $formContainer.attr( 'id' );

[93] Fix | Delete

[94] Fix | Delete

$scope

[95] Fix | Delete

.closest( '.elementor-editor-active' )

[96] Fix | Delete

.find( '.elementor-widget-wpforms:not(.elementor-element-' + elementId + ')' )

[97] Fix | Delete

.each( function() {

[98] Fix | Delete

[99] Fix | Delete

var $anotherFormContainer = $( this ).find( '.wpforms-container' );

[100] Fix | Delete

[101] Fix | Delete

if ( $anotherFormContainer.attr( 'id' ) === formContainerId ) {

[102] Fix | Delete

$anotherFormContainer.html( formContainerHtml );

[103] Fix | Delete

}

[104] Fix | Delete

} );

[105] Fix | Delete

[106] Fix | Delete

[107] Fix | Delete

/**

[108] Fix | Delete

* Initialize widget controls when widget is activated.

[109] Fix | Delete

[110] Fix | Delete

* @since 1.6.2

[111] Fix | Delete

[112] Fix | Delete

* @param {object} panel Panel object.

[113] Fix | Delete

* @param {object} model Model object.

[114] Fix | Delete

[115] Fix | Delete

widgetPanelOpen: function( panel, model ) {

[116] Fix | Delete

[117] Fix | Delete

vars.widgetId = model.attributes.id;

[118] Fix | Delete

vars.formId = model.attributes.settings.attributes.form_id;

[119] Fix | Delete

[120] Fix | Delete

app.widgetPanelInit( panel );

[121] Fix | Delete

[122] Fix | Delete

app.widgetPanelObserver.init( panel );

[123] Fix | Delete

[124] Fix | Delete

[125] Fix | Delete

/**

[126] Fix | Delete

* Initialize widget controls when widget is activated.

[127] Fix | Delete

[128] Fix | Delete

* @since 1.6.2

[129] Fix | Delete

[130] Fix | Delete

* @param {object} panel Panel object.

[131] Fix | Delete

[132] Fix | Delete

widgetPanelInit: function( panel ) {

[133] Fix | Delete

[134] Fix | Delete

var $formSelectControl = panel.$el.find( '.elementor-control.elementor-control-form_id' ),

[135] Fix | Delete

$formSelect = $formSelectControl.find( 'select' ),

[136] Fix | Delete

$addFormNoticeControl = panel.$el.find( '.elementor-control.elementor-control-add_form_notice' ),

[137] Fix | Delete

$testFormNoticeControl = panel.$el.find( '.elementor-control.elementor-control-test_form_notice' );

[138] Fix | Delete

[139] Fix | Delete

// Update form select options if it is available after adding the form.

[140] Fix | Delete

if ( vars.formSelectOptions ) {

[141] Fix | Delete

$formSelect.html( vars.formSelectOptions );

[142] Fix | Delete

}

[143] Fix | Delete

[144] Fix | Delete

// Update form select value.

[145] Fix | Delete

if ( vars.formId && vars.formId !== '' ) {

[146] Fix | Delete

$formSelect.val( vars.formId );

[147] Fix | Delete

}

[148] Fix | Delete

[149] Fix | Delete

// Hide not needed controls.

[150] Fix | Delete

if ( $formSelect.find( 'option' ).length > 0 ) {

[151] Fix | Delete

$addFormNoticeControl.hide();

[152] Fix | Delete

} else {

[153] Fix | Delete

$formSelectControl.hide();

[154] Fix | Delete

$testFormNoticeControl.hide();

[155] Fix | Delete

}

[156] Fix | Delete

[157] Fix | Delete

// Show needed controls.

[158] Fix | Delete

if ( parseInt( $formSelect.val(), 10 ) > 0 ) {

[159] Fix | Delete

$testFormNoticeControl.show();

[160] Fix | Delete

}

[161] Fix | Delete

[162] Fix | Delete

// Select form.

[163] Fix | Delete

panel.$el.find( '.elementor-control.elementor-control-form_id' ).on( 'change', 'select', function() {

[164] Fix | Delete

[165] Fix | Delete

// Update `vars.formId` to be able to restore selected value after options update.

[166] Fix | Delete

vars.formId = $( this ).val();

[167] Fix | Delete

} );

[168] Fix | Delete

[169] Fix | Delete

// Click on the `Edit the selected form` link.

[170] Fix | Delete

panel.$el.find( '.elementor-control.elementor-control-edit_form' ).on( 'click', 'a', app.editFormLinkClick );

[171] Fix | Delete

[172] Fix | Delete

[173] Fix | Delete

/**

[174] Fix | Delete

* The observer needed to re-init controls when the widget panel section and tabs switches.

[175] Fix | Delete

[176] Fix | Delete

* @since 1.6.3

[177] Fix | Delete

[178] Fix | Delete

* @member {object}

[179] Fix | Delete

[180] Fix | Delete

widgetPanelObserver: {

[181] Fix | Delete

[182] Fix | Delete

/**

[183] Fix | Delete

* Initialize observer.

[184] Fix | Delete

[185] Fix | Delete

* @since 1.6.3

[186] Fix | Delete

[187] Fix | Delete

* @param {object} panel Panel object.

[188] Fix | Delete

[189] Fix | Delete

init: function( panel ) {

[190] Fix | Delete

[191] Fix | Delete

// Skip if observer for current widget already initialized.

[192] Fix | Delete

if ( vars.observerWidgetId === vars.widgetId ) {

[193] Fix | Delete

return;

[194] Fix | Delete

}

[195] Fix | Delete

[196] Fix | Delete

// Disconnect previous widget observer.

[197] Fix | Delete

if ( typeof vars.observer !== 'undefined' && typeof vars.observer.disconnect === 'function' ) {

[198] Fix | Delete

vars.observer.disconnect();

[199] Fix | Delete

}

[200] Fix | Delete

[201] Fix | Delete

var obs = {

[202] Fix | Delete

targetNode : panel.$el.find( '#elementor-panel-content-wrapper' )[0],

[203] Fix | Delete

config : {

[204] Fix | Delete

childList: true,

[205] Fix | Delete

subtree: true,

[206] Fix | Delete

attributes: true,

[207] Fix | Delete

[208] Fix | Delete

};

[209] Fix | Delete

[210] Fix | Delete

app.widgetPanelObserver.panel = panel;

[211] Fix | Delete

[212] Fix | Delete

obs.observer = new MutationObserver( app.widgetPanelObserver.callback );

[213] Fix | Delete

obs.observer.observe( obs.targetNode, obs.config );

[214] Fix | Delete

[215] Fix | Delete

vars.observerWidgetId = vars.widgetId;

[216] Fix | Delete

vars.observer = obs.observer;

[217] Fix | Delete

[218] Fix | Delete

[219] Fix | Delete

/**

[220] Fix | Delete

* Observer callback.

[221] Fix | Delete

[222] Fix | Delete

* @since 1.6.3

[223] Fix | Delete

[224] Fix | Delete

* @param {Array} mutationsList Mutation list.

[225] Fix | Delete

[226] Fix | Delete

callback: function( mutationsList ) {

[227] Fix | Delete

[228] Fix | Delete

var mutation,

[229] Fix | Delete

quit = false;

[230] Fix | Delete

[231] Fix | Delete

for ( var i in mutationsList ) {

[232] Fix | Delete

mutation = mutationsList[ i ];

[233] Fix | Delete

[234] Fix | Delete

if ( mutation.type === 'childList' && mutation.addedNodes.length > 0 ) {

[235] Fix | Delete

quit = app.widgetPanelObserver.callbackMutationChildList( mutation );

[236] Fix | Delete

}

[237] Fix | Delete

[238] Fix | Delete

if ( mutation.type === 'attributes' ) {

[239] Fix | Delete

quit = app.widgetPanelObserver.callbackMutationAttributes( mutation );

[240] Fix | Delete

}

[241] Fix | Delete

[242] Fix | Delete

if ( quit ) {

[243] Fix | Delete

return;

[244] Fix | Delete

}

[245] Fix | Delete

}

[246] Fix | Delete

[247] Fix | Delete

[248] Fix | Delete

/**

[249] Fix | Delete

* Process 'childList' mutation.

[250] Fix | Delete

[251] Fix | Delete

* @since 1.6.3

[252] Fix | Delete

[253] Fix | Delete

* @param {MutationRecord} mutation Mutation record.

[254] Fix | Delete

[255] Fix | Delete

* @returns {boolean} True if detect needed node.

[256] Fix | Delete

[257] Fix | Delete

callbackMutationChildList: function( mutation ) {

[258] Fix | Delete

[259] Fix | Delete

var addedNodes = mutation.addedNodes || [],

[260] Fix | Delete

node;

[261] Fix | Delete

[262] Fix | Delete

for ( var n in addedNodes ) {

[263] Fix | Delete

node = addedNodes[ n ];

[264] Fix | Delete

[265] Fix | Delete

if ( node && node.classList && node.classList.contains( 'elementor-control-section_form' ) ) {

[266] Fix | Delete

app.widgetPanelInit( app.widgetPanelObserver.panel );

[267] Fix | Delete

return true;

[268] Fix | Delete

}

[269] Fix | Delete

}

[270] Fix | Delete

[271] Fix | Delete

return false;

[272] Fix | Delete

[273] Fix | Delete

[274] Fix | Delete

/**

[275] Fix | Delete

* Process 'attributes' mutation.

[276] Fix | Delete

[277] Fix | Delete

* @since 1.6.3

[278] Fix | Delete

[279] Fix | Delete

* @param {MutationRecord} mutation Mutation record.

[280] Fix | Delete

[281] Fix | Delete

* @returns {boolean} True if detect needed target.

[282] Fix | Delete

[283] Fix | Delete

callbackMutationAttributes: function( mutation ) {

[284] Fix | Delete

[285] Fix | Delete

if (

[286] Fix | Delete

mutation.target &&

[287] Fix | Delete

mutation.target.classList &&

[288] Fix | Delete

mutation.target.classList.contains( 'elementor-tab-control-content' )

[289] Fix | Delete

) {

[290] Fix | Delete

app.widgetPanelInit( app.widgetPanelObserver.panel );

[291] Fix | Delete

[292] Fix | Delete

return true;

[293] Fix | Delete

}

[294] Fix | Delete

[295] Fix | Delete

return false;

[296] Fix | Delete

[297] Fix | Delete

[298] Fix | Delete

[299] Fix | Delete

/**

[300] Fix | Delete

* Edit selected form button click event handler.

[301] Fix | Delete

[302] Fix | Delete

* @since 1.6.2

[303] Fix | Delete

[304] Fix | Delete

* @param {object} event Event object.

[305] Fix | Delete

[306] Fix | Delete

editFormLinkClick: function( event ) {

[307] Fix | Delete

[308] Fix | Delete

app.findFormSelector( event );

[309] Fix | Delete

app.openBuilderPopup( vars.$select.val() );

[310] Fix | Delete

[311] Fix | Delete

[312] Fix | Delete

/**

[313] Fix | Delete

* Add a new form button click event handler.

[314] Fix | Delete

[315] Fix | Delete

* @since 1.6.2

[316] Fix | Delete

[317] Fix | Delete

* @param {object} event Event object.

[318] Fix | Delete

[319] Fix | Delete

addFormBtnClick: function( event ) {

[320] Fix | Delete

[321] Fix | Delete

app.findFormSelector( event );

[322] Fix | Delete

app.openBuilderPopup( 0 );

[323] Fix | Delete

[324] Fix | Delete

[325] Fix | Delete

/**

[326] Fix | Delete

* Find and store the form selector control wrapped in jQuery object.

[327] Fix | Delete

[328] Fix | Delete

* @since 1.6.2

[329] Fix | Delete

[330] Fix | Delete

* @param {object} event Event object.

[331] Fix | Delete

[332] Fix | Delete

findFormSelector: function( event ) {

[333] Fix | Delete

[334] Fix | Delete

let view = elementor.getPanelView().getCurrentPageView();

[335] Fix | Delete

[336] Fix | Delete

// We need to be sure that we are on the widget Content section.

[337] Fix | Delete

if ( view.activeSection && view.activeSection !== 'section_form' ) {

[338] Fix | Delete

$( view.ui.tabs[0] ).trigger( 'click' );

[339] Fix | Delete

}

[340] Fix | Delete

[341] Fix | Delete

vars.$select = event && event.$el ?

[342] Fix | Delete

event.$el.closest( '#elementor-controls' ).find( 'select[data-setting="form_id"]' ) :

[343] Fix | Delete

window.parent.jQuery( '#elementor-controls select[data-setting="form_id"]' );

[344] Fix | Delete

[345] Fix | Delete

[346] Fix | Delete

/**

[347] Fix | Delete

* Preview: Form selector event handler.

[348] Fix | Delete

[349] Fix | Delete

* @since 1.6.2

[350] Fix | Delete

[351] Fix | Delete

selectFormInPreview: function() {

[352] Fix | Delete

[353] Fix | Delete

vars.formId = $( this ).val();

[354] Fix | Delete

[355] Fix | Delete

app.findFormSelector();

[356] Fix | Delete

[357] Fix | Delete

// To be sure, that both form selector selects are in sync.

[358] Fix | Delete

app.refreshFormsList( null, vars.formId );

[359] Fix | Delete

[360] Fix | Delete

[361] Fix | Delete

/**

[362] Fix | Delete

* Preview: Click on the link event handler.

[363] Fix | Delete

[364] Fix | Delete

* @since 1.6.2

[365] Fix | Delete

[366] Fix | Delete

* @param {object} event Event object.

[367] Fix | Delete

[368] Fix | Delete

clickLinkInPreview: function( event ) {

[369] Fix | Delete

[370] Fix | Delete

if ( event.target && event.target.href ) {

[371] Fix | Delete

window.open( event.target.href, '_blank', 'noopener,noreferrer' );

[372] Fix | Delete

}

[373] Fix | Delete

[374] Fix | Delete

[375] Fix | Delete

/**

[376] Fix | Delete

* Disable events.

[377] Fix | Delete

[378] Fix | Delete

* @since 1.6.2

[379] Fix | Delete

[380] Fix | Delete

* @param {object} event Event object.

[381] Fix | Delete

[382] Fix | Delete

* @returns {boolean} Always false.

[383] Fix | Delete

[384] Fix | Delete

disableEvents: function( event ) {

[385] Fix | Delete

[386] Fix | Delete

event.preventDefault();

[387] Fix | Delete

event.stopImmediatePropagation();

[388] Fix | Delete

[389] Fix | Delete

return false;

[390] Fix | Delete

[391] Fix | Delete

[392] Fix | Delete

/**

[393] Fix | Delete

* Open the compreshenvie guide link,

[394] Fix | Delete

* as elementor disables all links in the preview.

[395] Fix | Delete

[396] Fix | Delete

* @since 1.8.3

[397] Fix | Delete

[398] Fix | Delete

* @param {object} event Event object.

[399] Fix | Delete

[400] Fix | Delete

openComprehensiveLink: function( event ) {

[401] Fix | Delete

[402] Fix | Delete

const url = $( this ).attr( 'href' );

[403] Fix | Delete

[404] Fix | Delete

// Open the url in a new tab with JS bc elementor doesn't allow links in the preview.

[405] Fix | Delete

window.open( url, '_blank' ).focus();

[406] Fix | Delete

[407] Fix | Delete

[408] Fix | Delete

/**

[409] Fix | Delete

* Open builder popup.

[410] Fix | Delete

[411] Fix | Delete

* @since 1.6.2

[412] Fix | Delete

[413] Fix | Delete

* @param {number} formId Form id. 0 for create new form.

[414] Fix | Delete

[415] Fix | Delete

openBuilderPopup: function( formId ) {

[416] Fix | Delete

[417] Fix | Delete

formId = parseInt( formId || '0', 10 );

[418] Fix | Delete

[419] Fix | Delete

if ( ! vars.$popup ) {

[420] Fix | Delete

[421] Fix | Delete

// We need to add popup markup to the editor top document.

[422] Fix | Delete

var $elementor = window.parent.jQuery( '#elementor-editor-wrapper' ),

[423] Fix | Delete

popupTpl = wp.template( 'wpforms-builder-elementor-popup' );

[424] Fix | Delete

[425] Fix | Delete

$elementor.after( popupTpl() );

[426] Fix | Delete

vars.$popup = $elementor.siblings( '#wpforms-builder-elementor-popup' );

[427] Fix | Delete

}

[428] Fix | Delete

[429] Fix | Delete

var url = formId > 0 ? wpformsElementorVars.edit_form_url + formId : wpformsElementorVars.add_form_url,

[430] Fix | Delete

$iframe = vars.$popup.find( 'iframe' );

[431] Fix | Delete

[432] Fix | Delete

app.builderCloseButtonEvent();

[433] Fix | Delete

$iframe.attr( 'src', url );

[434] Fix | Delete

vars.$popup.fadeIn();

[435] Fix | Delete

[436] Fix | Delete

[437] Fix | Delete

/**

[438] Fix | Delete

* Close button (inside the form builder) click event.

[439] Fix | Delete

[440] Fix | Delete

* @since 1.6.2

[441] Fix | Delete

[442] Fix | Delete

builderCloseButtonEvent: function() {

[443] Fix | Delete

[444] Fix | Delete

vars.$popup

[445] Fix | Delete

.off( 'wpformsBuilderInPopupClose' )

[446] Fix | Delete

.on( 'wpformsBuilderInPopupClose', function( e, action, formId ) {

[447] Fix | Delete

[448] Fix | Delete

if ( action !== 'saved' || ! formId ) {

[449] Fix | Delete

return;

[450] Fix | Delete

}

[451] Fix | Delete

[452] Fix | Delete

app.refreshFormsList( null, formId );

[453] Fix | Delete

} );

[454] Fix | Delete

[455] Fix | Delete

[456] Fix | Delete

/**

[457] Fix | Delete

* Refresh forms list event handler.

[458] Fix | Delete

[459] Fix | Delete

* @since 1.6.2

[460] Fix | Delete

[461] Fix | Delete

* @param {object} event Event object.

[462] Fix | Delete

* @param {number} setFormId Set selected form to.

[463] Fix | Delete

[464] Fix | Delete

refreshFormsList: function( event, setFormId ) {

[465] Fix | Delete

[466] Fix | Delete

if ( event ) {

[467] Fix | Delete

event.preventDefault();

[468] Fix | Delete

}

[469] Fix | Delete

[470] Fix | Delete

app.findFormSelector();

[471] Fix | Delete

[472] Fix | Delete

var data = {

[473] Fix | Delete

action: 'wpforms_admin_get_form_selector_options',

[474] Fix | Delete

nonce : wpformsElementorVars.nonce,

[475] Fix | Delete

};

[476] Fix | Delete

[477] Fix | Delete

vars.$select.prop( 'disabled', true );

[478] Fix | Delete

[479] Fix | Delete

$.post( wpformsElementorVars.ajax_url, data )

[480] Fix | Delete

.done( function( response ) {

[481] Fix | Delete

[482] Fix | Delete

if ( ! response.success ) {

[483] Fix | Delete

app.debug( response );

[484] Fix | Delete

return;

[485] Fix | Delete

}

[486] Fix | Delete

[487] Fix | Delete

vars.formSelectOptions = response.data;

[488] Fix | Delete

vars.$select.html( response.data );

[489] Fix | Delete

[490] Fix | Delete

if ( setFormId ) {

[491] Fix | Delete

vars.formId = setFormId;

[492] Fix | Delete

}

[493] Fix | Delete

[494] Fix | Delete

if ( vars.formId && vars.formId !== '' ) {

[495] Fix | Delete

vars.$select.val( vars.formId ).trigger( 'change' );

[496] Fix | Delete

}

[497] Fix | Delete

} )

[498] Fix | Delete

.fail( function( xhr, textStatus ) {

[499] Fix | Delete