Completed
Push — update/changelog-5.2 ( 09baa5...b8cf0c )
by
unknown
182:03 queued 172:51
created

Grunion_Editor_View::add_hooks()   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 6
Code Lines 5

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
eloc 5
nc 1
nop 0
dl 0
loc 6
rs 9.4285
c 0
b 0
f 0
1
<?php
2
3
/*
4
 * A prototype to allow inline editing / editor views for contact forms.\
5
 *
6
 * Originally developed in: http://github.com/automattic/gm2016-grunion-editor
7
 * Authors: Michael Arestad, Andrew Ozz, and George Stephanis
8
 */
9
10
class Grunion_Editor_View {
11
	public static function add_hooks() {
12
		add_action( 'admin_notices', array( __CLASS__, 'handle_editor_view_js' ) );
13
		add_filter( 'mce_external_plugins', array( __CLASS__, 'mce_external_plugins' ) );
14
		add_filter( 'mce_buttons', array( __CLASS__, 'mce_buttons' ) );
15
		add_action( 'admin_head', array( __CLASS__, 'admin_head' ) );
16
	}
17
18
	public static function admin_head() {
19
		remove_action( 'media_buttons', 'grunion_media_button', 999 );
20
		add_action( 'media_buttons', array( __CLASS__, 'grunion_media_button' ), 999 );
21
	}
22
23
	public static function grunion_media_button() {
24
		if ( empty( $GLOBALS['pagenow'] ) || 'press-this.php' === $GLOBALS['pagenow'] ) {
25
			return;
26
		}
27
		$title = __( 'Add Contact Form', 'jetpack' );
28
		?>
29
30
		<button id="insert-jetpack-contact-form" class="button" title="<?php echo esc_attr( $title ); ?>" href="javascript:;">
31
			<span class="jetpack-contact-form-icon"></span>
32
			<?php echo esc_html( $title ); ?>
33
		</button>
34
35
		<?php
36
	}
37
38
	public static function mce_external_plugins( $plugin_array ) {
39
		$plugin_array['grunion_form'] =  plugins_url( 'js/tinymce-plugin-form-button.js', __FILE__ );
40
		return $plugin_array;
41
	}
42
43
	public static function mce_buttons( $buttons ) {
44
		$size = sizeof( $buttons );
45
		$buttons1 = array_slice( $buttons, 0, $size - 1 );
46
		$buttons2 = array_slice( $buttons, $size - 1 );
47
		return array_merge(
48
			$buttons1,
49
			array( 'grunion' ),
50
			$buttons2
51
		);
52
	}
53
54
	/**
55
	 * WordPress Shortcode Editor View JS Code
56
	 */
57
	public static function handle_editor_view_js() {
58
		$current_screen = get_current_screen();
59
		if ( ! isset( $current_screen->id ) || $current_screen->base !== 'post' ) {
60
			return;
61
		}
62
63
		add_action( 'admin_print_footer_scripts', array( __CLASS__, 'editor_view_js_templates' ), 1 );
64
65
		wp_enqueue_style( 'grunion-editor-ui', plugins_url( 'css/editor-ui.css', __FILE__ ) );
66
		wp_style_add_data( 'grunion-editor-ui', 'rtl', 'replace' );
67
		wp_enqueue_script( 'grunion-editor-view', plugins_url( 'js/editor-view.js', __FILE__ ), array( 'wp-util', 'jquery', 'quicktags' ), false, true );
68
		wp_localize_script( 'grunion-editor-view', 'grunionEditorView', array(
69
			'inline_editing_style' => plugins_url( 'css/editor-inline-editing-style.css', __FILE__ ),
70
			'inline_editing_style_rtl' => plugins_url( 'css/editor-inline-editing-style-rtl.css', __FILE__ ),
71
			'dashicons_css_url'    => includes_url( 'css/dashicons.css' ),
72
			'default_form'  => '[contact-field label="' . __( 'Name', 'jetpack' ) . '" type="name"  required="true" /]' .
73
								'[contact-field label="' . __( 'Email', 'jetpack' )   . '" type="email" required="true" /]' .
74
								'[contact-field label="' . __( 'Website', 'jetpack' ) . '" type="url" /]' .
75
								'[contact-field label="' . __( 'Message', 'jetpack' ) . '" type="textarea" /]',
76
			'labels'      => array(
77
				'submit_button_text'  => __( 'Submit', 'jetpack' ),
78
				/** This filter is documented in modules/contact-form/grunion-contact-form.php */
79
				'required_field_text' => apply_filters( 'jetpack_required_field_text', __( '(required)', 'jetpack' ) ),
80
				'edit_close_ays'      => __( 'Are you sure you\'d like to stop editing this form without saving your changes?', 'jetpack' ),
81
				'quicktags_label'     => __( 'contact form', 'jetpack' ),
82
				'tinymce_label'       => __( 'Add contact form', 'jetpack' ),
83
			)
84
		) );
85
86
		add_editor_style( plugins_url( 'css/editor-style.css', __FILE__ ) );
87
	}
88
89
	/**
90
	 * JS Templates.
91
	 */
92
	public static function editor_view_js_templates() {
93
		?>
94
<script type="text/html" id="tmpl-grunion-contact-form">
95
	<form class="card" action='#' method='post' class='contact-form commentsblock' onsubmit="return false;">
96
		{{{ data.body }}}
97
		<p class='contact-submit'>
98
			<input type='submit' value='{{ data.submit_button_text }}' class='pushbutton-wide'/>
99
		</p>
100
	</form>
101
</script>
102
103
<script type="text/html" id="tmpl-grunion-field-email">
104
	<div>
105
		<label for='{{ data.id }}' class='grunion-field-label email'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
106
		<input type='email' name='{{ data.id }}' id='{{ data.id }}' value='{{ data.value }}' class='{{ data.class }}' placeholder='{{ data.placeholder }}' />
107
	</div>
108
</script>
109
110
<script type="text/html" id="tmpl-grunion-field-telephone">
111
	<div>
112
		<label for='{{ data.id }}' class='grunion-field-label telephone'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
113
		<input type='tel' name='{{ data.id }}' id='{{ data.id }}' value='{{ data.value }}' class='{{ data.class }}' placeholder='{{ data.placeholder }}' />
114
	</div>
115
</script>
116
117
<script type="text/html" id="tmpl-grunion-field-textarea">
118
	<div>
119
		<label for='contact-form-comment-{{ data.id }}' class='grunion-field-label textarea'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
120
		<textarea name='{{ data.id }}' id='contact-form-comment-{{ data.id }}' rows='20' class='{{ data.class }}' placeholder='{{ data.placeholder }}'>{{ data.value }}</textarea>
121
	</div>
122
</script>
123
124
<script type="text/html" id="tmpl-grunion-field-radio">
125
	<div>
126
		<label class='grunion-field-label'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
127
		<# _.each( data.options, function( option ) { #>
128
			<label class='grunion-radio-label radio'>
129
				<input type='radio' name='{{ data.id }}' value='{{ option }}' class="{{ data.class }}" <# if ( option === data.value ) print( "checked='checked'" ) #> />
130
				<span>{{ option }}</span>
131
			</label>
132
		<# }); #>
133
		<div class='clear-form'></div>
134
	</div>
135
</script>
136
137
<script type="text/html" id="tmpl-grunion-field-checkbox">
138
	<div>
139
		<label class='grunion-field-label checkbox'>
140
			<input type='checkbox' name='{{ data.id }}' value='<?php esc_attr__( 'Yes', 'jetpack' ); ?>' class="{{ data.class }}" <# if ( data.value ) print( 'checked="checked"' ) #> />
141
				<span>{{ data.label }}</span><# if ( data.required ) print( " <span>" + data.required + "</span>" ) #>
142
		</label>
143
		<div class='clear-form'></div>
144
	</div>
145
</script>
146
147
<script type="text/html" id="tmpl-grunion-field-checkbox-multiple">
148
	<div>
149
		<label class='grunion-field-label'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
150
		<# _.each( data.options, function( option ) { #>
151
			<label class='grunion-checkbox-multiple-label checkbox-multiple'>
152
				<input type='checkbox' name='{{ data.id }}[]' value='{{ option }}' class="{{ data.class }}" <# if ( option === data.value || _.contains( data.value, option ) ) print( "checked='checked'" ) #> />
153
				<span>{{ option }}</span>
154
			</label>
155
		<# }); #>
156
		<div class='clear-form'></div>
157
	</div>
158
</script>
159
160
<script type="text/html" id="tmpl-grunion-field-select">
161
	<div>
162
		<label for='{{ data.id }}' class='grunion-field-label select'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
163
		<select name='{{ data.id }}' id='{{ data.id }}' class="{{ data.class }}">
164
			<# _.each( data.options, function( option ) { #>
165
				<option <# if ( option === data.value ) print( "selected='selected'" ) #>>{{ option }}</option>
166
			<# }); #>
167
		</select>
168
	</div>
169
</script>
170
171
<script type="text/html" id="tmpl-grunion-field-date">
172
	<div>
173
		<label for='{{ data.id }}' class='grunion-field-label {{ data.type }}'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
174
		<input type='date' name='{{ data.id }}' id='{{ data.id }}' value='{{ data.value }}' class="{{ data.class }}" />
175
	</div>
176
</script>
177
178
<script type="text/html" id="tmpl-grunion-field-text">
179
	<div>
180
		<label for='{{ data.id }}' class='grunion-field-label {{ data.type }}'>{{ data.label }}<# if ( data.required ) print( " <span>" + data.required + "</span>" ) #></label>
181
		<input type='text' name='{{ data.id }}' id='{{ data.id }}' value='{{ data.value }}' class='{{ data.class }}' placeholder='{{ data.placeholder }}' />
182
	</div>
183
</script>
184
185
186
<script type="text/html" id="tmpl-grunion-field-edit">
187
	<div class="card is-compact grunion-field-edit grunion-field-{{ data.type }}" aria-label="<?php esc_attr_e( 'Form Field', 'jetpack' ); ?>">
188
		<label class="grunion-name">
189
			<span><?php esc_html_e( 'Field Label', 'jetpack' ); ?></span>
190
			<input type="text" name="label" placeholder="<?php esc_attr_e( 'Label', 'jetpack' ); ?>" value="{{ data.label }}"/>
191
		</label>
192
193
		<?php
194
		$grunion_field_types = array(
195
			'text'              => __( 'Text', 'jetpack' ),
196
			'name'              => __( 'Name', 'jetpack' ),
197
			'email'             => __( 'Email', 'jetpack' ),
198
			'url'               => __( 'Website', 'jetpack' ),
199
			'textarea'          => __( 'Textarea', 'jetpack' ),
200
			'checkbox'          => __( 'Checkbox', 'jetpack' ),
201
			'checkbox-multiple' => __( 'Checkbox with Multiple Items', 'jetpack' ),
202
			'select'            => __( 'Drop down', 'jetpack' ),
203
			'radio'             => __( 'Radio', 'jetpack' ),
204
		);
205
		?>
206
		<div class="grunion-type-options">
207
			<label class="grunion-type">
208
				<?php esc_html_e( 'Field Type', 'jetpack' ); ?>
209
				<select name="type">
210
					<?php foreach ( $grunion_field_types as $type => $label ) : ?>
211
					<option <# if ( '<?php echo esc_js( $type ); ?>' === data.type ) print( "selected='selected'" ) #> value="<?php echo esc_attr( $type ); ?>">
212
						<?php echo esc_html( $label ); ?>
213
					</option>
214
					<?php endforeach; ?>
215
				</select>
216
			</label>
217
218
			<label class="grunion-required">
219
				<input type="checkbox" name="required" value="1" <# if ( data.required ) print( 'checked="checked"' ) #> />
220
				<span><?php esc_html_e( 'Required?', 'jetpack' ); ?></span>
221
			</label>
222
		</div>
223
224
		<label class="grunion-options">
225
			<?php esc_html_e( 'Options', 'jetpack' ); ?>
226
			<ol>
227
				<# if ( data.options ) { #>
228
					<# _.each( data.options, function( option ) { #>
229
						<li><input type="text" name="option" value="{{ option }}" /> <a class="delete-option" href="javascript:;"><span class="screen-reader-text"><?php esc_html_e( 'Delete Option', 'jetpack' ); ?></span></a></li>
230
					<# }); #>
231
				<# } else { #>
232
					<li><input type="text" name="option" /> <a class="delete-option" href="javascript:;"><span class="screen-reader-text"><?php esc_html_e( 'Delete Option', 'jetpack' ); ?></span></a></li>
233
					<li><input type="text" name="option" /> <a class="delete-option" href="javascript:;"><span class="screen-reader-text"><?php esc_html_e( 'Delete Option', 'jetpack' ); ?></span></a></li>
234
					<li><input type="text" name="option" /> <a class="delete-option" href="javascript:;"><span class="screen-reader-text"><?php esc_html_e( 'Delete Option', 'jetpack' ); ?></span></a></li>
235
				<# } #>
236
				<li><a class="add-option" href="javascript:;"><?php esc_html_e( 'Add new option...', 'jetpack' ); ?></a></li>
237
			</ol>
238
		</label>
239
240
		<a href="javascript:;" class="delete-field"><span class="screen-reader-text"><?php esc_html_e( 'Delete Field', 'jetpack' ); ?></span></a>
241
	</div>
242
</script>
243
244
<script type="text/html" id="tmpl-grunion-field-edit-option">
245
	<li><input type="text" name="option" /> <a class="delete-option" href="javascript:;"><span class="screen-reader-text"><?php esc_html_e( 'Delete Option', 'jetpack' ); ?></span></a></li>
246
</script>
247
248
<script type="text/html" id="tmpl-grunion-editor-inline">
249
			<h1 id="form-settings-header" class="grunion-section-header"><?php esc_html_e( 'Form Settings', 'jetpack' ); ?></h1>
250
			<section class="card grunion-form-settings" aria-labelledby="form-settings-header">
251
				<label><?php esc_html_e( 'What would you like the subject of the email to be?', 'jetpack' ); ?>
252
					<input type="text" name="subject" value="{{ data.subject }}" />
253
				</label>
254
				<label><?php esc_html_e( 'Which email address should we send the submissions to?', 'jetpack' ); ?>
255
					<input type="text" name="to" value="{{ data.to }}" />
256
				</label>
257
			</section>
258
			<h1 id="form-fields-header" class="grunion-section-header"><?php esc_html_e( 'Form Fields', 'jetpack' ); ?></h1>
259
			<section class="grunion-fields" aria-labelledby="form-fields-header">
260
				{{{ data.fields }}}
261
			</section>
262
			<section class="buttons">
263
				<?php submit_button( esc_html__( 'Add Field', 'jetpack' ), 'secondary', 'add-field', false ); ?>
264
				<?php submit_button( esc_html__( 'Cancel', 'jetpack' ), 'delete', 'cancel', false ); ?>
265
				<?php submit_button( esc_html__( 'Update Form', 'jetpack' ), 'primary', 'submit', false ); ?>
266
			</section>
267
</script>
268
269
</div>
270
	<?php
271
	}
272
}
273
274
275
Grunion_Editor_View::add_hooks();
276