Your IP : 52.15.245.1
/* global List, wpforms_builder, wpforms_addons, wpf, WPFormsBuilder, wpforms_education */
/**
* Form Builder Setup Panel module.
*
* @since 1.6.8
*/
'use strict';
var WPForms = window.WPForms || {};
WPForms.Admin = WPForms.Admin || {};
WPForms.Admin.Builder = WPForms.Admin.Builder || {};
WPForms.Admin.Builder.Setup = WPForms.Admin.Builder.Setup || ( function( document, window, $ ) {
/**
* Elements holder.
*
* @since 1.6.8
*
* @type {object}
*/
var el = {};
/**
* Runtime variables.
*
* @since 1.6.8
*
* @type {object}
*/
var vars = {};
/**
* Public functions and properties.
*
* @since 1.6.8
*
* @type {object}
*/
var app = {
/**
* Start the engine.
*
* @since 1.6.8
*/
init: function() {
$( app.ready );
// Page load.
$( window ).on( 'load', function() {
// In the case of jQuery 3.+, we need to wait for a ready event first.
if ( typeof $.ready.then === 'function' ) {
$.ready.then( app.load );
} else {
app.load();
}
} );
},
/**
* DOM is fully loaded.
*
* @since 1.6.8
*/
ready: function() {
app.setup();
app.setPanelsToggleState();
app.setupTitleFocus();
app.setTriggerBlankLink();
app.events();
el.$builder.trigger( 'wpformsBuilderSetupReady' );
},
/**
* Page load.
*
* @since 1.6.8
*/
load: function() {
app.applyTemplateOnRequest();
},
/**
* Setup. Prepare some variables.
*
* @since 1.6.8
*/
setup: function() {
// Cache DOM elements.
el = {
$builder: $( '#wpforms-builder' ),
$form: $( '#wpforms-builder-form' ),
$formName: $( '#wpforms-setup-name' ),
$panel: $( '#wpforms-panel-setup' ),
$categories: $( '#wpforms-panel-setup .wpforms-setup-templates-categories' ),
};
// Template list object.
vars.templateList = new List( 'wpforms-setup-templates-list', {
valueNames: [
'wpforms-template-name',
'wpforms-template-desc',
{
name: 'categories',
attr: 'data-categories',
},
],
} );
// Other values.
vars.spinner = '<i class="wpforms-loading-spinner wpforms-loading-white wpforms-loading-inline"></i>';
vars.formID = el.$form.data( 'id' );
},
/**
* Bind events.
*
* @since 1.6.8
*/
events: function() {
el.$panel
.on( 'keyup', '#wpforms-setup-template-search', app.searchTemplate )
.on( 'click', '.wpforms-setup-templates-categories li', app.selectCategory )
.on( 'click', '.wpforms-template-select', app.selectTemplate )
.on( 'click', '.wpforms-trigger-blank', app.selectBlankTemplate );
// Focus on the form title field when displaying setup panel.
el.$builder
.on( 'wpformsPanelSwitched', app.setupTitleFocus );
// Sync Setup title and settings title.
el.$builder
.on( 'input', '#wpforms-panel-field-settings-form_title', app.syncTitle )
.on( 'input', '#wpforms-setup-name', app.syncTitle );
},
/**
* Set panels toggle buttons state.
*
* @since 1.6.8
*/
setPanelsToggleState: function() {
el.$builder
.find( '#wpforms-panels-toggle button:not(.active)' )
.toggleClass( 'wpforms-disabled', vars.formID === '' );
},
/**
* Set attributes of "blank template" link.
*
* @since 1.6.8
*/
setTriggerBlankLink: function() {
el.$builder
.find( '.wpforms-trigger-blank' )
.attr( {
'data-template-name-raw': 'Blank Form',
'data-template': 'blank',
} );
},
/**
* Force focus on the form title field when switched to the the Setup panel.
*
* @since 1.6.8
*
* @param {object} e Event object.
* @param {string} view Current view.
*/
setupTitleFocus: function( e, view ) {
if ( typeof view === 'undefined' ) {
view = wpf.getQueryString( 'view' );
}
if ( view === 'setup' ) {
el.$formName.focus();
}
},
/**
* Keep Setup title and settings title instances the same.
*
* @since 1.6.8
*
* @param {object} e Event object.
*/
syncTitle: function( e ) {
if ( e.target.id === 'wpforms-setup-name' ) {
$( '#wpforms-panel-field-settings-form_title' ).val( e.target.value );
} else {
$( '#wpforms-setup-name' ).val( e.target.value );
}
},
/**
* Search template.
*
* @since 1.6.8
*
* @param {object} e Event object.
*/
searchTemplate: function( e ) {
vars.templateList.search( $( this ).val() );
},
/**
* Select category.
*
* @since 1.6.8
*
* @param {object} e Event object.
*/
selectCategory: function( e ) {
e.preventDefault();
var $item = $( this ),
$active = $item.closest( 'ul' ).find( '.active' ),
category = $item.data( 'category' );
$active.removeClass( 'active' );
$item.addClass( 'active' );
vars.templateList.filter( function( item ) {
return category === 'all' || item.values().categories.split( ',' ).indexOf( category ) > -1;
} );
},
/**
* Select template.
*
* @since 1.6.8
*
* @param {object} e Event object.
*/
selectTemplate: function( e ) {
e.preventDefault();
var $button = $( e.target ),
template = $button.data( 'template' ),
templateName = $button.data( 'template-name-raw' ),
formName = el.$formName.val() || templateName;
// Don't do anything for templates that trigger education modal OR addons-modal.
if ( $button.hasClass( 'education-modal' ) ) {
return;
}
el.$panel.find( '.wpforms-template' ).removeClass( 'active' );
$button.closest( '.wpforms-template' ).addClass( 'active' );
// Save original label.
$button.data( 'labelOriginal', $button.html() );
// Display loading indicator.
$button.html( vars.spinner + wpforms_builder.loading );
app.applyTemplate( formName, template, $button );
},
/**
* Apply template.
*
* The final part of the select template routine.
*
* @since 1.6.9
*
* @param {string} formName Name of the form.
* @param {string} template Template slug.
* @param {jQuery} $button Use template button object.
*/
applyTemplate: function( formName, template, $button ) {
el.$builder.trigger( 'wpformsTemplateSelect', template );
if ( vars.formID ) {
// Existing form.
app.selectTemplateExistingForm( formName, template, $button );
} else {
// Create a new form.
app.selectTemplateProcess( formName, template, $button );
}
},
/**
* Select Blank template.
*
* @since 1.6.8
*
* @param {object} e Event object.
*/
selectBlankTemplate: function( e ) {
e.preventDefault();
var $button = $( e.target ),
formName = el.$formName.val() || wpforms_builder.blank_form,
template = 'blank';
app.applyTemplate( formName, template, $button );
},
/**
* Select template. Existing form.
*
* @since 1.6.8
*
* @param {string} formName Name of the form.
* @param {string} template Template slug.
* @param {jQuery} $button Use template button object.
*/
selectTemplateExistingForm: function( formName, template, $button ) {
$.confirm( {
title: wpforms_builder.heads_up,
content: wpforms_builder.template_confirm,
icon: 'fa fa-exclamation-circle',
type: 'orange',
buttons: {
confirm: {
text: wpforms_builder.ok,
btnClass: 'btn-confirm',
keys: [ 'enter' ],
action: function() {
app.selectTemplateProcess( formName, template, $button );
},
},
cancel: {
text: wpforms_builder.cancel,
action: function() {
app.selectTemplateCancel();
},
},
},
} );
},
/**
* Select template.
*
* @since 1.6.8
*
* @param {string} formName Name of the form.
* @param {string} template Template slug.
* @param {jQuery} $button Use template button object.
*/
selectTemplateProcess: function( formName, template, $button ) {
if ( $button.data( 'addons' ) ) {
app.addonsModal( formName, template, $button );
} else {
app.selectTemplateProcessAjax( formName, template );
}
},
/**
* Cancel button click routine.
*
* @since 1.6.8
*/
selectTemplateCancel: function( ) {
var $template = el.$panel.find( '.wpforms-template.active' ),
$button = $template.find( '.wpforms-template-select' );
$template.removeClass( 'active' );
$button.html( $button.data( 'labelOriginal' ) );
},
/**
* Select template. Create or update form AJAX call.
*
* @since 1.6.8
*
* @param {string} formName Name of the form.
* @param {string} template Template slug.
*/
selectTemplateProcessAjax: function( formName, template ) {
WPFormsBuilder.showLoadingOverlay();
var data = {
title: formName,
action: vars.formID ? 'wpforms_update_form_template' : 'wpforms_new_form',
template: template,
form_id: vars.formID, // eslint-disable-line camelcase
nonce: wpforms_builder.nonce,
};
$.post( wpforms_builder.ajax_url, data )
.done( function( res ) {
if ( res.success ) {
// We have already warned the user that unsaved changes will be ignored.
WPFormsBuilder.setCloseConfirmation( false );
window.location.href = res.data.redirect;
} else {
wpf.debug( res );
app.selectTemplateProcessError( res.data );
}
} )
.fail( function( xhr, textStatus, e ) {
wpf.debug( xhr.responseText || textStatus || '' );
app.selectTemplateProcessError( '' );
} );
},
/**
* Select template AJAX call error modal.
*
* @since 1.6.8
*
* @param {string} error Error message.
*/
selectTemplateProcessError: function( error ) {
var content = error && error.length ? '<p>' + error + '</p>' : '';
$.alert( {
title: wpforms_builder.heads_up,
content: wpforms_builder.error_select_template + content,
icon: 'fa fa-exclamation-circle',
type: 'orange',
buttons: {
confirm: {
text: wpforms_builder.ok,
btnClass: 'btn-confirm',
keys: [ 'enter' ],
action: function() {
app.selectTemplateCancel();
WPFormsBuilder.hideLoadingOverlay();
},
},
},
} );
},
/**
* Open required addons alert.
*
* @since 1.6.8
*
* @param {string} formName Name of the form.
* @param {string} template Template slug.
* @param {jQuery} $button Use template button object.
*/
addonsModal: function( formName, template, $button ) {
var templateName = $button.data( 'template-name-raw' ),
addonsNames = $button.data( 'addons-names' ),
addonsSlugs = $button.data( 'addons' ),
addons = addonsSlugs.split( ',' ),
prompt = addons.length > 1 ? wpforms_builder.template_addons_prompt : wpforms_builder.template_addon_prompt;
if ( ! addons.length ) {
return;
}
$.confirm( {
title: wpforms_builder.heads_up,
content: prompt
.replace( /%template%/g, templateName )
.replace( /%addons%/g, addonsNames ),
icon: 'fa fa-exclamation-circle',
type: 'orange',
buttons: {
confirm: {
text: wpforms_education.install_confirm,
btnClass: 'btn-confirm',
keys: [ 'enter' ],
action: function() {
this.$$confirm
.prop( 'disabled', true )
.html( vars.spinner + wpforms_education.activating );
this.$$cancel
.prop( 'disabled', true );
app.installActivateAddons( addons, this, formName, template );
return false;
},
},
cancel: {
text: wpforms_education.cancel,
action: function() {
app.selectTemplateCancel();
},
},
},
} );
},
/**
* Install & Activate addons via AJAX.
*
* @since 1.6.8
*
* @param {Array} addons Addons slugs.
* @param {object} previousModal Previous modal instance.
* @param {string} formName Name of the form.
* @param {string} template Template slug.
*/
installActivateAddons: function( addons, previousModal, formName, template ) {
var ajaxResults = [],
ajaxErrors = [],
promiseChain = false;
// Put each of the ajax call promise to the chain.
addons.forEach( function( addon ) {
if ( typeof promiseChain.done !== 'function' ) {
promiseChain = app.installActivateAddonAjax( addon );
return;
}
promiseChain = promiseChain
.done( function( value ) {
ajaxResults.push( value );
return app.installActivateAddonAjax( addon );
} )
.fail( function( error ) {
ajaxErrors.push( error );
} );
} );
promiseChain
// Latest promise result and error.
.done( function( value ) {
ajaxResults.push( value );
} )
.fail( function( error ) {
ajaxErrors.push( error );
} )
// Finally, resolve all the promises.
.always( function() {
previousModal.close();
if (
ajaxResults.length > 0 &&
wpf.listPluck( ajaxResults, 'success' ).every( Boolean ) && // Check if every `success` is true.
ajaxErrors.length === 0
) {
app.selectTemplateProcessAjax( formName, template );
} else {
app.installActivateAddonsError( formName, template );
}
} );
},
/**
* Install & Activate addons error modal.
*
* @since 1.6.8
*
* @param {string} formName Name of the form.
* @param {string} template Template slug.
*/
installActivateAddonsError: function( formName, template ) {
$.confirm( {
title: wpforms_builder.heads_up,
content: wpforms_builder.template_addons_error,
icon: 'fa fa-exclamation-circle',
type: 'orange',
buttons: {
confirm: {
text: wpforms_builder.use_template,
btnClass: 'btn-confirm',
keys: [ 'enter' ],
action: function() {
app.selectTemplateProcessAjax( formName, template );
},
},
cancel: {
text: wpforms_builder.cancel,
action: function() {
app.selectTemplateCancel();
},
},
},
} );
},
/**
* Install & Activate single addon via AJAX.
*
* @since 1.6.8
*
* @param {string} addon Addon slug.
*
* @returns {Promise} jQuery ajax call promise.
*/
installActivateAddonAjax: function( addon ) {
var addonData = wpforms_addons[ addon ],
deferred = new $.Deferred();
if (
! addonData ||
[ 'activate', 'install' ].indexOf( addonData.action ) < 0
) {
deferred.resolve( false );
return deferred.promise();
}
return $.post(
wpforms_education.ajax_url,
{
action: 'wpforms_' + addonData.action + '_addon',
nonce: wpforms_builder.admin_nonce,
plugin: addonData.action === 'activate' ? addon + '/' + addon + '.php' : addonData.url,
}
);
},
/**
* Initiate template processing for a new form.
*
* @since 1.6.8
*/
applyTemplateOnRequest: function() {
var urlParams = new URLSearchParams( window.location.search ),
templateId = urlParams.get( 'template_id' );
if (
urlParams.get( 'view' ) !== 'setup' ||
urlParams.get( 'form_id' ) ||
! templateId
) {
return;
}
el.$panel.find( '.wpforms-template .wpforms-btn[data-template="' + templateId + '"]' ).click();
},
};
// Provide access to public functions/properties.
return app;
}( document, window, jQuery ) );
// Initialize.
WPForms.Admin.Builder.Setup.init();