Ubuntu
( function ( editor, blocks, i18n, element, components, compose, blockEditor ) {
var el = element.createElement;
var registerBlockType = blocks.registerBlockType;
var BlockControls = blockEditor.BlockControls;
var SelectControl = components.SelectControl;
var withState = compose.withState;
var Toolbar = components.Toolbar;
var ToolbarButton = components.ToolbarButton;
var Placeholder = components.Placeholder;
var Spinner = components.Spinner;
var __ = i18n.__;
registerBlockType( 'sowb/widget-block', {
title: __( 'SiteOrigin Widget', 'so-widgets-bundle' ),
description: __( 'Select a SiteOrigin widget from the dropdown.', 'so-widgets-bundle' ),
icon: function() {
return el(
'span',
{
className: 'widget-icon so-widget-icon so-block-editor-icon'
}
)
},
category: 'widgets',
keywords: [sowbBlockEditorAdmin.widgets.reduce( function ( keywords, widgetObj ) {
if ( keywords.length > 0 ) {
keywords += ',';
}
return keywords + widgetObj.name;
}, '' )],
supports: {
html: false,
},
attributes: {
widgetClass: {
type: 'string',
},
widgetData: {
type: 'object',
}
},
edit: withState( {
editing: false,
formInitialized: false,
previewInitialized: false,
widgetFormHtml: '',
widgetSettingsChanged: false,
widgetPreviewHtml: '',
} )( function ( props ) {
function onWidgetClassChange( newWidgetClass ) {
if ( newWidgetClass !== '' ) {
if ( props.widgetSettingsChanged && ! confirm( sowbBlockEditorAdmin.confirmChangeWidget ) ) {
return false;
}
props.setAttributes( { widgetClass: newWidgetClass, widgetData: null } );
props.setState( {
editing: true,
widgetFormHtml: null,
formInitialized: false,
widgetSettingsChanged: false,
widgetPreviewHtml: null,
previewInitialized: false
} );
}
}
function switchToEditing() {
props.setState( { editing: true, formInitialized: false } );
}
function switchToPreview() {
props.setState( { editing: false, previewInitialized: false } );
}
function setupWidgetForm( formContainer ) {
var $mainForm = jQuery( formContainer ).find( '.siteorigin-widget-form-main' );
if ( $mainForm.length > 0 && ! props.formInitialized ) {
var $previewContainer = $mainForm.siblings('.siteorigin-widget-preview');
$previewContainer.find( '> a' ).on( 'click', function ( event ) {
event.stopImmediatePropagation();
switchToPreview();
} );
$mainForm.data( 'backupDisabled', true );
$mainForm.sowSetupForm();
if ( props.attributes.widgetData ) {
// If we call `setWidgetFormValues` with the last parameter ( `triggerChange` ) set to false,
// it won't show the correct values for some fields e.g. color and media fields.
sowbForms.setWidgetFormValues( $mainForm, props.attributes.widgetData );
} else {
props.setAttributes( { widgetData: sowbForms.getWidgetFormValues( $mainForm ) } );
}
$mainForm.on( 'change', function () {
props.setAttributes( { widgetData: sowbForms.getWidgetFormValues( $mainForm ) } );
props.setState( {
widgetSettingsChanged: true,
widgetPreviewHtml: null,
previewInitialized: false
} );
} );
props.setState( { formInitialized: true } );
}
}
function setupWidgetPreview() {
if ( ! props.previewInitialized ) {
jQuery( window.sowb ).trigger( 'setup_widgets', { preview: true } );
props.setState( { previewInitialized: true } );
}
}
if ( props.editing || ! props.attributes.widgetClass || ! props.attributes.widgetData ) {
var widgetsOptions = [];
if ( sowbBlockEditorAdmin.widgets ) {
widgetsOptions = sowbBlockEditorAdmin.widgets.map( function ( widget ) {
return { value: widget.class, label: widget.name };
} );
widgetsOptions.unshift( { value: '', label: __( 'Select widget type', 'so-widgets-bundle' ) } );
}
var loadWidgetForm = props.attributes.widgetClass && ! props.widgetFormHtml;
if ( loadWidgetForm ) {
jQuery.post( {
url: sowbBlockEditorAdmin.restUrl + 'sowb/v1/widgets/forms',
beforeSend: function ( xhr ) {
xhr.setRequestHeader( 'X-WP-Nonce', sowbBlockEditorAdmin.nonce );
},
data: {
widgetClass: props.attributes.widgetClass,
widgetData: props.attributes.widgetData,
}
} )
.done( function( widgetForm ) {
props.setState( { widgetFormHtml: widgetForm } );
} )
.fail( function ( response ) {
var errorMessage = '';
if ( response.hasOwnProperty( 'responseJSON' ) ) {
errorMessage = response.responseJSON.message;
} else if ( response.hasOwnProperty( 'responseText' ) ) {
errorMessage = response.responseText;
}
props.setState( { widgetFormHtml: '' + errorMessage + '
', } );
});
}
var widgetForm = props.widgetFormHtml ? props.widgetFormHtml : '';
return [
!! widgetForm && el(
BlockControls,
{
key: 'controls',
},
el(
Toolbar,
{
label: __( 'Preview widget.', 'so-widgets-bundle' ),
},
el(
ToolbarButton,
{
className: 'components-icon-button components-toolbar__control',
label: __( 'Preview widget.', 'so-widgets-bundle' ),
onClick: switchToPreview,
icon: 'visibility'
}
)
)
),
el(
Placeholder,
{
key: 'placeholder',
className: 'so-widget-placeholder',
label: __( 'SiteOrigin Widget', 'so-widgets-bundle' ),
instructions: __( 'Select the type of widget you want to use:', 'so-widgets-bundle' )
},
( props.loadingWidgets || loadWidgetForm ?
el( Spinner ) :
el(
'div',
{ className: 'so-widget-block-container' },
el(
SelectControl,
{
options: widgetsOptions,
value: props.attributes.widgetClass,
onChange: onWidgetClassChange,
}
),
el( 'div', {
className: 'so-widget-block-form-container',
dangerouslySetInnerHTML: { __html: widgetForm },
ref: setupWidgetForm,
} )
)
)
)
];
} else {
var loadWidgetPreview = ! props.loadingWidgets &&
! props.editing &&
! props.widgetPreviewHtml &&
props.attributes.widgetClass &&
props.attributes.widgetData;
if ( loadWidgetPreview ) {
jQuery.post( {
url: sowbBlockEditorAdmin.restUrl + 'sowb/v1/widgets/previews',
beforeSend: function ( xhr ) {
xhr.setRequestHeader( 'X-WP-Nonce', sowbBlockEditorAdmin.nonce );
},
data: {
widgetClass: props.attributes.widgetClass,
widgetData: props.attributes.widgetData || {}
}
} )
.done( function( widgetPreview ) {
props.setState( {
widgetPreviewHtml: widgetPreview,
previewInitialized: false,
} );
} )
.fail( function ( response ) {
var errorMessage = '';
if ( response.hasOwnProperty( 'responseJSON' ) ) {
errorMessage = response.responseJSON.message;
} else if ( response.hasOwnProperty( 'responseText' ) ) {
errorMessage = response.responseText;
}
props.setState( {
widgetPreviewHtml: '' + errorMessage + '
',
} );
});
}
var widgetPreview = props.widgetPreviewHtml ? props.widgetPreviewHtml : '';
return [
el(
BlockControls,
{ key: 'controls' },
el(
Toolbar,
{
label: __( 'Preview widget.', 'so-widgets-bundle' ),
},
el(
ToolbarButton,
{
className: 'components-icon-button components-toolbar__control',
label: __( 'Edit widget.', 'so-widgets-bundle' ),
onClick: switchToEditing,
icon: 'edit'
}
)
)
),
el(
'div',
{
key: 'preview',
className: 'so-widget-preview-container'
},
( loadWidgetPreview ?
el( 'div', {
className: 'so-widgets-spinner-container'
},
el(
'span',
null,
el( Spinner )
)
) :
el( 'div', {
dangerouslySetInnerHTML: { __html: widgetPreview },
ref: setupWidgetPreview,
} )
)
)
];
}
} ),
save: function () {
// Render in PHP
return null;
}
} );
} )( window.wp.editor, window.wp.blocks, window.wp.i18n, window.wp.element, window.wp.components, window.wp.compose, window.wp.blockEditor );