setValidation(new AccuaForm_Validation_Color()); } public function jQueryDocumentReady() { parent::jQueryDocumentReady(); // Only initialize wpColorPicker in admin context where it's available // On frontend, we use HTML5 native color input which doesn't need JS initialization if (is_admin()) { echo 'if (typeof jQuery.fn.wpColorPicker !== "undefined") { jQuery("#', $this->attributes["id"], '").wpColorPicker({ change: function(event, ui) { var element = jQuery(event.target); var color = ui.color.toString(); if (color && color !== "") { element.val(color); } }, clear: function(event) { jQuery(event.target).val(""); } }); }'; } else { // Frontend: Update hex display when color changes $id = $this->attributes["id"]; echo 'jQuery("#', $id, '").on("input change", function() { var hex = jQuery(this).val().toUpperCase(); jQuery(this).siblings(".pfbc-color-hex").text(hex); });'; } } public function render() { // On frontend, change input type to 'color' for native browser color picker // This provides excellent accessibility without any JS dependencies if (!is_admin()) { $this->attributes['type'] = 'color'; // Set a default value if empty (HTML5 color inputs require a valid color) if (empty($this->attributes['value'])) { $this->attributes['value'] = '#000000'; } // Add class for styling $this->setClass('pfbc-color-input'); // Output wrapper with color input and hex display $value = esc_attr($this->attributes['value']); echo '

'; parent::render(); echo '' . strtoupper($value) . ''; echo '

'; return; // Don't call parent::render() again } parent::render(); } /** * @deprecated No longer needed - scripts are handled in accua-form-api.php */ public static function maybe_load_colorPicker_scripts(){ // Backward compatibility - no longer used } /** * @deprecated No longer needed - styles are handled in accua-form-api.php */ public static function maybe_load_colorPicker_styles(){ // Backward compatibility - no longer used } }