contact-forms / classes / Element / ColorPicker.php

ColorPicker.php in Contact Forms by Cimatti 2.3.5, at classes/Element/ColorPicker.php

112 lines 3.9 KB

Raw Download Zip

1	<?php
2	/**
3	* Color Picker Field
4	*
5	* Frontend: Uses HTML5 native color input for WCAG 2.2 AA compliance:
6	*
7	* @phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- PFBC framework extension, HTML output is controlled
8	* - Full keyboard navigation (Tab, Enter, Arrow keys)
9	* - Screen reader compatible with native browser support
10	* - European Accessibility Act compliant
11	* - No external dependencies
12	* - Mobile and touch optimized (native OS color picker)
13	* - Works in all modern browsers
14	*
15	* Output format: #rrggbb (backward compatible with jqColorPicker)
16	*
17	* Admin: Uses WordPress wp-color-picker (Iris) for consistency with WP admin UI
18	*/
19	class AccuaForm_Element_ColorPicker extends Element {
20
21	public function __construct($label, $name, ?array $properties = null) {
22	parent::__construct($label,$name,$properties);
23	$this->setValidation(new AccuaForm_Validation_Color());
24	}
25
26	/**
27	* Whether to render the frontend flavor (native HTML5 color input).
28	*
29	* True on the frontend; admin previews that must mirror the frontend
30	* (the Fields page live preview runs through admin-ajax, where
31	* is_admin() is true) force it via the filter.
32	*
33	* @return bool
34	*/
35	protected function isFrontendRender() {
36	/**
37	* Filter to force the frontend rendering of elements inside an
38	* admin-context preview.
39	*
40	* @param bool $force False by default.
41	*/
42	return !is_admin() \|\| apply_filters('accua_forms_preview_render_as_frontend', false);
43	}
44
45	public function jQueryDocumentReady() {
46	parent::jQueryDocumentReady();
47
48	// Only initialize wpColorPicker in admin context where it's available
49	// On frontend, we use HTML5 native color input which doesn't need JS initialization
50	if (!$this->isFrontendRender()) {
51	echo 'if (typeof jQuery.fn.wpColorPicker !== "undefined") {
52	jQuery("#', $this->attributes["id"], '").wpColorPicker({
53	change: function(event, ui) {
54	var element = jQuery(event.target);
55	var color = ui.color.toString();
56	if (color && color !== "") {
57	element.val(color);
58	}
59	},
60	clear: function(event) {
61	jQuery(event.target).val("");
62	}
63	});
64	}';
65	} else {
66	// Frontend: Update hex display when color changes
67	$id = $this->attributes["id"];
68	echo 'jQuery("#', $id, '").on("input change", function() {
69	var hex = jQuery(this).val().toUpperCase();
70	jQuery(this).siblings(".pfbc-color-hex").text(hex);
71	});';
72	}
73	}
74
75	public function render() {
76	// On frontend, change input type to 'color' for native browser color picker
77	// This provides excellent accessibility without any JS dependencies
78	if ($this->isFrontendRender()) {
79	$this->attributes['type'] = 'color';
80	// Set a default value if empty (HTML5 color inputs require a valid color)
81	if (empty($this->attributes['value'])) {
82	$this->attributes['value'] = '#000000';
83	}
84	// Add class for styling
85	$this->setClass('pfbc-color-input');
86
87	// Output wrapper with color input and hex display
88	$value = esc_attr($this->attributes['value']);
89	echo '<div class="pfbc-color-wrapper">';
90	parent::render();
91	echo '<span class="pfbc-color-hex">' . strtoupper($value) . '</span>';
92	echo '</div>';
93	return; // Don't call parent::render() again
94	}
95	parent::render();
96	}
97
98	/**
99	* @deprecated No longer needed - scripts are handled in accua-form-api.php
100	*/
101	public static function maybe_load_colorPicker_scripts(){
102	// Backward compatibility - no longer used
103	}
104
105	/**
106	* @deprecated No longer needed - styles are handled in accua-form-api.php
107	*/
108	public static function maybe_load_colorPicker_styles(){
109	// Backward compatibility - no longer used
110	}
111	}
112