| 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 |
public function jQueryDocumentReady() { |
| 27 |
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 |
} |
| 54 |
} |
| 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'; |
| 64 |
} |
| 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 |
| 75 |
} |
| 76 |
parent::render(); |
| 77 |
} |
| 78 |
|
| 79 |
/** |
| 80 |
* @deprecated No longer needed - scripts are handled in accua-form-api.php |
| 81 |
*/ |
| 82 |
public static function maybe_load_colorPicker_scripts(){ |
| 83 |
// Backward compatibility - no longer used |
| 84 |
} |
| 85 |
|
| 86 |
/** |
| 87 |
* @deprecated No longer needed - styles are handled in accua-form-api.php |
| 88 |
*/ |
| 89 |
public static function maybe_load_colorPicker_styles(){ |
| 90 |
// Backward compatibility - no longer used |
| 91 |
} |
| 92 |
} |
| 93 |
|
