/* 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 () 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();