class-acf-field-color_picker.php — Secure Custom Fields 6.9.1

secure-custom-fields / includes / fields / class-acf-field-color_picker.php

secure-custom-fields / includes / fields Last commit date

class-acf-field-color_picker.php

421 lines

1	<?php
2
3	if ( ! class_exists( 'acf_field_color_picker' ) ) :
4
5	class acf_field_color_picker extends acf_field {
6
7
8	/**
9	* This function will setup the field type data
10	*
11	* @type function
12	* @date 5/03/2014
13	* @since ACF 5.0.0
14	*
15	* @param n/a
16	* @return n/a
17	*/
18	function initialize() {
19
20	// vars
21	$this->name = 'color_picker';
22	$this->label = __( 'Color Picker', 'secure-custom-fields' );
23	$this->category = 'advanced';
24	$this->description = __( 'An interactive UI for selecting a color, or specifying a Hex value.', 'secure-custom-fields' );
25	$this->preview_image = acf_get_url() . '/assets/images/field-type-previews/field-preview-color-picker.png';
26	$this->doc_url = 'https://developer.wordpress.org/secure-custom-fields/features/fields/color-picker/';
27	$this->tutorial_url = 'https://developer.wordpress.org/secure-custom-fields/features/fields/color-picker/color-picker-tutorial/';
28	$this->defaults = array(
29	'default_value' => '',
30	'enable_opacity' => false,
31	'custom_palette_source' => '',
32	'palette_colors' => '',
33	'show_color_wheel' => true,
34	'return_format' => 'string', // Possible values: 'string' or 'array'.
35	);
36	}
37
38
39	/**
40	* description
41	*
42	* @type function
43	* @date 16/12/2015
44	* @since ACF 5.3.2
45	*
46	* @param $post_id (int)
47	* @return $post_id (int)
48	*/
49	function input_admin_enqueue_scripts() {
50
51	// Register scripts for non-admin.
52	// Applies logic from wp_default_scripts() function defined in "wp-includes/script-loader.php".
53	if ( ! is_admin() ) {
54	$suffix = defined( 'SCF_DEVELOPMENT_MODE' ) && SCF_DEVELOPMENT_MODE ? '' : '.min';
55	$scripts = wp_scripts();
56	$scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
57	$scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
58
59	// Handle localisation across multiple WP versions.
60	// WP 5.0+
61	if ( method_exists( $scripts, 'set_translations' ) ) {
62	$scripts->set_translations( 'wp-color-picker' );
63	// WP 4.9
64	} else {
65	$scripts->localize(
66	'wp-color-picker',
67	'wpColorPickerL10n',
68	array(
69	'clear' => __( 'Clear', 'secure-custom-fields' ),
70	'clearAriaLabel' => __( 'Clear color', 'secure-custom-fields' ),
71	'defaultString' => __( 'Default', 'secure-custom-fields' ),
72	'defaultAriaLabel' => __( 'Select default color', 'secure-custom-fields' ),
73	'pick' => __( 'Select Color', 'secure-custom-fields' ),
74	'defaultLabel' => __( 'Color value', 'secure-custom-fields' ),
75	)
76	);
77	}
78	}
79
80	// Enqueue alpha color picker assets.
81	wp_enqueue_script(
82	'acf-color-picker-alpha',
83	acf_get_url( 'assets/inc/color-picker-alpha/wp-color-picker-alpha.js' ),
84	array( 'jquery', 'wp-color-picker' ),
85	'3.0.0'
86	);
87
88	// Enqueue.
89	wp_enqueue_style( 'wp-color-picker' );
90	wp_enqueue_script( 'wp-color-picker' );
91
92	acf_localize_data(
93	array(
94	'colorPickerL10n' => array(
95	'hex_string' => __( 'Hex String', 'secure-custom-fields' ),
96	'rgba_string' => __( 'RGBA String', 'secure-custom-fields' ),
97	),
98	)
99	);
100	}
101
102
103	/**
104	* Create the HTML interface for your field
105	*
106	* @param $field - an array holding all the field's data
107	*
108	* @type action
109	* @since ACF 3.6
110	* @date 23/01/13
111	*/
112	public function render_field( $field ) {
113	$text_input = acf_get_sub_array( $field, array( 'id', 'class', 'name', 'value' ) );
114	$hidden_input = acf_get_sub_array( $field, array( 'name', 'value' ) );
115	$text_input['data-alpha-skip-debounce'] = true;
116
117	// Color picker alpha library requires a specific data attribute to exist.
118	if ( $field['enable_opacity'] ) {
119	$text_input['data-alpha-enabled'] = true;
120	}
121
122	// Handle color palette when the theme supports theme.json.
123	if ( wp_theme_has_theme_json() ) {
124	// If the field was set to use themejson.
125	if ( 'themejson' === $field['custom_palette_source'] ) {
126	$text_input['data-acf-palette-type'] = 'custom';
127
128	// Get the palette (theme + custom).
129	$global_settings = wp_get_global_settings();
130	$palette = $global_settings['color']['palette']['theme'] ?? array();
131
132	// Extract only the color values.
133	$color_values = array_map(
134	fn( $c ) => $c['color'] ?? null,
135	$palette
136	);
137
138	// Remove nulls (in case any entries are missing 'color')
139	$color_values = array_filter( $color_values );
140
141	$hex_string = implode( ',', $color_values );
142
143	$text_input['data-acf-palette-colors'] = $hex_string;
144	} elseif ( 'custom' === $field['custom_palette_source'] && ! empty( $field['palette_colors'] ) ) {
145	// If the field was set to use a custom palette.
146	$text_input['data-acf-palette-type'] = 'custom';
147	$text_input['data-acf-palette-colors'] = $field['palette_colors'];
148	} elseif ( '' === $field['custom_palette_source'] && ! empty( $field['palette_colors'] ) ) {
149	// This state can happen if they switched from a classic theme to a themejson theme without resaving the field.
150	$text_input['data-acf-palette-type'] = 'custom';
151	$text_input['data-acf-palette-colors'] = $field['palette_colors'];
152	} else {
153	// Fallback to use the default color palette for the iris color picker.
154	$text_input['data-acf-palette-type'] = 'default';
155	}
156	// phpcs:disable Universal.ControlStructures.DisallowLonelyIf.Found
157	} else {
158	// Handle color palette for themes that do not support themejson.
159	if ( ! empty( $field['palette_colors'] ) ) {
160	$text_input['data-acf-palette-type'] = 'custom';
161	$text_input['data-acf-palette-colors'] = $field['palette_colors'];
162	} else {
163	// Fallback to use the default color palette for the iris color picker.
164	$text_input['data-acf-palette-type'] = 'default';
165	}
166	}
167
168	// html
169	?>
170	<div class="acf-color-picker<?php echo esc_attr( ! $field['show_color_wheel'] ? ' acf-hide-color-picker-color-wheel' : '' ); ?>">
171	<?php acf_hidden_input( $hidden_input ); ?>
172	<?php acf_text_input( $text_input ); ?>
173	</div>
174	<?php
175	}
176
177
178	/**
179	* Create extra options for your field. This is rendered when editing a field.
180	* The value of $field['name'] can be used (like bellow) to save extra data to the $field
181	*
182	* @type action
183	* @since ACF 3.6
184	* @date 23/01/13
185	*
186	* @param $field - an array holding all the field's data
187	*/
188	function render_field_settings( $field ) {
189
190	// display_format
191	acf_render_field_setting(
192	$field,
193	array(
194	'label' => __( 'Default Value', 'secure-custom-fields' ),
195	'instructions' => '',
196	'type' => 'text',
197	'name' => 'default_value',
198	'placeholder' => '#FFFFFF',
199	)
200	);
201
202	// Toggle opacity control.
203	acf_render_field_setting(
204	$field,
205	array(
206	'label' => __( 'Enable Transparency', 'secure-custom-fields' ),
207	'instructions' => '',
208	'type' => 'true_false',
209	'name' => 'enable_opacity',
210	'ui' => 1,
211	)
212	);
213
214	// Return format control.
215	acf_render_field_setting(
216	$field,
217	array(
218	'label' => __( 'Return Format', 'secure-custom-fields' ),
219	'instructions' => '',
220	'type' => 'radio',
221	'name' => 'return_format',
222	'layout' => 'horizontal',
223	'choices' => array(
224	'string' => __( 'Hex String', 'secure-custom-fields' ),
225	'array' => __( 'RGBA Array', 'secure-custom-fields' ),
226	),
227	)
228	);
229	}
230
231
232	/**
233	* Renders the field settings used in the "Presentation" tab.
234	*
235	* @since 6.0
236	*
237	* @param array $field The field settings array.
238	* @return void
239	*/
240	public function render_field_presentation_settings( $field ) {
241	acf_render_field_setting(
242	$field,
243	array(
244	'label' => __( 'Show Custom Palette', 'secure-custom-fields' ),
245	'instructions' => '',
246	'type' => 'true_false',
247	'name' => 'show_custom_palette',
248	'ui' => 1,
249	)
250	);
251
252	$custom_palette_conditions = array(
253	'field' => 'show_custom_palette',
254	'operator' => '==',
255	'value' => 1,
256	);
257
258	if ( wp_theme_has_theme_json() ) {
259	acf_render_field_setting(
260	$field,
261	array(
262	'label' => __( 'Custom Palette Source', 'secure-custom-fields' ),
263	'instructions' => '',
264	'type' => 'radio',
265	'name' => 'custom_palette_source',
266	'layout' => 'vertical',
267	'choices' => array(
268	'custom' => __( 'Specify custom colors', 'secure-custom-fields' ),
269	'themejson' => __( 'Use colors from theme.json', 'secure-custom-fields' ),
270	),
271	'conditions' => array(
272	'field' => 'show_custom_palette',
273	'operator' => '==',
274	'value' => 1,
275	),
276	)
277	);
278
279	$custom_palette_conditions = array(
280	'field' => 'custom_palette_source',
281	'operator' => '==',
282	'value' => 'custom',
283	);
284	}
285
286	acf_render_field_setting(
287	$field,
288	array(
289	'label' => __( 'Custom Palette', 'secure-custom-fields' ),
290	'instructions' => __( 'Use a custom color palette by entering comma separated hex or rgba values', 'secure-custom-fields' ),
291	'type' => 'text',
292	'name' => 'palette_colors',
293	'conditions' => $custom_palette_conditions,
294	)
295	);
296
297	acf_render_field_setting(
298	$field,
299	array(
300	'label' => __( 'Show Color Wheel', 'secure-custom-fields' ),
301	'instructions' => '',
302	'type' => 'true_false',
303	'name' => 'show_color_wheel',
304	'default_value' => 1,
305	'ui' => 1,
306	)
307	);
308	}
309
310
311	/**
312	* Format the value for use in templates. At this stage, the value has been loaded from the
313	* database and is being returned by an API function such as get_field(), the_field(), etc.
314	*
315	* @since ACF 5.10
316	*
317	* @param mixed $value The field value
318	* @param integer $post_id The post ID
319	* @param array $field The field array
320	* @return string\|array
321	*/
322	public function format_value( $value, $post_id, $field ) {
323	if ( isset( $field['return_format'] ) && $field['return_format'] === 'array' ) {
324	$value = $this->string_to_array( $value );
325	}
326
327	return $value;
328	}
329
330	/**
331	* Convert either a Hexadecimal or RGBA string to an RGBA array.
332	*
333	* @since ACF 5.10
334	* @date 15/12/20
335	*
336	* @param string $value
337	* @return array
338	*/
339	private function string_to_array( $value ) {
340	$value = is_string( $value ) ? trim( $value ) : '';
341
342	// Match and collect r,g,b values from 6 digit hex code. If there are 4
343	// match-results, we have the values we need to build an r,g,b,a array.
344	preg_match( '/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i', $value, $matches );
345	if ( count( $matches ) === 4 ) {
346	return array(
347	'red' => hexdec( $matches[1] ),
348	'green' => hexdec( $matches[2] ),
349	'blue' => hexdec( $matches[3] ),
350	'alpha' => (float) 1,
351	);
352	}
353
354	// Match and collect r,g,b values from 3 digit hex code. If there are 4
355	// match-results, we have the values we need to build an r,g,b,a array.
356	// We have to duplicate the matched hex digit for 3 digit hex codes.
357	preg_match( '/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i', $value, $matches );
358	if ( count( $matches ) === 4 ) {
359	return array(
360	'red' => hexdec( $matches[1] . $matches[1] ),
361	'green' => hexdec( $matches[2] . $matches[2] ),
362	'blue' => hexdec( $matches[3] . $matches[3] ),
363	'alpha' => (float) 1,
364	);
365	}
366
367	// Attempt to match an rgba(…) or rgb(…) string (case-insensitive), capturing the decimals
368	// as a string. If there are two match results, we have the RGBA decimal values as a
369	// comma-separated string. Break it apart and, depending on the number of values, return
370	// our formatted r,g,b,a array.
371	preg_match( '/^rgba?$([0-9,.]+)$/i', $value, $matches );
372	if ( count( $matches ) === 2 ) {
373	$decimals = explode( ',', $matches[1] );
374
375	// Handle rgba() format.
376	if ( count( $decimals ) === 4 ) {
377	return array(
378	'red' => (int) $decimals[0],
379	'green' => (int) $decimals[1],
380	'blue' => (int) $decimals[2],
381	'alpha' => (float) $decimals[3],
382	);
383	}
384
385	// Handle rgb() format.
386	if ( count( $decimals ) === 3 ) {
387	return array(
388	'red' => (int) $decimals[0],
389	'green' => (int) $decimals[1],
390	'blue' => (int) $decimals[2],
391	'alpha' => (float) 1,
392	);
393	}
394	}
395
396	return array(
397	'red' => 0,
398	'green' => 0,
399	'blue' => 0,
400	'alpha' => (float) 0,
401	);
402	}
403
404	/**
405	* Returns an array of JSON-LD Property output types that are supported by this field type.
406	*
407	* @since 6.8
408	*
409	* @return string[]
410	*/
411	public function get_jsonld_output_types(): array {
412	return array( 'Text' );
413	}
414	}
415
416	// initialize
417	acf_register_field_type( 'acf_field_color_picker' );
418	endif; // class_exists check
419
420	?>
421