automatorwp / libraries / cmb2-field-js-controls / readme.md

readme.md in AutomatorWP – No-Code Workflow Automation, Integration & Webhooks Plugin, now with AI 5.8.6, at libraries/cmb2-field-js-controls/readme.md

110 lines 3.8 KB

Raw Download Zip

1	CMB2 Field JS Controls
2	==================
3
4	Plugin for [](https://github.com/WebDevStudios/CMB2CMB2](https://github.com/WebDevStudios/CMB2](https://github.com/WebDevStudios/CMB2) to show any field similar to Wordpress publishing actions (Post/Page post_status, visibility and post_date submit box field).
5
6	![example](example.gif)
7
8	## Installation
9
10	You can install this field type as you would a WordPress plugin:
11
12	- Download the plugin
13	- Place the plugin folder in your /wp-content/plugins/ directory
14	- Activate the plugin in the Plugin dashboard
15
16	## Parameters
17
18	Options :
19	- icon (string, default = '') : Icon to show. Dashicons supported by default so you only need to define `dashicons-edit` instead of `dashicons dashicons-edit`. Empty means no icon.
20	- js_controls (array) : Array of setting for the javascript controls to edit, save and cancel
21	- edit_button (string, default = 'Edit') : Text of edit button
22	- save_button (string, default = 'OK') : Text of save button
23	- cancel_button (string, default = 'Cancel') : Text of cancel button
24
25	### Important note
26	Currently there is no way to output content before/after a field based on custom parameter value so to use this plugin you need setup your field like in examples section.
27
28	## Examples
29
30	```php
31	add_action( 'cmb2_admin_init', 'cmb2_js_controls_metabox' );
32	function cmb2_js_controls_metabox() {
33
34	$prefix = 'your_prefix_demo_';
35
36	$cmb = new_cmb2_box( array(
37	'id' => $prefix . 'metabox',
38	'title' => __( 'Test Metabox', 'cmb2' ),
39	'object_types' => array( 'page', 'post' ), // Post type
40	) );
41
42	$cmb->add_field( array(
43	'name' => __( 'Text field', 'cmb2' ),
44	'desc' => '',
45	'id' => 'js_field',
46	'type' => 'text',
47	// CMB2 Field JS Controls parameters
48	'js_controls' => array(
49	'icon' => 'dashicons-dashboard',
50	),
51
52	// Temporal solution to output html content
53	'before_row' => 'js_controls_before',
54	'after_row' => 'js_controls_after',
55	) );
56
57	$cmb->add_field( array(
58	'name' => __( 'Select field', 'cmb2' ),
59	'desc' => '',
60	'id' => 'js_field_2',
61	'type' => 'select',
62	'options' => array(
63	'option_1' => __( 'Option 1', 'cmb2' ),
64	'option_2' => __( 'Option 2', 'cmb2' ),
65	'option_3' => __( 'Option 3', 'cmb2' ),
66	),
67	// CMB2 Field JS Controls parameters
68	'js_controls' => array(
69	'icon' => 'dashicons-admin-users',
70	'edit_button' => __( 'Modify', 'cmb2' ),
71	'save_button' => __( 'Save', 'cmb2' ),
72	'cancel_button' => __( 'Revert', 'cmb2' ),
73	),
74
75	// Temporal solution to output html content
76	'before_row' => 'js_controls_before',
77	'after_row' => 'js_controls_after',
78	) );
79
80	}
81	```
82
83	## Customize how CMB2 Field JS Controls output the field value
84
85	CMB2 Field JS Controls includes [](https://github.com/carldanley/WP-JS-HooksWP JS Hooks](https://github.com/carldanley/WP-JS-Hooks](https://github.com/carldanley/WP-JS-Hooks) library where you can filter the output when field value changes using filters `cmb_js_controls_display_{field_id}` and `cmb_js_controls_display_{field_type}`.
86
87	```javascript
88	wp.hooks.addFilter( 'cmb_js_controls_display_js_field', custom_field_output_by_field_id );
89	function custom_field_output_by_field_id( output, field, field_type ) {
90	if( field.val().includes( '.' ) ) {
91	output = '<span class="my-custom-class">' + field.val().replace( '.', ',' ) + ' €</span>';
92	}
93
94	return output;
95	}
96
97	wp.hooks.addFilter( 'cmb_js_controls_display_select', custom_field_output_by_field_type );
98	function custom_field_output_by_field_type( output, field ) {
99	if( field.val() == '' ) {
100	output = '<span class="my-custom-class">None</span>';
101	}
102
103	return output;
104	}
105	```
106
107	## Changelog
108
109	### 1.0.0
110	* Initial commit