Your IP : 216.73.216.123
/* global wpforms_gutenberg_form_selector, Choices */
/* jshint es3: false, esversion: 6 */
'use strict';
/**
* Gutenberg editor block.
*
* @since 1.8.1
*/
var WPForms = window.WPForms || {};
WPForms.FormSelector = WPForms.FormSelector || ( function( document, window, $ ) {
const { serverSideRender: ServerSideRender = wp.components.ServerSideRender } = wp;
const { createElement, Fragment, useState } = wp.element;
const { registerBlockType } = wp.blocks;
const { InspectorControls, InspectorAdvancedControls, PanelColorSettings } = wp.blockEditor || wp.editor;
const { SelectControl, ToggleControl, PanelBody, Placeholder, Flex, FlexBlock, __experimentalUnitControl, TextareaControl, Button, Modal } = wp.components;
const { strings, defaults, sizes } = wpforms_gutenberg_form_selector;
const defaultStyleSettings = defaults;
/**
* Blocks runtime data.
*
* @since 1.8.1
*
* @type {object}
*/
let blocks = {};
/**
* Whether it is needed to trigger server rendering.
*
* @since 1.8.1
*
* @type {boolean}
*/
let triggerServerRender = true;
/**
* Public functions and properties.
*
* @since 1.8.1
*
* @type {object}
*/
const app = {
/**
* Start the engine.
*
* @since 1.8.1
*/
init: function() {
app.initDefaults();
app.registerBlock();
$( app.ready );
},
/**
* Document ready.
*
* @since 1.8.1
*/
ready: function() {
app.events();
},
/**
* Events.
*
* @since 1.8.1
*/
events: function() {
$( window )
.on( 'wpformsFormSelectorEdit', _.debounce( app.blockEdit, 250 ) )
.on( 'wpformsFormSelectorFormLoaded', _.debounce( app.formLoaded, 250 ) );
},
/**
* Register block.
*
* @since 1.8.1
*/
registerBlock: function() {
registerBlockType( 'wpforms/form-selector', {
title: strings.title,
description: strings.description,
icon: app.getIcon(),
keywords: strings.form_keywords,
category: 'widgets',
attributes: app.getBlockAttributes(),
example: {
attributes: {
preview: true,
},
},
edit: function( props ) {
const { attributes } = props;
const formOptions = app.getFormOptions();
const sizeOptions = app.getSizeOptions();
const handlers = app.getSettingsFieldsHandlers( props );
// Store block clientId in attributes.
props.setAttributes( {
clientId: props.clientId,
} );
// Main block settings.
let jsx = [
app.jsxParts.getMainSettings( attributes, handlers, formOptions ),
];
// Form style settings & block content.
if ( attributes.formId ) {
jsx.push(
app.jsxParts.getStyleSettings( attributes, handlers, sizeOptions ),
app.jsxParts.getAdvancedSettings( attributes, handlers ),
app.jsxParts.getBlockFormContent( props ),
);
handlers.updateCopyPasteContent();
$( window ).trigger( 'wpformsFormSelectorEdit', [ props ] );
return jsx;
}
// Block preview picture.
if ( attributes.preview ) {
jsx.push(
app.jsxParts.getBlockPreview(),
);
return jsx;
}
// Block placeholder (form selector).
jsx.push(
app.jsxParts.getBlockPlaceholder( props.attributes, handlers, formOptions ),
);
return jsx;
},
save: () => null,
} );
},
/**
* Init default style settings.
*
* @since 1.8.1
*/
initDefaults: function() {
[ 'formId', 'copyPasteValue' ].forEach( key => delete defaultStyleSettings[ key ] );
},
/**
* Block JSX parts.
*
* @since 1.8.1
*
* @type {object}
*/
jsxParts: {
/**
* Get main settings JSX code.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
* @param {object} handlers Block event handlers.
* @param {object} formOptions Form selector options.
*
* @returns {JSX.Element} Main setting JSX code.
*/
getMainSettings: function( attributes, handlers, formOptions ) {
return (
<InspectorControls key="wpforms-gutenberg-form-selector-inspector-main-settings">
<PanelBody className="wpforms-gutenberg-panel" title={ strings.form_settings }>
<SelectControl
label={ strings.form_selected }
value={ attributes.formId }
options={ formOptions }
onChange={ value => handlers.attrChange( 'formId', value ) }
/>
<ToggleControl
label={ strings.show_title }
checked={ attributes.displayTitle }
onChange={ value => handlers.attrChange( 'displayTitle', value ) }
/>
<ToggleControl
label={ strings.show_description }
checked={ attributes.displayDesc }
onChange={ value => handlers.attrChange( 'displayDesc', value ) }
/>
<p className="wpforms-gutenberg-panel-notice">
<strong>{ strings.panel_notice_head }</strong>
{ strings.panel_notice_text }
<a href={strings.panel_notice_link} rel="noreferrer" target="_blank">{ strings.panel_notice_link_text }</a>
</p>
</PanelBody>
</InspectorControls>
);
},
/**
* Get Field styles JSX code.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
* @param {object} handlers Block event handlers.
* @param {object} sizeOptions Size selector options.
*
* @returns {JSX.Element} Field styles JSX code.
*/
getFieldStyles: function( attributes, handlers, sizeOptions ) { // eslint-disable-line max-lines-per-function
return (
<PanelBody className={ app.getPanelClass( attributes ) } title={ strings.field_styles }>
<p className="wpforms-gutenberg-panel-notice wpforms-use-modern-notice">
<strong>{ strings.use_modern_notice_head }</strong>
{ strings.use_modern_notice_text } <a href={strings.use_modern_notice_link} rel="noreferrer" target="_blank">{ strings.learn_more }</a>
</p>
<p className="wpforms-gutenberg-panel-notice wpforms-warning wpforms-lead-form-notice" style={{ display: 'none' }}>
<strong>{ strings.lead_forms_panel_notice_head }</strong>
{ strings.lead_forms_panel_notice_text }
</p>
<Flex gap={4} align="flex-start" className={'wpforms-gutenberg-form-selector-flex'} justify="space-between">
<FlexBlock>
<SelectControl
label={ strings.size }
value={ attributes.fieldSize }
options={ sizeOptions }
onChange={ value => handlers.styleAttrChange( 'fieldSize', value ) }
/>
</FlexBlock>
<FlexBlock>
<__experimentalUnitControl
label={ strings.border_radius }
value={ attributes.fieldBorderRadius }
isUnitSelectTabbable
onChange={ value => handlers.styleAttrChange( 'fieldBorderRadius', value ) }
/>
</FlexBlock>
</Flex>
<div className="wpforms-gutenberg-form-selector-color-picker">
<div className="wpforms-gutenberg-form-selector-control-label">{ strings.colors }</div>
<PanelColorSettings
__experimentalIsRenderedInSidebar
enableAlpha
showTitle={ false }
className="wpforms-gutenberg-form-selector-color-panel"
colorSettings={[
{
value: attributes.fieldBackgroundColor,
onChange: value => handlers.styleAttrChange( 'fieldBackgroundColor', value ),
label: strings.background,
},
{
value: attributes.fieldBorderColor,
onChange: value => handlers.styleAttrChange( 'fieldBorderColor', value ),
label: strings.border,
},
{
value: attributes.fieldTextColor,
onChange: value => handlers.styleAttrChange( 'fieldTextColor', value ),
label: strings.text,
},
]}
/>
</div>
</PanelBody>
);
},
/**
* Get Label styles JSX code.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
* @param {object} handlers Block event handlers.
* @param {object} sizeOptions Size selector options.
*
* @returns {JSX.Element} Label styles JSX code.
*/
getLabelStyles: function( attributes, handlers, sizeOptions ) {
return (
<PanelBody className={ app.getPanelClass( attributes ) } title={ strings.label_styles }>
<SelectControl
label={ strings.size }
value={ attributes.labelSize }
className="wpforms-gutenberg-form-selector-fix-bottom-margin"
options={ sizeOptions}
onChange={ value => handlers.styleAttrChange( 'labelSize', value ) }
/>
<div className="wpforms-gutenberg-form-selector-color-picker">
<div className="wpforms-gutenberg-form-selector-control-label">{ strings.colors }</div>
<PanelColorSettings
__experimentalIsRenderedInSidebar
enableAlpha
showTitle={ false }
className="wpforms-gutenberg-form-selector-color-panel"
colorSettings={[
{
value: attributes.labelColor,
onChange: value => handlers.styleAttrChange( 'labelColor', value ),
label: strings.label,
},
{
value: attributes.labelSublabelColor,
onChange: value => handlers.styleAttrChange( 'labelSublabelColor', value ),
label: strings.sublabel_hints.replace( '&', '&' ),
},
{
value: attributes.labelErrorColor,
onChange: value => handlers.styleAttrChange( 'labelErrorColor', value ),
label: strings.error_message,
},
]}
/>
</div>
</PanelBody>
);
},
/**
* Get Button styles JSX code.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
* @param {object} handlers Block event handlers.
* @param {object} sizeOptions Size selector options.
*
* @returns {JSX.Element} Button styles JSX code.
*/
getButtonStyles: function( attributes, handlers, sizeOptions ) {
return (
<PanelBody className={ app.getPanelClass( attributes ) } title={ strings.button_styles }>
<Flex gap={4} align="flex-start" className={'wpforms-gutenberg-form-selector-flex'} justify="space-between">
<FlexBlock>
<SelectControl
label={ strings.size }
value={ attributes.buttonSize }
options={ sizeOptions }
onChange={ value => handlers.styleAttrChange( 'buttonSize', value ) }
/>
</FlexBlock>
<FlexBlock>
<__experimentalUnitControl
onChange={ value => handlers.styleAttrChange( 'buttonBorderRadius', value ) }
label={ strings.border_radius }
isUnitSelectTabbable
value={ attributes.buttonBorderRadius } />
</FlexBlock>
</Flex>
<div className="wpforms-gutenberg-form-selector-color-picker">
<div className="wpforms-gutenberg-form-selector-control-label">{ strings.colors }</div>
<PanelColorSettings
__experimentalIsRenderedInSidebar
enableAlpha
showTitle={ false }
className="wpforms-gutenberg-form-selector-color-panel"
colorSettings={[
{
value: attributes.buttonBackgroundColor,
onChange: value => handlers.styleAttrChange( 'buttonBackgroundColor', value ),
label: strings.background,
},
{
value: attributes.buttonTextColor,
onChange: value => handlers.styleAttrChange( 'buttonTextColor', value ),
label: strings.text,
},
]} />
<div className="wpforms-gutenberg-form-selector-legend wpforms-button-color-notice">
{ strings.button_color_notice }
</div>
</div>
</PanelBody>
);
},
/**
* Get style settings JSX code.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
* @param {object} handlers Block event handlers.
* @param {object} sizeOptions Size selector options.
*
* @returns {JSX.Element} Inspector controls JSX code.
*/
getStyleSettings: function( attributes, handlers, sizeOptions ) {
return (
<InspectorControls key="wpforms-gutenberg-form-selector-style-settings">
{ app.jsxParts.getFieldStyles( attributes, handlers, sizeOptions ) }
{ app.jsxParts.getLabelStyles( attributes, handlers, sizeOptions ) }
{ app.jsxParts.getButtonStyles( attributes, handlers, sizeOptions ) }
</InspectorControls>
);
},
/**
* Get advanced settings JSX code.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
* @param {object} handlers Block event handlers.
*
* @returns {JSX.Element} Inspector advanced controls JSX code.
*/
getAdvancedSettings: function( attributes, handlers ) {
const [ isOpen, setOpen ] = useState( false );
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );
return (
<InspectorAdvancedControls>
<div className={ app.getPanelClass( attributes ) }>
<TextareaControl
label={ strings.copy_paste_settings }
rows="4"
spellCheck="false"
value={ attributes.copyPasteValue }
onChange={ value => handlers.pasteSettings( value ) }
/>
<div className="wpforms-gutenberg-form-selector-legend" dangerouslySetInnerHTML={{ __html: strings.copy_paste_notice }}></div>
<Button className='wpforms-gutenberg-form-selector-reset-button' onClick={ openModal }>{ strings.reset_style_settings }</Button>
</div>
{ isOpen && (
<Modal className="wpforms-gutenberg-modal"
title={ strings.reset_style_settings}
onRequestClose={ closeModal }>
<p>{ strings.reset_settings_confirm_text }</p>
<Flex gap={3} align="center" justify="flex-end">
<Button isSecondary onClick={ closeModal }>
{strings.btn_no}
</Button>
<Button isPrimary onClick={ () => {
closeModal();
handlers.resetSettings();
} }>
{ strings.btn_yes_reset }
</Button>
</Flex>
</Modal>
) }
</InspectorAdvancedControls>
);
},
/**
* Get block content JSX code.
*
* @since 1.8.1
*
* @param {object} props Block properties.
*
* @returns {JSX.Element} Block content JSX code.
*/
getBlockFormContent: function( props ) {
if ( triggerServerRender ) {
return (
<ServerSideRender
key="wpforms-gutenberg-form-selector-server-side-renderer"
block="wpforms/form-selector"
attributes={ props.attributes }
/>
);
}
const clientId = props.clientId;
const block = app.getBlockContainer( props );
// In the case of empty content, use server side renderer.
// This happens when the block is duplicated or converted to a reusable block.
if ( ! block || ! block.innerHTML ) {
triggerServerRender = true;
return app.jsxParts.getBlockFormContent( props );
}
blocks[ clientId ] = blocks[ clientId ] || {};
blocks[ clientId ].blockHTML = block.innerHTML;
blocks[ clientId ].loadedFormId = props.attributes.formId;
return (
<Fragment key="wpforms-gutenberg-form-selector-fragment-form-html">
<div dangerouslySetInnerHTML={{ __html: blocks[ clientId ].blockHTML }} />
</Fragment>
);
},
/**
* Get block preview JSX code.
*
* @since 1.8.1
*
* @returns {JSX.Element} Block preview JSX code.
*/
getBlockPreview: function() {
return (
<Fragment
key="wpforms-gutenberg-form-selector-fragment-block-preview">
<img src={ wpforms_gutenberg_form_selector.block_preview_url } style={{ width: '100%' }} />
</Fragment>
);
},
/**
* Get block placeholder (form selector) JSX code.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
* @param {object} handlers Block event handlers.
* @param {object} formOptions Form selector options.
*
* @returns {JSX.Element} Block placeholder JSX code.
*/
getBlockPlaceholder: function( attributes, handlers, formOptions ) {
return (
<Placeholder
key="wpforms-gutenberg-form-selector-wrap"
className="wpforms-gutenberg-form-selector-wrap">
<img src={wpforms_gutenberg_form_selector.logo_url} />
<h3>{ strings.title }</h3>
<SelectControl
key="wpforms-gutenberg-form-selector-select-control"
value={ attributes.formId }
options={ formOptions }
onChange={ value => handlers.attrChange( 'formId', value ) }
/>
</Placeholder>
);
},
},
/**
* Get Style Settings panel class.
*
* @since 1.8.1
*
* @param {object} attributes Block attributes.
*
* @returns {string} Style Settings panel class.
*/
getPanelClass: function( attributes ) {
let cssClass = 'wpforms-gutenberg-panel wpforms-block-settings-' + attributes.clientId;
if ( ! app.isFullStylingEnabled() ) {
cssClass += ' disabled_panel';
}
return cssClass;
},
/**
* Determine whether the full styling is enabled.
*
* @since 1.8.1
*
* @returns {boolean} Whether the full styling is enabled.
*/
isFullStylingEnabled: function() {
return wpforms_gutenberg_form_selector.is_modern_markup && wpforms_gutenberg_form_selector.is_full_styling;
},
/**
* Get block container DOM element.
*
* @since 1.8.1
*
* @param {object} props Block properties.
*
* @returns {Element} Block container.
*/
getBlockContainer: function( props ) {
const blockSelector = `#block-${props.clientId} > div`;
let block = document.querySelector( blockSelector );
// For FSE / Gutenberg plugin we need to take a look inside the iframe.
if ( ! block ) {
const editorCanvas = document.querySelector( 'iframe[name="editor-canvas"]' );
block = editorCanvas && editorCanvas.contentWindow.document.querySelector( blockSelector );
}
return block;
},
/**
* Get settings fields event handlers.
*
* @since 1.8.1
*
* @param {object} props Block properties.
*
* @returns {object} Object that contains event handlers for the settings fields.
*/
getSettingsFieldsHandlers: function( props ) { // eslint-disable-line max-lines-per-function
return {
/**
* Field style attribute change event handler.
*
* @since 1.8.1
*
* @param {string} attribute Attribute name.
* @param {string} value New attribute value.
*/
styleAttrChange: function( attribute, value ) {
const block = app.getBlockContainer( props ),
container = block.querySelector( `#wpforms-${props.attributes.formId}` ),
property = attribute.replace( /[A-Z]/g, letter => `-${letter.toLowerCase()}` ),
setAttr = {};
if ( container ) {
switch ( property ) {
case 'field-size':
case 'label-size':
case 'button-size':
for ( const key in sizes[ property ][ value ] ) {
container.style.setProperty(
`--wpforms-${property}-${key}`,
sizes[ property ][ value ][ key ],
);
}
break;
default:
container.style.setProperty( `--wpforms-${property}`, value );
}
}
setAttr[ attribute ] = value;
props.setAttributes( setAttr );
triggerServerRender = false;
this.updateCopyPasteContent();
$( window ).trigger( 'wpformsFormSelectorStyleAttrChange', [ block, props, attribute, value ] );
},
/**
* Field regular attribute change event handler.
*
* @since 1.8.1
*
* @param {string} attribute Attribute name.
* @param {string} value New attribute value.
*/
attrChange: function( attribute, value ) {
const setAttr = {};
setAttr[ attribute ] = value;
props.setAttributes( setAttr );
triggerServerRender = true;
this.updateCopyPasteContent();
},
/**
* Reset Form Styles settings to defaults.
*
* @since 1.8.1
*/
resetSettings: function() {
for ( let key in defaultStyleSettings ) {
this.styleAttrChange( key, defaultStyleSettings[ key ] );
}
},
/**
* Update content of the "Copy/Paste" fields.
*
* @since 1.8.1
*/
updateCopyPasteContent: function() {
let content = {};
let atts = wp.data.select( 'core/block-editor' ).getBlockAttributes( props.clientId );
for ( let key in defaultStyleSettings ) {
content[key] = atts[ key ];
}
props.setAttributes( { 'copyPasteValue': JSON.stringify( content ) } );
},
/**
* Paste settings handler.
*
* @since 1.8.1
*
* @param {string} value New attribute value.
*/
pasteSettings: function( value ) {
let pasteAttributes = app.parseValidateJson( value );
if ( ! pasteAttributes ) {
wp.data.dispatch( 'core/notices' ).createErrorNotice(
strings.copy_paste_error,
{ id: 'wpforms-json-parse-error' }
);
this.updateCopyPasteContent();
return;
}
pasteAttributes.copyPasteValue = value;
props.setAttributes( pasteAttributes );
triggerServerRender = true;
},
};
},
/**
* Parse and validate JSON string.
*
* @since 1.8.1
*
* @param {string} value JSON string.
*
* @returns {boolean|object} Parsed JSON object OR false on error.
*/
parseValidateJson: function( value ) {
if ( typeof value !== 'string' ) {
return false;
}
let atts;
try {
atts = JSON.parse( value );
} catch ( error ) {
atts = false;
}
return atts;
},
/**
* Get WPForms icon DOM element.
*
* @since 1.8.1
*
* @returns {DOM.element} WPForms icon DOM element.
*/
getIcon: function() {
return createElement(
'svg',
{ width: 20, height: 20, viewBox: '0 0 612 612', className: 'dashicon' },
createElement(
'path',
{
fill: 'currentColor',
d: 'M544,0H68C30.445,0,0,30.445,0,68v476c0,37.556,30.445,68,68,68h476c37.556,0,68-30.444,68-68V68 C612,30.445,581.556,0,544,0z M464.44,68L387.6,120.02L323.34,68H464.44z M288.66,68l-64.26,52.02L147.56,68H288.66z M544,544H68 V68h22.1l136,92.14l79.9-64.6l79.56,64.6l136-92.14H544V544z M114.24,263.16h95.88v-48.28h-95.88V263.16z M114.24,360.4h95.88 v-48.62h-95.88V360.4z M242.76,360.4h255v-48.62h-255V360.4L242.76,360.4z M242.76,263.16h255v-48.28h-255V263.16L242.76,263.16z M368.22,457.3h129.54V408H368.22V457.3z',
},
),
);
},
/**
* Get block attributes.
*
* @since 1.8.1
*
* @returns {object} Block attributes.
*/
getBlockAttributes: function() { // eslint-disable-line max-lines-per-function
return {
clientId: {
type: 'string',
default: '',
},
formId: {
type: 'string',
default: defaults.formId,
},
displayTitle: {
type: 'boolean',
default: defaults.displayTitle,
},
displayDesc: {
type: 'boolean',
default: defaults.displayDesc,
},
preview: {
type: 'boolean',
},
fieldSize: {
type: 'string',
default: defaults.fieldSize,
},
fieldBorderRadius: {
type: 'string',
default: defaults.fieldBorderRadius,
},
fieldBackgroundColor: {
type: 'string',
default: defaults.fieldBackgroundColor,
},
fieldBorderColor: {
type: 'string',
default: defaults.fieldBorderColor,
},
fieldTextColor: {
type: 'string',
default: defaults.fieldTextColor,
},
labelSize: {
type: 'string',
default: defaults.labelSize,
},
labelColor: {
type: 'string',
default: defaults.labelColor,
},
labelSublabelColor: {
type: 'string',
default: defaults.labelSublabelColor,
},
labelErrorColor: {
type: 'string',
default: defaults.labelErrorColor,
},
buttonSize: {
type: 'string',
default: defaults.buttonSize,
},
buttonBorderRadius: {
type: 'string',
default: defaults.buttonBorderRadius,
},
buttonBackgroundColor: {
type: 'string',
default: defaults.buttonBackgroundColor,
},
buttonTextColor: {
type: 'string',
default: defaults.buttonTextColor,
},
copyPasteValue: {
type: 'string',
default: defaults.copyPasteValue,
},
};
},
/**
* Get form selector options.
*
* @since 1.8.1
*
* @returns {Array} Form options.
*/
getFormOptions: function() {
const formOptions = wpforms_gutenberg_form_selector.forms.map( value => (
{ value: value.ID, label: value.post_title }
) );
formOptions.unshift( { value: '', label: strings.form_select } );
return formOptions;
},
/**
* Get size selector options.
*
* @since 1.8.1
*
* @returns {Array} Size options.
*/
getSizeOptions: function() {
return [
{
label: strings.small,
value: 'small',
},
{
label: strings.medium,
value: 'medium',
},
{
label: strings.large,
value: 'large',
},
];
},
/**
* Event `wpformsFormSelectorEdit` handler.
*
* @since 1.8.1
*
* @param {object} e Event object.
* @param {object} props Block properties.
*/
blockEdit: function( e, props ) {
const block = app.getBlockContainer( props );
if ( ! block || ! block.dataset ) {
return;
}
app.initLeadFormSettings( block.parentElement );
},
/**
* Init Lead Form Settings panels.
*
* @since 1.8.1
*
* @param {Element} block Block element.
*/
initLeadFormSettings: function( block ) {
if ( ! block || ! block.dataset ) {
return;
}
if ( ! app.isFullStylingEnabled() ) {
return;
}
const clientId = block.dataset.block;
const $form = $( block.querySelector( '.wpforms-container' ) );
const $panel = $( `.wpforms-block-settings-${clientId}` );
if ( $form.hasClass( 'wpforms-lead-forms-container' ) ) {
$panel
.addClass( 'disabled_panel' )
.find( '.wpforms-gutenberg-panel-notice.wpforms-lead-form-notice' )
.css( 'display', 'block' );
$panel
.find( '.wpforms-gutenberg-panel-notice.wpforms-use-modern-notice' )
.css( 'display', 'none' );
return;
}
$panel
.removeClass( 'disabled_panel' )
.find( '.wpforms-gutenberg-panel-notice.wpforms-lead-form-notice' )
.css( 'display', 'none' );
$panel
.find( '.wpforms-gutenberg-panel-notice.wpforms-use-modern-notice' )
.css( 'display', null );
},
/**
* Event `wpformsFormSelectorFormLoaded` handler.
*
* @since 1.8.1
*
* @param {object} e Event object.
*/
formLoaded: function( e ) {
app.initLeadFormSettings( e.detail.block );
app.updateAccentColors( e.detail );
app.loadChoicesJS( e.detail );
app.initRichTextField( e.detail.formId );
$( e.detail.block )
.off( 'click' )
.on( 'click', app.blockClick );
},
/**
* Click on the block event handler.
*
* @since 1.8.1
*
* @param {object} e Event object.
*/
blockClick: function( e ) {
app.initLeadFormSettings( e.currentTarget );
},
/**
* Update accent colors of some fields in GB block in Modern Markup mode.
*
* @since 1.8.1
*
* @param {object} detail Event details object.
*/
updateAccentColors: function( detail ) {
if (
! wpforms_gutenberg_form_selector.is_modern_markup ||
! window.WPForms ||
! window.WPForms.FrontendModern ||
! detail.block
) {
return;
}
const $form = $( detail.block.querySelector( `#wpforms-${detail.formId}` ) ),
FrontendModern = window.WPForms.FrontendModern;
FrontendModern.updateGBBlockPageIndicatorColor( $form );
FrontendModern.updateGBBlockIconChoicesColor( $form );
FrontendModern.updateGBBlockRatingColor( $form );
},
/**
* Init Modern style Dropdown fields (<select>).
*
* @since 1.8.1
*
* @param {object} detail Event details object.
*/
loadChoicesJS: function( detail ) {
if ( typeof window.Choices !== 'function' ) {
return;
}
const $form = $( detail.block.querySelector( `#wpforms-${detail.formId}` ) );
$form.find( '.choicesjs-select' ).each( function( idx, el ) {
const $el = $( el );
if ( $el.data( 'choice' ) === 'active' ) {
return;
}
var args = window.wpforms_choicesjs_config || {},
searchEnabled = $el.data( 'search-enabled' ),
$field = $el.closest( '.wpforms-field' );
args.searchEnabled = 'undefined' !== typeof searchEnabled ? searchEnabled : true;
args.callbackOnInit = function() {
var 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 back.
*/
if ( $element.prop( 'multiple' ) ) {
// On init event.
$input.data( 'placeholder', $input.attr( 'placeholder' ) );
if ( self.getValue( true ).length ) {
$input.removeAttr( 'placeholder' );
}
}
this.disable();
$field.find( '.is-disabled' ).removeClass( 'is-disabled' );
};
try {
const choicesInstance = new Choices( el, args );
// Save Choices.js instance for future access.
$el.data( 'choicesjs', choicesInstance );
} catch ( e ) {} // eslint-disable-line no-empty
} );
},
/**
* Initialize RichText field.
*
* @since 1.8.1
*
* @param {int} formId Form ID.
*/
initRichTextField: function( formId ) {
// Set default tab to `Visual`.
$( `#wpforms-${formId} .wp-editor-wrap` ).removeClass( 'html-active' ).addClass( 'tmce-active' );
},
};
// Provide access to public functions/properties.
return app;
}( document, window, jQuery ) );
// Initialize.
WPForms.FormSelector.init();