Mini Shell

/* 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 );