← All changes | classes/Element/ColorPicker.php +59 -68 2.1.2 → 1.9.2 View file →

		@@ -1,25 +1,26 @@
1	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	2	class AccuaForm_Element_ColorPicker extends Element {
	3	+ /**
	4	+ * Status that changes to 1 if WordPress is ready to load javascripts, and changes to 2 when color picker scripts are loaded
	5	+ *
	6	+ * @var int
	7	+ */
	8	+ protected static $_cp_loaded_scripts = 0;
	9	+ /**
	10	+ * Status that changes to 1 if WordPress is ready to load styles, and changes to 2 when color picker styles are loaded
	11	+ *
	12	+ * @var int
	13	+ */
	14	+ protected static $_cp_loaded_styles = 0;
	15	+ /**
	16	+ * Status that changes to TRUE when a color picker field is rendered, meaning that scripts and styles are needed
	17	+ *
	18	+ * @var bool
	19	+ */
	20	+ protected static $_cp_required_script_styles = FALSE;
20	21
21		- public function __construct($label, $name, ?array $properties = null) {
	22	+ public function __construct($label, $name, array $properties = null) {
22	23	parent::__construct($label,$name,$properties);
23	24	$this->setValidation(new AccuaForm_Validation_Color());
24	25	}
25	26
		@@ -24,69 +25,59 @@
24	25	}
25	26
26	27	public function jQueryDocumentReady() {
27	28	parent::jQueryDocumentReady();
28		-
29		- // Only initialize wpColorPicker in admin context where it's available
30		- // On frontend, we use HTML5 native color input which doesn't need JS initialization
31		- if (is_admin()) {
32		- echo 'if (typeof jQuery.fn.wpColorPicker !== "undefined") {
33		- jQuery("#', $this->attributes["id"], '").wpColorPicker({
34		- change: function(event, ui) {
35		- var element = jQuery(event.target);
36		- var color = ui.color.toString();
37		- if (color && color !== "") {
38		- element.val(color);
39		- }
40		- },
41		- clear: function(event) {
42		- jQuery(event.target).val("");
43		- }
44		- });
45		- }';
46		- } else {
47		- // Frontend: Update hex display when color changes
48		- $id = $this->attributes["id"];
49		- echo 'jQuery("#', $id, '").on("input change", function() {
50		- var hex = jQuery(this).val().toUpperCase();
51		- jQuery(this).siblings(".pfbc-color-hex").text(hex);
52		- });';
53		- }
	29	+ echo 'jQuery("#', $this->attributes["id"], '").colorPicker({opacity: false, renderCallback: function($elm, toggled){
	30	+ if ($elm.val() != "") {
	31	+ $elm.val("#"+this.color.colors.HEX);
	32	+ }
	33	+ }});';
54	34	}
55		-
56		- public function render() {
57		- // On frontend, change input type to 'color' for native browser color picker
58		- // This provides excellent accessibility without any JS dependencies
59		- if (!is_admin()) {
60		- $this->attributes['type'] = 'color';
61		- // Set a default value if empty (HTML5 color inputs require a valid color)
62		- if (empty($this->attributes['value'])) {
63		- $this->attributes['value'] = '#000000';
	35	+
	36	+ /**
	37	+ * Loads scripts and styles for color picker only once, if needed, when WordPress is ready
	38	+ *
	39	+ * @return void
	40	+ */
	41	+ protected static function maybe_load_colorPicker_scripts_styles() {
	42	+ if (self::$_cp_required_script_styles) { // scripts and styles are needed
	43	+ if (self::$_cp_loaded_scripts == 1) { // WordPress is ready to load scripts
	44	+ self::$_cp_loaded_scripts = 2; // Change status to load them just once
	45	+ wp_enqueue_script('accua-jqColorPicker', plugins_url('/js/jqColorPicker.min.js', ACCUA_FORMS_FILE ), array( 'jquery' ), ACCUA_FORMS_JS_VERSION);
64	46	}
65		- // Add class for styling
66		- $this->setClass('pfbc-color-input');
67		-
68		- // Output wrapper with color input and hex display
69		- $value = esc_attr($this->attributes['value']);
70		- echo '<div class="pfbc-color-wrapper">';
71		- parent::render();
72		- echo '<span class="pfbc-color-hex">' . strtoupper($value) . '</span>';
73		- echo '</div>';
74		- return; // Don't call parent::render() again
	47	+ if (self::$_cp_loaded_styles == 1) { // WordPress is ready to load styles
	48	+ self::$_cp_loaded_styles = 2; // Change status to load them just once
	49	+ // wp_enqueue_style(...) here if needed
	50	+ }
75	51	}
76		- parent::render();
77	52	}
78	53
79	54	/**
80		- * @deprecated No longer needed - scripts are handled in accua-form-api.php
	55	+ * Function called during action wp_print_scripts to change status of self::$_cp_loaded_scripts and load scripts if needed
	56	+ *
	57	+ * @return void
81	58	*/
82	59	public static function maybe_load_colorPicker_scripts(){
83		- // Backward compatibility - no longer used
	60	+ if (self::$_cp_loaded_scripts == 0) { // First time
	61	+ self::$_cp_loaded_scripts = 1; // When we are in this status, WordPress is ready to load scripts
	62	+ self::maybe_load_colorPicker_scripts_styles(); // Load scripts if they were previously set as needed
	63	+ }
84	64	}
85	65
86	66	/**
87		- * @deprecated No longer needed - styles are handled in accua-form-api.php
	67	+ * Function called during action wp_print_styles to change status of self::$_cp_loaded_styles and load styles if needed
	68	+ *
	69	+ * @return void
88	70	*/
89	71	public static function maybe_load_colorPicker_styles(){
90		- // Backward compatibility - no longer used
	72	+ if (self::$_cp_loaded_styles == 0) { // First time
	73	+ self::$_cp_loaded_styles = 1; // When we are in this status, WordPress is ready to load styles
	74	+ self::maybe_load_colorPicker_scripts_styles(); // Load styles if they were previously set as needed
	75	+ }
	76	+ }
	77	+
	78	+ public function render() {
	79	+ self::$_cp_required_script_styles = TRUE; // Changing status meaning that script and styles are needed
	80	+ self::maybe_load_colorPicker_scripts_styles(); // Load script and styles once if WordPress is ready
	81	+ parent::render();
91	82	}
92	83	}