dropdown.js
3 years ago
editor-view.js
6 years ago
grunion-admin.js
3 years ago
grunion-frontend.js
6 years ago
grunion.js
6 years ago
tinymce-plugin-form-button.js
6 years ago
editor-view.js
249 lines
| 1 | /* global grunionEditorView, tinyMCE, QTags, wp */ |
| 2 | ( function ( $, wp, grunionEditorView ) { |
| 3 | wp.mce = wp.mce || {}; |
| 4 | if ( 'undefined' === typeof wp.mce.views ) { |
| 5 | return; |
| 6 | } |
| 7 | |
| 8 | wp.mce.grunion_wp_view_renderer = { |
| 9 | shortcode_string: 'contact-form', |
| 10 | template: wp.template( 'grunion-contact-form' ), |
| 11 | field_templates: { |
| 12 | email: wp.template( 'grunion-field-email' ), |
| 13 | telephone: wp.template( 'grunion-field-telephone' ), |
| 14 | textarea: wp.template( 'grunion-field-textarea' ), |
| 15 | radio: wp.template( 'grunion-field-radio' ), |
| 16 | checkbox: wp.template( 'grunion-field-checkbox' ), |
| 17 | 'checkbox-multiple': wp.template( 'grunion-field-checkbox-multiple' ), |
| 18 | select: wp.template( 'grunion-field-select' ), |
| 19 | date: wp.template( 'grunion-field-date' ), |
| 20 | text: wp.template( 'grunion-field-text' ), |
| 21 | name: wp.template( 'grunion-field-text' ), |
| 22 | url: wp.template( 'grunion-field-url' ), |
| 23 | }, |
| 24 | edit_template: wp.template( 'grunion-field-edit' ), |
| 25 | editor_inline: wp.template( 'grunion-editor-inline' ), |
| 26 | editor_option: wp.template( 'grunion-field-edit-option' ), |
| 27 | getContent: function () { |
| 28 | var content = this.shortcode.content, |
| 29 | index = 0, |
| 30 | field, |
| 31 | named, |
| 32 | body = ''; |
| 33 | |
| 34 | // If it's the legacy `[contact-form /]` syntax, populate default fields. |
| 35 | if ( ! content ) { |
| 36 | content = grunionEditorView.default_form; |
| 37 | } |
| 38 | |
| 39 | // Render the fields. |
| 40 | while ( ( field = wp.shortcode.next( 'contact-field', content, index ) ) ) { |
| 41 | index = field.index + field.content.length; |
| 42 | named = field.shortcode.attrs.named; |
| 43 | if ( ! named.type || ! this.field_templates[ named.type ] ) { |
| 44 | named.type = 'text'; |
| 45 | } |
| 46 | if ( named.required ) { |
| 47 | named.required = grunionEditorView.labels.required_field_text; |
| 48 | } |
| 49 | if ( named.options && 'string' === typeof named.options ) { |
| 50 | named.options = named.options.split( ',' ); |
| 51 | } |
| 52 | body += this.field_templates[ named.type ]( named ); |
| 53 | } |
| 54 | |
| 55 | var options = { |
| 56 | body: body, |
| 57 | submit_button_text: grunionEditorView.labels.submit_button_text, |
| 58 | }; |
| 59 | |
| 60 | return this.template( options ); |
| 61 | }, |
| 62 | edit: function ( data, update_callback ) { |
| 63 | var shortcode_data = wp.shortcode.next( this.shortcode_string, data ), |
| 64 | shortcode = shortcode_data.shortcode, |
| 65 | $tinyMCE_document = $( tinyMCE.activeEditor.getDoc() ), |
| 66 | $view = $tinyMCE_document.find( '.wpview.wpview-wrap' ).filter( function () { |
| 67 | return $( this ).attr( 'data-mce-selected' ); |
| 68 | } ), |
| 69 | $editframe = $( '<iframe scrolling="no" class="inline-edit-contact-form" />' ), |
| 70 | index = 0, |
| 71 | named, |
| 72 | fields = '', |
| 73 | field; |
| 74 | |
| 75 | if ( ! shortcode.content ) { |
| 76 | shortcode.content = grunionEditorView.default_form; |
| 77 | } |
| 78 | |
| 79 | // Render the fields. |
| 80 | while ( ( field = wp.shortcode.next( 'contact-field', shortcode.content, index ) ) ) { |
| 81 | index = field.index + field.content.length; |
| 82 | named = field.shortcode.attrs.named; |
| 83 | if ( named.options && 'string' === typeof named.options ) { |
| 84 | named.options = named.options.split( ',' ); |
| 85 | } |
| 86 | fields += this.edit_template( named ); |
| 87 | } |
| 88 | |
| 89 | $editframe.on( 'checkheight', function () { |
| 90 | var innerDoc = this.contentDocument ? this.contentDocument : this.contentWindow.document; |
| 91 | this.style.height = '10px'; |
| 92 | this.style.height = 5 + innerDoc.body.scrollHeight + 'px'; |
| 93 | tinyMCE.activeEditor.execCommand( 'wpAutoResize' ); |
| 94 | } ); |
| 95 | |
| 96 | $editframe.on( 'load', function () { |
| 97 | var stylesheet_url = |
| 98 | 1 === window.isRtl |
| 99 | ? grunionEditorView.inline_editing_style_rtl |
| 100 | : grunionEditorView.inline_editing_style, |
| 101 | $stylesheet = $( '<link rel="stylesheet" href="' + stylesheet_url + '" />' ), |
| 102 | $dashicons_css = $( |
| 103 | '<link rel="stylesheet" href="' + grunionEditorView.dashicons_css_url + '" />' |
| 104 | ); |
| 105 | |
| 106 | $stylesheet.on( 'load', function () { |
| 107 | $editframe.contents().find( 'body' ).css( 'visibility', 'visible' ); |
| 108 | $editframe.trigger( 'checkheight' ); |
| 109 | } ); |
| 110 | $editframe.contents().find( 'head' ).append( $stylesheet ).append( $dashicons_css ); |
| 111 | |
| 112 | $editframe |
| 113 | .contents() |
| 114 | .find( 'body' ) |
| 115 | .html( |
| 116 | wp.mce.grunion_wp_view_renderer.editor_inline( { |
| 117 | to: shortcode.attrs.named.to, |
| 118 | subject: shortcode.attrs.named.subject, |
| 119 | fields: fields, |
| 120 | } ) |
| 121 | ) |
| 122 | .css( 'visibility', 'hidden' ); |
| 123 | |
| 124 | $editframe.contents().find( 'input:first' ).focus(); |
| 125 | |
| 126 | setTimeout( function () { |
| 127 | $editframe.trigger( 'checkheight' ); |
| 128 | }, 250 ); |
| 129 | |
| 130 | // Add a second timeout for super long forms racing, and to not slow it down for shorter forms unnecessarily. |
| 131 | setTimeout( function () { |
| 132 | $editframe.trigger( 'checkheight' ); |
| 133 | }, 500 ); |
| 134 | |
| 135 | var $editfields = $editframe.contents().find( '.grunion-fields' ), |
| 136 | $buttons = $editframe.contents().find( '.grunion-controls' ); |
| 137 | |
| 138 | $editfields.sortable(); |
| 139 | |
| 140 | // Now, add all the listeners! |
| 141 | |
| 142 | $editfields.on( 'change select', 'select[name=type]', function () { |
| 143 | $( this ).closest( '.grunion-field-edit' )[ 0 ].className = |
| 144 | 'card is-compact grunion-field-edit grunion-field-' + $( this ).val(); |
| 145 | $editframe.trigger( 'checkheight' ); |
| 146 | } ); |
| 147 | |
| 148 | $editfields.on( 'click', '.delete-option', function ( e ) { |
| 149 | e.preventDefault(); |
| 150 | $( this ).closest( 'li' ).remove(); |
| 151 | $editframe.trigger( 'checkheight' ); |
| 152 | } ); |
| 153 | |
| 154 | $editfields.on( 'click', '.add-option', function ( e ) { |
| 155 | var $new_option = $( wp.mce.grunion_wp_view_renderer.editor_option() ); |
| 156 | e.preventDefault(); |
| 157 | $( this ).closest( 'li' ).before( $new_option ); |
| 158 | $editframe.trigger( 'checkheight' ); |
| 159 | $new_option.find( 'input:first' ).focus(); |
| 160 | } ); |
| 161 | |
| 162 | $editfields.on( 'click', '.delete-field', function ( e ) { |
| 163 | e.preventDefault(); |
| 164 | $( this ).closest( '.card' ).remove(); |
| 165 | $editframe.trigger( 'checkheight' ); |
| 166 | } ); |
| 167 | |
| 168 | $buttons.find( 'input[name=submit]' ).on( 'click', function () { |
| 169 | var new_data = shortcode; |
| 170 | |
| 171 | new_data.type = 'closed'; |
| 172 | new_data.attrs = {}; |
| 173 | new_data.content = ''; |
| 174 | |
| 175 | $editfields.children().each( function () { |
| 176 | var field_shortcode = { |
| 177 | tag: 'contact-field', |
| 178 | type: 'single', |
| 179 | attrs: { |
| 180 | label: $( this ).find( 'input[name=label]' ).val(), |
| 181 | type: $( this ).find( 'select[name=type]' ).val(), |
| 182 | }, |
| 183 | }, |
| 184 | options = []; |
| 185 | |
| 186 | if ( $( this ).find( 'input[name=required]:checked' ).length ) { |
| 187 | field_shortcode.attrs.required = '1'; |
| 188 | } |
| 189 | |
| 190 | $( this ) |
| 191 | .find( 'input[name=option]' ) |
| 192 | .each( function () { |
| 193 | if ( $( this ).val() ) { |
| 194 | options.push( $( this ).val() ); |
| 195 | } |
| 196 | } ); |
| 197 | if ( options.length ) { |
| 198 | field_shortcode.attrs.options = options.join( ',' ); |
| 199 | } |
| 200 | |
| 201 | new_data.content += wp.shortcode.string( field_shortcode ); |
| 202 | } ); |
| 203 | |
| 204 | if ( $editframe.contents().find( 'input[name=to]' ).val() ) { |
| 205 | new_data.attrs.to = $editframe.contents().find( 'input[name=to]' ).val(); |
| 206 | } |
| 207 | if ( $editframe.contents().find( 'input[name=subject]' ).val() ) { |
| 208 | new_data.attrs.subject = $editframe.contents().find( 'input[name=subject]' ).val(); |
| 209 | } |
| 210 | |
| 211 | update_callback( wp.shortcode.string( new_data ) ); |
| 212 | } ); |
| 213 | |
| 214 | $buttons.find( 'input[name=cancel]' ).on( 'click', function () { |
| 215 | update_callback( wp.shortcode.string( shortcode ) ); |
| 216 | } ); |
| 217 | |
| 218 | $buttons.find( 'input[name=add-field]' ).on( 'click', function () { |
| 219 | var $new_field = $( wp.mce.grunion_wp_view_renderer.edit_template( {} ) ); |
| 220 | $editfields.append( $new_field ); |
| 221 | $editfields.sortable( 'refresh' ); |
| 222 | $editframe.trigger( 'checkheight' ); |
| 223 | $new_field.find( 'input:first' ).focus(); |
| 224 | } ); |
| 225 | } ); |
| 226 | |
| 227 | $view.html( $editframe ); |
| 228 | }, |
| 229 | }; |
| 230 | wp.mce.views.register( 'contact-form', wp.mce.grunion_wp_view_renderer ); |
| 231 | |
| 232 | // Add the 'text' editor button. |
| 233 | QTags.addButton( 'grunion_shortcode', grunionEditorView.labels.quicktags_label, function () { |
| 234 | QTags.insertContent( '[contact-form]' + grunionEditorView.default_form + '[/contact-form]' ); |
| 235 | } ); |
| 236 | |
| 237 | var $wp_content_wrap = $( '#wp-content-wrap' ); |
| 238 | $( '#insert-jetpack-contact-form' ).on( 'click', function ( e ) { |
| 239 | e.preventDefault(); |
| 240 | if ( $wp_content_wrap.hasClass( 'tmce-active' ) ) { |
| 241 | tinyMCE.execCommand( 'grunion_add_form' ); |
| 242 | } else if ( $wp_content_wrap.hasClass( 'html-active' ) ) { |
| 243 | QTags.insertContent( '[contact-form]' + grunionEditorView.default_form + '[/contact-form]' ); |
| 244 | } else { |
| 245 | window.console.error( 'Neither TinyMCE nor QuickTags is active. Unable to insert form.' ); |
| 246 | } |
| 247 | } ); |
| 248 | } )( jQuery, wp, grunionEditorView ); |
| 249 |