/* global wpforms_admin, jconfirm, wpCookies, Choices, List, wpf */
/* eslint-disable camelcase */
* @param wpforms_admin.recreating
* @param wpforms_admin.testing
* @param {jQuery} $ The jQuery instance.
// Global settings access.
// noinspection ES6ConvertVarToLetConst,JSUnusedGlobalSymbols
var WPFormsAdmin = { // eslint-disable-line no-var
iconActivate: '<i class="fa fa-toggle-on fa-flip-horizontal" aria-hidden="true"></i>',
iconDeactivate: '<i class="fa fa-toggle-on" aria-hidden="true"></i>',
iconInstall: '<i class="fa fa-cloud-download" aria-hidden="true"></i>',
iconSpinner: '<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>',
// Entries Single (Details).
WPFormsAdmin.initEntriesSingle();
WPFormsAdmin.initEntriesList();
WPFormsAdmin.initWelcome();
$( document ).on( 'wpformsReady', WPFormsAdmin.initAddons );
WPFormsAdmin.initSettings();
WPFormsAdmin.initTools();
// Upgrades (Tools view).
WPFormsAdmin.initUpgrades();
WPFormsAdmin.initScrollableMenu();
ready() { // eslint-disable-line max-lines-per-function
// Add `_wp_http_referer` to the data of every AJAX request.
// eslint-disable-next-line camelcase
_wp_http_referer: wpf.updateQueryString( '_wp_http_referer', null ),
// Scroll to integration.
WPFormsAdmin.scrollToIntegration();
// To prevent jumping (since WP core moves the notices with js),
// they are hidden initially with CSS, then revealed below with JS,
// which runs after they have been moved.
// If there are screen options, we have to move them.
$( '#screen-meta-links, #screen-meta' ).prependTo( '#wpforms-header-temp' ).show();
// Init fancy selects via choices.js.
WPFormsAdmin.initChoicesJS();
// Reinit ChoicesJS after htmx swap.
$( document ).on( 'htmx:afterSwap', WPFormsAdmin.initChoicesJS );
// Init checkbox multi selects columns.
WPFormsAdmin.initCheckboxMultiselectColumns();
// Init color pickers via minicolors.js.
$( '.wpforms-color-picker' ).each( function() {
defaultValue: $this.data( 'fallback-color' ) || '',
// Init fancy File Uploads.
$( '.wpforms-file-upload' ).each( function() {
const $input = $( this ).find( 'input[type=file]' ),
$label = $( this ).find( 'label' ),
labelVal = $label.html();
$input.on( 'change', function( event ) {
if ( this.files && this.files.length > 1 ) {
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
} else if ( event.target.value ) {
fileName = event.target.value.split( '\\' ).pop();
$label.find( '.fld' ).html( fileName );
$input.on( 'focus', function() {
$input.addClass( 'has-focus' );
} ).on( 'blur', function() {
$input.removeClass( 'has-focus' );
// jquery-confirm defaults.
backgroundDismiss: false,
animateFromElement: false,
content: wpforms_admin.something_went_wrong,
// Upgrade information modal for upgrade links.
$( document ).on( 'click', '.wpforms-upgrade-modal', function() {
title: wpforms_admin.thanks_for_interest,
content: wpforms_admin.upgrade_modal,
icon: 'fa fa-info-circle',
WPFormsAdmin.initFlyoutMenu();
// Action available for each binding.
$( document ).trigger( 'wpformsReady' );
// Start listening for screen options changes.
$( '#screen-options-wrap .hide-column-tog' ).on( 'change', WPFormsAdmin.handleOnChangeScreenOptions );
* For styling purposes, we will add a dedicated class name for determining the number of visible columns.
handleOnChangeScreenOptions() {
const $table = $( '.wpforms-table-list' );
const $columns = $table.find( 'thead .manage-column' );
const $hidden = $columns.filter( '.hidden' );
const hasManyColumns = Boolean( ( $columns.length - $hidden.length ) > 5 );
// This is used to adjust the table layout.
// Add a class to the table to indicate the number of columns.
$table.toggleClass( 'has-many-columns', hasManyColumns );
$table.toggleClass( 'has-few-columns', ! hasManyColumns );
* Initialize Choices JS elements.
$( '.choicesjs-select' ).each( function() {
args = window.wpforms_admin_choicesjs_config ? { ...window.wpforms_admin_choicesjs_config } : {};
if ( $this.attr( 'multiple' ) ) {
args.removeItemButton = typeof args.removeItemButton !== 'undefined' ? args.removeItemButton : true;
if ( $this.data( 'sorting' ) === 'off' ) {
if ( $this.data( 'search' ) ) {
args.searchEnabled = true;
if ( $this.data( 'choices-position' ) ) {
args.position = $this.data( 'choices-position' );
// Render HTML in Choices.js.
// Function to run once Choices initializes.
// We need to reproduce a behavior like on the public-facing area for "Edit Entry" page.
args.callbackOnInit = function() {
const $element = $( self.passedElement.element );
const sizeClass = $element.data( 'size-class' );
// Add a CSS class for size.
$( self.containerOuter.element ).addClass( sizeClass );
wpf.initMultipleSelectWithSearch( this );
wpf.showMoreButtonForChoices( self.containerOuter.element );
$this.data( 'choicesjs', new Choices( $this[ 0 ], args ) );
// Add the ability to close the drop-down menu.
$( document ).on( 'click', '.choices', function( e ) {
const $choices = $( this ),
choicesObj = $choices.find( 'select' ).data( 'choicesjs' );
$choices.hasClass( 'is-open' ) &&
e.target.classList.contains( 'choices__inner' ) ||
e.target.classList.contains( 'choices__arrow' )
choicesObj.hideDropdown();
wpf.initializeChoicesEventHandlers();
* Initialize checkbox multi-select columns.
initCheckboxMultiselectColumns() {
$( document ).on( 'change', '.checkbox-multiselect-columns input', function() {
$parent = $this.parent(),
$container = $this.closest( '.checkbox-multiselect-columns' ),
itemID = 'check-item-' + $this.val(),
$item = $container.find( '#' + itemID );
if ( $this.prop( 'checked' ) ) {
$this.parent().addClass( 'checked' );
$container.find( '.second-column ul' ).append( '<li id="' + itemID + '">' + label + '</li>' );
$this.parent().removeClass( 'checked' );
$container.find( '#' + itemID ).remove();
$( document ).on( 'click', '.checkbox-multiselect-columns .all', function( event ) {
$( this ).closest( '.checkbox-multiselect-columns' ).find( 'input[type=checkbox]' ).prop( 'checked', true ).trigger( 'change' );
//--------------------------------------------------------------------//
//--------------------------------------------------------------------//
* Element bindings for the Form Overview page.
* @since 1.7.3 Deprecated.
* @deprecated Use `WPFormsForms.Overview.init()` instead.
// eslint-disable-next-line no-console
console.warn( 'WARNING! Function "WPFormsAdmin.initFormOverview()" has been deprecated, please use the new "WPFormsForms.Overview.init()" function instead!' );
window.WPFormsForms.Overview.init();
//--------------------------------------------------------------------//
// Entry Single (Details)
//--------------------------------------------------------------------//
* Element bindings for the Entries List table page.
initEntriesList() { // eslint-disable-line max-lines-per-function
// Toggle form selector dropdown.
$( document ).on( 'click', '#wpforms-entries-list .form-selector .toggle', function( event ) {
$( this ).toggleClass( 'active' ).next( '.form-list' ).toggle();
// Confirm bulk entry deletion.
$( document ).on( 'click', '#wpforms-entries-table #doaction', function( event ) {
$form = $btn.closest( 'form' ),
$table = $form.find( 'table' ),
$action = $form.find( 'select[name=action]' ),
$checked = $table.find( 'input[name^=entry_id]:checked' );
if ( ( 'delete' !== $action.val() && 'trash' !== $action.val() ) || ! $checked.length ) {
const $content = 'delete' === $action.val() ? wpforms_admin.entry_delete_n_confirm : wpforms_admin.entry_trash_n_confirm;
// Trigger alert modal to confirm.
title: wpforms_admin.heads_up,
content: $content.replace( '{entry_count}', $checked.length ),
icon: 'fa fa-exclamation-circle',
$form.trigger( 'submit' );
text: wpforms_admin.cancel,
// Confirm entry deletion.
$( document ).on( 'click', '#wpforms-entries-list .wp-list-table .delete', function( event ) {
const url = $( this ).attr( 'href' );
// Trigger alert modal to confirm.
title: wpforms_admin.heads_up,
content: wpforms_admin.entry_delete_confirm,
icon: 'fa fa-exclamation-circle',
text: wpforms_admin.cancel,
$( document ).on( 'click', '#wpforms-entries-list .wp-list-table .trash', function( event ) {
const url = $( this ).attr( 'href' );
// Trigger alert modal to confirm.
title: wpforms_admin.heads_up,
content: wpforms_admin.entry_trash_confirm,
icon: 'fa fa-exclamation-circle',
text: wpforms_admin.cancel,
$( document ).on( 'click', '#wpforms-entries-list .wp-list-table .indicator-star', function( event ) {
const $counter = $( '#wpforms-entries-list .starred-num' );
const $table = $this.parents( 'table' );
let total = Number( $counter.text() );
if ( $this.hasClass( 'star' ) ) {
$this.attr( 'title', wpforms_admin.entry_unstar );
$this.attr( 'title', wpforms_admin.entry_star );
$this.toggleClass( 'star unstar' );
if ( ! $table.hasClass( 'wpforms-entries-table-spam' ) && ! $table.hasClass( 'wpforms-entries-table-trash' ) ) {
action : 'wpforms_entry_list_star',
nonce : wpforms_admin.nonce,
entryId : $this.data( 'id' ),
formId : $this.data( 'form-id' ),
$.post( wpforms_admin.ajax_url, data );
// Toggle entry read state.
$( document ).on( 'click', '#wpforms-entries-list .wp-list-table .indicator-read', function( event ) {
const $counter = $( '#wpforms-entries-list .unread-num' );
const $table = $this.parents( 'table' );
let total = Number( $counter.text() );
if ( $this.hasClass( 'read' ) ) {
$this.attr( 'title', wpforms_admin.entry_unread );
$this.attr( 'title', wpforms_admin.entry_read );
$this.toggleClass( 'read unread' );
if ( ! $table.hasClass( 'wpforms-entries-table-spam' ) && ! $table.hasClass( 'wpforms-entries-table-trash' ) ) {
action : 'wpforms_entry_list_read',