%PDF-
%PDF-
Mini Shell
Mini Shell
/* global wpformsElementorVars, elementor, elementorFrontend */
'use strict';
/**
* WPForms integration with Elementor in the editor.
*
* @since 1.6.0
* @since 1.6.2 Moved frontend integration to `wpforms-elementor-frontend.js`
*/
var WPFormsElementor = window.WPFormsElementor || ( function( document, window, $ ) {
/**
* Runtime variables.
*
* @since 1.6.2
*
* @type {object}
*/
var vars = {};
/**
* Public functions and properties.
*
* @since 1.6.0
*
* @type {object}
*/
var app = {
/**
* Start the engine.
*
* @since 1.6.0
*/
init: function() {
app.events();
},
/**
* Register JS events.
*
* @since 1.6.0
*/
events: function() {
// Widget events.
$( window ).on( 'elementor/frontend/init', function( event, id, instance ) {
// Widget buttons click.
elementor.channels.editor.on( 'elementorWPFormsAddFormBtnClick', app.addFormBtnClick );
// Widget frontend events.
elementorFrontend.hooks.addAction( 'frontend/element_ready/wpforms.default', app.widgetPreviewEvents );
// Initialize widget controls.
elementor.hooks.addAction( 'panel/open_editor/widget/wpforms', app.widgetPanelOpen );
// Initialize choiceJS.
elementorFrontend.hooks.addAction( 'frontend/element_ready/wpforms.default', app.loadChoicesJS );
} );
},
/**
* Init Modern style Dropdown fields (<select>) with choiceJS.
*
* @since 1.9.0
*
* @param {Object} $scope Elementor scope object.
*/
loadChoicesJS( $scope ) {
// Loads if function exists.
if ( typeof parent.Choices !== 'function' ) {
return;
}
const $elements = $scope.find( '.wpforms-field .choicesjs-select' );
const config = window.wpforms_choicesjs_config || {};
// Initialize ChoicesJS.
$elements.each( function( index, el ) {
if ( ! ( el instanceof parent.HTMLSelectElement ) ) {
return;
}
const $el = $( el );
if ( $el.data( 'choicesjs' ) ) {
return;
}
const $field = $el.closest( '.wpforms-field' );
config.callbackOnInit = function() {
const self = this,
$element = $( self.passedElement.element ),
$input = $( self.input.element ),
sizeClass = $element.data( 'size-class' );
// Add CSS-class for size.
if ( sizeClass ) {
$( self.containerOuter.element ).addClass( sizeClass );
}
/**
* If a multiple select has selected choices - hide a placeholder text.
* In case if select is empty - we return placeholder text.
*/
if ( $element.prop( 'multiple' ) ) {
// On init event.
$input.data( 'placeholder', $input.attr( 'placeholder' ) );
if ( self.getValue( true ).length ) {
$input.hide();
}
}
this.disable();
$field.find( '.is-disabled' ).removeClass( 'is-disabled' );
};
$el.data( 'choicesjs', new parent.Choices( el, config ) );
} );
},
/**
* Widget events.
*
* @since 1.6.2
*
* @param {jQuery} $scope The current element wrapped with jQuery.
*/
widgetPreviewEvents: function( $scope ) {
$scope
.on( 'click', '.wpforms-btn', app.addFormBtnClick )
.on( 'click', '.wpforms-admin-no-forms-container a', app.clickLinkInPreview )
.on( 'change', '.wpforms-elementor-form-selector select', app.selectFormInPreview )
.on( 'click mousedown focus keydown submit', '.wpforms-container *', app.disableEvents )
.on( 'click', '.wpforms-comprehensive-link', app.openComprehensiveLink );
app.updateSameForms( $scope );
},
/**
* Update all the same forms on the preview.
*
* @since 1.6.3
*
* @param {jQuery} $scope The current element wrapped with jQuery.
*/
updateSameForms: function( $scope ) {
var elementId = $scope.data( 'id' ),
$formContainer = $scope.find( '.wpforms-container' ),
formContainerHtml = $formContainer.html(),
formContainerId = $formContainer.attr( 'id' );
$scope
.closest( '.elementor-editor-active' )
.find( '.elementor-widget-wpforms:not(.elementor-element-' + elementId + ')' )
.each( function() {
var $anotherFormContainer = $( this ).find( '.wpforms-container' );
if ( $anotherFormContainer.attr( 'id' ) === formContainerId ) {
$anotherFormContainer.html( formContainerHtml );
}
} );
},
/**
* Initialize widget controls when widget is activated.
*
* @since 1.6.2
*
* @param {object} panel Panel object.
* @param {object} model Model object.
*/
widgetPanelOpen: function( panel, model ) {
vars.widgetId = model.attributes.id;
vars.formId = model.attributes.settings.attributes.form_id;
app.widgetPanelInit( panel );
app.widgetPanelObserver.init( panel );
},
/**
* Initialize widget controls when widget is activated.
*
* @since 1.6.2
*
* @param {object} panel Panel object.
*/
widgetPanelInit: function( panel ) {
var $formSelectControl = panel.$el.find( '.elementor-control.elementor-control-form_id' ),
$formSelect = $formSelectControl.find( 'select' ),
$addFormNoticeControl = panel.$el.find( '.elementor-control.elementor-control-add_form_notice' ),
$testFormNoticeControl = panel.$el.find( '.elementor-control.elementor-control-test_form_notice' );
// Update form select options if it is available after adding the form.
if ( vars.formSelectOptions ) {
$formSelect.html( vars.formSelectOptions );
}
// Update form select value.
if ( vars.formId && vars.formId !== '' ) {
$formSelect.val( vars.formId );
}
// Hide not needed controls.
if ( $formSelect.find( 'option' ).length > 0 ) {
$addFormNoticeControl.hide();
} else {
$formSelectControl.hide();
$testFormNoticeControl.hide();
}
// Show needed controls.
if ( parseInt( $formSelect.val(), 10 ) > 0 ) {
$testFormNoticeControl.show();
}
// Select form.
panel.$el.find( '.elementor-control.elementor-control-form_id' ).on( 'change', 'select', function() {
// Update `vars.formId` to be able to restore selected value after options update.
vars.formId = $( this ).val();
} );
// Click on the `Edit the selected form` link.
panel.$el.find( '.elementor-control.elementor-control-edit_form' ).on( 'click', 'a', app.editFormLinkClick );
},
/**
* The observer needed to re-init controls when the widget panel section and tabs switches.
*
* @since 1.6.3
*
* @member {object}
*/
widgetPanelObserver: {
/**
* Initialize observer.
*
* @since 1.6.3
*
* @param {object} panel Panel object.
*/
init: function( panel ) {
// Skip if observer for current widget already initialized.
if ( vars.observerWidgetId === vars.widgetId ) {
return;
}
// Disconnect previous widget observer.
if ( typeof vars.observer !== 'undefined' && typeof vars.observer.disconnect === 'function' ) {
vars.observer.disconnect();
}
var obs = {
targetNode : panel.$el.find( '#elementor-panel-content-wrapper' )[0],
config : {
childList: true,
subtree: true,
attributes: true,
},
};
app.widgetPanelObserver.panel = panel;
obs.observer = new MutationObserver( app.widgetPanelObserver.callback );
obs.observer.observe( obs.targetNode, obs.config );
vars.observerWidgetId = vars.widgetId;
vars.observer = obs.observer;
},
/**
* Observer callback.
*
* @since 1.6.3
*
* @param {Array} mutationsList Mutation list.
*/
callback: function( mutationsList ) {
var mutation,
quit = false;
for ( var i in mutationsList ) {
mutation = mutationsList[ i ];
if ( mutation.type === 'childList' && mutation.addedNodes.length > 0 ) {
quit = app.widgetPanelObserver.callbackMutationChildList( mutation );
}
if ( mutation.type === 'attributes' ) {
quit = app.widgetPanelObserver.callbackMutationAttributes( mutation );
}
if ( quit ) {
return;
}
}
},
/**
* Process 'childList' mutation.
*
* @since 1.6.3
*
* @param {MutationRecord} mutation Mutation record.
*
* @returns {boolean} True if detect needed node.
*/
callbackMutationChildList: function( mutation ) {
var addedNodes = mutation.addedNodes || [],
node;
for ( var n in addedNodes ) {
node = addedNodes[ n ];
if ( node && node.classList && node.classList.contains( 'elementor-control-section_form' ) ) {
app.widgetPanelInit( app.widgetPanelObserver.panel );
return true;
}
}
return false;
},
/**
* Process 'attributes' mutation.
*
* @since 1.6.3
*
* @param {MutationRecord} mutation Mutation record.
*
* @returns {boolean} True if detect needed target.
*/
callbackMutationAttributes: function( mutation ) {
if (
mutation.target &&
mutation.target.classList &&
mutation.target.classList.contains( 'elementor-tab-control-content' )
) {
app.widgetPanelInit( app.widgetPanelObserver.panel );
return true;
}
return false;
},
},
/**
* Edit selected form button click event handler.
*
* @since 1.6.2
*
* @param {object} event Event object.
*/
editFormLinkClick: function( event ) {
app.findFormSelector( event );
app.openBuilderPopup( vars.$select.val() );
},
/**
* Add a new form button click event handler.
*
* @since 1.6.2
*
* @param {object} event Event object.
*/
addFormBtnClick: function( event ) {
app.findFormSelector( event );
app.openBuilderPopup( 0 );
},
/**
* Find and store the form selector control wrapped in jQuery object.
*
* @since 1.6.2
*
* @param {object} event Event object.
*/
findFormSelector: function( event ) {
let view = elementor.getPanelView().getCurrentPageView();
// We need to be sure that we are on the widget Content section.
if ( view.activeSection && view.activeSection !== 'section_form' ) {
$( view.ui.tabs[0] ).trigger( 'click' );
}
vars.$select = event && event.$el ?
event.$el.closest( '#elementor-controls' ).find( 'select[data-setting="form_id"]' ) :
window.parent.jQuery( '#elementor-controls select[data-setting="form_id"]' );
},
/**
* Preview: Form selector event handler.
*
* @since 1.6.2
*/
selectFormInPreview: function() {
vars.formId = $( this ).val();
app.findFormSelector();
// To be sure, that both form selector selects are in sync.
app.refreshFormsList( null, vars.formId );
},
/**
* Preview: Click on the link event handler.
*
* @since 1.6.2
*
* @param {object} event Event object.
*/
clickLinkInPreview: function( event ) {
if ( event.target && event.target.href ) {
window.open( event.target.href, '_blank', 'noopener,noreferrer' );
}
},
/**
* Disable events.
*
* @since 1.6.2
*
* @param {object} event Event object.
*
* @returns {boolean} Always false.
*/
disableEvents: function( event ) {
event.preventDefault();
event.stopImmediatePropagation();
return false;
},
/**
* Open the compreshenvie guide link,
* as elementor disables all links in the preview.
*
* @since 1.8.3
*
* @param {object} event Event object.
*/
openComprehensiveLink: function( event ) {
const url = $( this ).attr( 'href' );
// Open the url in a new tab with JS bc elementor doesn't allow links in the preview.
window.open( url, '_blank' ).focus();
},
/**
* Open builder popup.
*
* @since 1.6.2
*
* @param {number} formId Form id. 0 for create new form.
*/
openBuilderPopup: function( formId ) {
formId = parseInt( formId || '0', 10 );
if ( ! vars.$popup ) {
// We need to add popup markup to the editor top document.
var $elementor = window.parent.jQuery( '#elementor-editor-wrapper' ),
popupTpl = wp.template( 'wpforms-builder-elementor-popup' );
$elementor.after( popupTpl() );
vars.$popup = $elementor.siblings( '#wpforms-builder-elementor-popup' );
}
var url = formId > 0 ? wpformsElementorVars.edit_form_url + formId : wpformsElementorVars.add_form_url,
$iframe = vars.$popup.find( 'iframe' );
app.builderCloseButtonEvent();
$iframe.attr( 'src', url );
vars.$popup.fadeIn();
},
/**
* Close button (inside the form builder) click event.
*
* @since 1.6.2
*/
builderCloseButtonEvent: function() {
vars.$popup
.off( 'wpformsBuilderInPopupClose' )
.on( 'wpformsBuilderInPopupClose', function( e, action, formId ) {
if ( action !== 'saved' || ! formId ) {
return;
}
app.refreshFormsList( null, formId );
} );
},
/**
* Refresh forms list event handler.
*
* @since 1.6.2
*
* @param {object} event Event object.
* @param {number} setFormId Set selected form to.
*/
refreshFormsList: function( event, setFormId ) {
if ( event ) {
event.preventDefault();
}
app.findFormSelector();
var data = {
action: 'wpforms_admin_get_form_selector_options',
nonce : wpformsElementorVars.nonce,
};
vars.$select.prop( 'disabled', true );
$.post( wpformsElementorVars.ajax_url, data )
.done( function( response ) {
if ( ! response.success ) {
app.debug( response );
return;
}
vars.formSelectOptions = response.data;
vars.$select.html( response.data );
if ( setFormId ) {
vars.formId = setFormId;
}
if ( vars.formId && vars.formId !== '' ) {
vars.$select.val( vars.formId ).trigger( 'change' );
}
} )
.fail( function( xhr, textStatus ) {
app.debug( {
xhr: xhr,
textStatus: textStatus,
} );
} )
.always( function() {
if ( ! vars.$select || vars.$select.length < 1 ) {
return;
}
vars.$select.prop( 'disabled', false );
var $formSelectOptions = vars.$select.find( 'option' ),
$formSelectControl = vars.$select.closest( '.elementor-control' );
if ( $formSelectOptions.length > 0 ) {
$formSelectControl.show();
$formSelectControl.siblings( '.elementor-control-add_form_notice' ).hide();
}
if ( parseInt( vars.$select.val(), 10 ) > 0 ) {
$formSelectControl.siblings( '.elementor-control-test_form_notice' ).show();
}
} );
},
/**
* Debug output helper.
*
* @since 1.6.2
*
* @param {mixed} msg Debug message.
*/
debug: function( msg ) {
if ( app.isDebug() ) {
console.log( 'WPForms Debug:', msg );
}
},
/**
* Is debug mode.
*
* @since 1.6.2
*
* @returns {boolean} True if the debug enabled.
*/
isDebug: function() {
return ( ( window.top.location.hash && '#wpformsdebug' === window.top.location.hash ) || wpformsElementorVars.debug );
},
};
return app;
}( document, window, jQuery ) );
// Initialize.
WPFormsElementor.init();
Zerion Mini Shell 1.0