/* global grunionEditorView, tinyMCE, QTags, wp */
( function ( $, wp, grunionEditorView ) {
wp.mce = wp.mce || {};
if ( 'undefined' === typeof wp.mce.views ) {
return;
}
wp.mce.grunion_wp_view_renderer = {
shortcode_string: 'contact-form',
template: wp.template( 'grunion-contact-form' ),
field_templates: {
email: wp.template( 'grunion-field-email' ),
telephone: wp.template( 'grunion-field-telephone' ),
textarea: wp.template( 'grunion-field-textarea' ),
radio: wp.template( 'grunion-field-radio' ),
checkbox: wp.template( 'grunion-field-checkbox' ),
'checkbox-multiple': wp.template( 'grunion-field-checkbox-multiple' ),
select: wp.template( 'grunion-field-select' ),
date: wp.template( 'grunion-field-date' ),
text: wp.template( 'grunion-field-text' ),
name: wp.template( 'grunion-field-text' ),
url: wp.template( 'grunion-field-url' ),
},
edit_template: wp.template( 'grunion-field-edit' ),
editor_inline: wp.template( 'grunion-editor-inline' ),
editor_option: wp.template( 'grunion-field-edit-option' ),
getContent: function () {
var content = this.shortcode.content,
index = 0,
field,
named,
body = '';
// If it's the legacy `[contact-form /]` syntax, populate default fields.
if ( ! content ) {
content = grunionEditorView.default_form;
}
// Render the fields.
while ( ( field = wp.shortcode.next( 'contact-field', content, index ) ) ) {
index = field.index + field.content.length;
named = field.shortcode.attrs.named;
if ( ! named.type || ! this.field_templates[ named.type ] ) {
named.type = 'text';
}
if ( named.required ) {
named.required = grunionEditorView.labels.required_field_text;
}
if ( named.options && 'string' === typeof named.options ) {
named.options = named.options.split( ',' );
}
body += this.field_templates[ named.type ]( named );
}
var options = {
body: body,
submit_button_text: grunionEditorView.labels.submit_button_text,
};
return this.template( options );
},
edit: function ( data, update_callback ) {
var shortcode_data = wp.shortcode.next( this.shortcode_string, data ),
shortcode = shortcode_data.shortcode,
$tinyMCE_document = $( tinyMCE.activeEditor.getDoc() ),
$view = $tinyMCE_document.find( '.wpview.wpview-wrap' ).filter( function () {
return $( this ).attr( 'data-mce-selected' );
} ),
$editframe = $( '<iframe scrolling="no" class="inline-edit-contact-form" />' ),
index = 0,
named,
fields = '',
field;
if ( ! shortcode.content ) {
shortcode.content = grunionEditorView.default_form;
}
// Render the fields.
while ( ( field = wp.shortcode.next( 'contact-field', shortcode.content, index ) ) ) {
index = field.index + field.content.length;
named = field.shortcode.attrs.named;
if ( named.options && 'string' === typeof named.options ) {
named.options = named.options.split( ',' );
}
fields += this.edit_template( named );
}
$editframe.on( 'checkheight', function () {
var innerDoc = this.contentDocument ? this.contentDocument : this.contentWindow.document;
this.style.height = '10px';
this.style.height = 5 + innerDoc.body.scrollHeight + 'px';
tinyMCE.activeEditor.execCommand( 'wpAutoResize' );
} );
$editframe.on( 'load', function () {
var stylesheet_url =
1 === window.isRtl
? grunionEditorView.inline_editing_style_rtl
: grunionEditorView.inline_editing_style,
$stylesheet = $( '<link rel="stylesheet" href="' + stylesheet_url + '" />' ),
$dashicons_css = $(
'<link rel="stylesheet" href="' + grunionEditorView.dashicons_css_url + '" />'
);
$stylesheet.on( 'load', function () {
$editframe.contents().find( 'body' ).css( 'visibility', 'visible' );
$editframe.trigger( 'checkheight' );
} );
$editframe.contents().find( 'head' ).append( $stylesheet ).append( $dashicons_css );
$editframe
.contents()
.find( 'body' )
.html(
wp.mce.grunion_wp_view_renderer.editor_inline( {
to: shortcode.attrs.named.to,
subject: shortcode.attrs.named.subject,
fields: fields,
} )
)
.css( 'visibility', 'hidden' );
$editframe.contents().find( 'input:first' ).focus();
setTimeout( function () {
$editframe.trigger( 'checkheight' );
}, 250 );
// Add a second timeout for super long forms racing, and to not slow it down for shorter forms unnecessarily.
setTimeout( function () {
$editframe.trigger( 'checkheight' );
}, 500 );
var $editfields = $editframe.contents().find( '.grunion-fields' ),
$buttons = $editframe.contents().find( '.grunion-controls' );
$editfields.sortable();
// Now, add all the listeners!
$editfields.on( 'change select', 'select[name=type]', function () {
$( this ).closest( '.grunion-field-edit' )[ 0 ].className =
'card is-compact grunion-field-edit grunion-field-' + $( this ).val();
$editframe.trigger( 'checkheight' );
} );
$editfields.on( 'click', '.delete-option', function ( e ) {
e.preventDefault();
$( this ).closest( 'li' ).remove();
$editframe.trigger( 'checkheight' );
} );
$editfields.on( 'click', '.add-option', function ( e ) {
var $new_option = $( wp.mce.grunion_wp_view_renderer.editor_option() );
e.preventDefault();
$( this ).closest( 'li' ).before( $new_option );
$editframe.trigger( 'checkheight' );
$new_option.find( 'input:first' ).focus();
} );
$editfields.on( 'click', '.delete-field', function ( e ) {
e.preventDefault();
$( this ).closest( '.card' ).remove();
$editframe.trigger( 'checkheight' );
} );
$buttons.find( 'input[name=submit]' ).on( 'click', function () {
var new_data = shortcode;
new_data.type = 'closed';
new_data.attrs = {};
new_data.content = '';
$editfields.children().each( function () {
var field_shortcode = {
tag: 'contact-field',
type: 'single',
attrs: {
label: $( this ).find( 'input[name=label]' ).val(),
type: $( this ).find( 'select[name=type]' ).val(),
},
},
options = [];
if ( $( this ).find( 'input[name=required]:checked' ).length ) {
field_shortcode.attrs.required = '1';
}
$( this )
.find( 'input[name=option]' )
.each( function () {
if ( $( this ).val() ) {
options.push( $( this ).val() );
}
} );
if ( options.length ) {
field_shortcode.attrs.options = options.join( ',' );
}
new_data.content += wp.shortcode.string( field_shortcode );
} );
if ( $editframe.contents().find( 'input[name=to]' ).val() ) {
new_data.attrs.to = $editframe.contents().find( 'input[name=to]' ).val();
}
if ( $editframe.contents().find( 'input[name=subject]' ).val() ) {
new_data.attrs.subject = $editframe.contents().find( 'input[name=subject]' ).val();
}
update_callback( wp.shortcode.string( new_data ) );
} );
$buttons.find( 'input[name=cancel]' ).on( 'click', function () {
update_callback( wp.shortcode.string( shortcode ) );
} );
$buttons.find( 'input[name=add-field]' ).on( 'click', function () {
var $new_field = $( wp.mce.grunion_wp_view_renderer.edit_template( {} ) );
$editfields.append( $new_field );
$editfields.sortable( 'refresh' );
$editframe.trigger( 'checkheight' );
$new_field.find( 'input:first' ).focus();
} );
} );
$view.html( $editframe );
},
};
wp.mce.views.register( 'contact-form', wp.mce.grunion_wp_view_renderer );
// Add the 'text' editor button.
QTags.addButton( 'grunion_shortcode', grunionEditorView.labels.quicktags_label, function () {
QTags.insertContent( '[contact-form]' + grunionEditorView.default_form + '[/contact-form]' );
} );
var $wp_content_wrap = $( '#wp-content-wrap' );
$( '#insert-jetpack-contact-form' ).on( 'click', function ( e ) {
e.preventDefault();
if ( $wp_content_wrap.hasClass( 'tmce-active' ) ) {
tinyMCE.execCommand( 'grunion_add_form' );
} else if ( $wp_content_wrap.hasClass( 'html-active' ) ) {
QTags.insertContent( '[contact-form]' + grunionEditorView.default_form + '[/contact-form]' );
} else {
window.console.error( 'Neither TinyMCE nor QuickTags is active. Unable to insert form.' );
}
} );
} )( jQuery, wp, grunionEditorView );