diff options
Diffstat (limited to 'plugins/jetpack/modules/contact-form/js/editor-view.js')
| -rw-r--r-- | plugins/jetpack/modules/contact-form/js/editor-view.js | 284 |
1 files changed, 284 insertions, 0 deletions
diff --git a/plugins/jetpack/modules/contact-form/js/editor-view.js b/plugins/jetpack/modules/contact-form/js/editor-view.js new file mode 100644 index 00000000..b62d92f8 --- /dev/null +++ b/plugins/jetpack/modules/contact-form/js/editor-view.js @@ -0,0 +1,284 @@ +/* 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 ); |