File: //proc/self/cwd/wp-content/plugins/wpforms-lite/assets/js/integrations/ai/wpforms-ai-modal.js
/* global wpforms_ai_chat_element */
// noinspection ES6ConvertVarToLetConst
/**
* AI modal.
*
* @since 1.9.1
*/
// eslint-disable-next-line no-var
var WPFormsAIModal = window.WPFormsAIModal || ( function( document, window, $ ) {
/**
* Public functions and properties.
*
* @since 1.9.1
*
* @type {Object}
*/
const app = {
/**
* Default modal options.
*
* @since 1.9.1
*/
defaultOptions: {
title: false,
content: '',
type: 'ai',
smoothContent: true,
bgOpacity: 1,
boxWidth: 650,
contentMaxHeight: 600,
closeIcon: true,
buttons: false,
},
/**
* Start the engine.
*
* @since 1.9.1
*/
init() {
$( app.ready );
},
/**
* Initialized once the DOM is fully loaded.
*
* @since 1.9.1
*/
ready() {
app.extendJqueryConfirm();
app.bindChoicesActions();
},
/**
* Process various events for choices modal.
*
* @since 1.9.1
*/
bindChoicesActions() {
$( document )
.on( 'click', '.wpforms-ai-choices-button', app.initChoicesModal )
.on( 'wpformsAIChatBeforeRefreshConfirm', app.beforeChoicesRefreshConfirm )
.on( 'wpformsAIModalBeforeWarningMessageInsert', app.refreshModalHeight )
.on( 'wpformsAIChatAfterRefresh', app.refreshModalHeight )
.on( 'wpformsAIChatCancelRefresh', app.cancelChoicesRefresh )
.on( 'wpformsAIChatBeforeSendMessage', function( e ) {
app.resizeChoicesModalHeight( e.detail.fieldId );
} )
.on( 'wpformsAIModalAfterChoicesInsert', function( e ) {
app.hideChoicesModal( e.detail.fieldId );
} );
$( window ).on( 'resize', function() {
$( '.jconfirm-wpforms-ai-modal wpforms-ai-chat' ).each( function() {
app.resizeChoicesModalHeight( $( this ).attr( 'field-id' ) );
} );
} );
},
/**
* Init modal window.
*
* @since 1.9.1
*
* @param {Object} args Modal window arguments.
*/
initModal( args ) {
// Open the modal window.
$.confirm( { ...app.defaultOptions, ...args } );
},
/**
* Init choices modal window.
*
* @since 1.9.1
*/
initChoicesModal() {
const $button = $( this );
if ( $button.hasClass( 'wpforms-ai-modal-disabled' ) ) {
$button.trigger( 'blur' );
return;
}
const fieldId = $button.data( 'field-id' ),
$modal = $( `.jconfirm-wpforms-ai-modal-choices-${ fieldId }` );
if ( $modal.length ) {
$modal.removeClass( 'wpforms-hidden' ).fadeIn();
return;
}
const args = {},
hideChoices = function() {
app.hideChoicesModal( fieldId );
return false;
};
args.content = `<wpforms-ai-chat mode="choices" field-id="${ fieldId }" />`;
args.theme = `wpforms-ai-modal, wpforms-ai-purple, wpforms-ai-modal-choices-${ fieldId }`;
args.backgroundDismiss = hideChoices;
args.backgroundDismissAnimation = '';
args.contentMaxHeight = Math.min( app.defaultOptions.contentMaxHeight, app.getMaxModalHeight() );
args.onOpen = function() {
// Unbind the click event from the close icon and use our own instead.
this.$closeIcon.off( 'click' );
this.$closeIcon.on( 'click', hideChoices );
};
app.initModal( args );
},
/**
* Hide the choices modal window.
*
* @since 1.9.1
*
* @param {string} fieldId Choice field ID.
*/
hideChoicesModal( fieldId ) {
$( `.jconfirm-wpforms-ai-modal-choices-${ fieldId }` ).addClass( 'wpforms-hidden' ).fadeOut();
},
/**
* Show the choices modal window.
*
* @since 1.9.1
*
* @param {string} fieldId Choice field ID.
*/
showChoicesModal( fieldId ) {
$( `.jconfirm-wpforms-ai-modal-choices-${ fieldId }` ).removeClass( 'wpforms-hidden' ).fadeIn();
},
/**
* Resize choices modal window height.
*
* @since 1.9.1
*
* @param {string} fieldId Choice field ID.
*/
resizeChoicesModalHeight( fieldId ) {
const modalHeight = app.getMaxModalHeight();
$( `.jconfirm-wpforms-ai-modal-choices-${ fieldId } .jconfirm-content-pane` )
.css( {
height: modalHeight,
'max-height': modalHeight,
} );
},
/**
* Before choices refresh confirm is displayed.
*
* @since 1.9.1
*
* @param {Event} e Event object.
*/
beforeChoicesRefreshConfirm( e ) {
const fieldId = e.detail?.fieldId || 0;
app.hideChoicesModal( fieldId );
},
/**
* Cancel choices' refresh.
*
* @since 1.9.1
*
* @param {Event} e Event object.
*/
cancelChoicesRefresh( e ) {
const fieldId = e.detail?.fieldId || 0;
app.showChoicesModal( fieldId );
},
/**
* Refresh the main modal window height.
*
* @since 1.9.1
*
* @param {Event} e Event object.
*/
refreshModalHeight( e ) {
const fieldId = e.detail?.fieldId || 0;
const maxHeight = Math.min( app.getMaxModalHeight(), app.defaultOptions.contentMaxHeight );
app.showChoicesModal( fieldId );
// Reset choices modal window height.
$( `.jconfirm-wpforms-ai-modal-choices-${ fieldId } .jconfirm-content-pane` )
.css( {
height: maxHeight,
'max-height': maxHeight,
} );
},
/**
* Get the max modal height.
*
* @since 1.9.1
*
* @return {number} The max modal height.
*/
getMaxModalHeight() {
// 80% of the window height, but not more than 800 px.
return Math.min( $( window ).height() * 0.8, 800 );
},
/**
* Extend jquery-confirm plugin with support of max-height for the content area.
*
* @since 1.9.1
*/
extendJqueryConfirm() {
// Extend a method of global instance.
window.Jconfirm.prototype._updateContentMaxHeight = function() {
this.$contentPane.css( {
'max-height': this.contentMaxHeight + 'px',
} );
};
},
/**
* Confirm a modal window.
*
* This is a wrapper for the `jquery.confirm` plugin.
*
* @since 1.9.1
*
* @param {Object} args Modal window arguments.
*/
confirmModal( args ) {
const options = {
title: false,
content: '',
icon: 'fa fa-exclamation-circle',
type: 'orange',
buttons: {
confirm: {
text: wpforms_ai_chat_element.btnYes,
btnClass: 'btn-confirm',
keys: [ 'enter' ],
action() {
if ( typeof args.onConfirm === 'function' ) {
args.onConfirm();
}
},
},
cancel: {
text: wpforms_ai_chat_element.btnCancel,
action() {
if ( typeof args.onCancel === 'function' ) {
args.onCancel();
}
},
},
},
};
$.confirm( { ...options, ...args } );
},
};
// Provide access to public functions/properties.
return app;
}( document, window, jQuery ) );
// Initialize.
WPFormsAIModal.init();