Last active
June 29, 2021 16:57
ACF RGBA Color Picker + ACF Quick Edit Fields
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Bringing ACF RGBA Color Picker and ACF QuickEdit Fields together. | |
* https://github.com/mcguffin/acf-quick-edit-fields | |
* https://wordpress.org/plugins/acf-rgba-color-picker/ | |
*/ | |
/** | |
* Add field support | |
*/ | |
add_filter('acf_quick_edit_fields_types',function($types){ | |
$types['extended-color-picker'] = array( 'column' => true, 'quickedit' => true, 'bulkedit' => true ); | |
return $types; | |
}); | |
/** | |
* Column output | |
*/ | |
add_filter('acf_qef_column_html_extended-color-picker',function( $html, $object_id, $acf_field ) { | |
$transparent = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==)'; | |
if ( strpos( $acf_field['parent'], 'field_' ) !== false ) { | |
// grouped fields need a different key | |
$parent = get_field_object($acf_field['parent']); | |
$key = $parent['name'] . '_' . $acf_field['name']; | |
} else { | |
$key = $acf_field['key']; | |
} | |
$color = get_field( $key, $object_id ); | |
return sprintf( '<div style="display:inline-block;background-image:%s"><div class="acf-qef-color-indicator" style="background-color:%s"></div></div>', | |
$transparent, | |
$color | |
); | |
}, 10, 3 ); | |
/** | |
* Form element | |
*/ | |
add_filter('acf_qef_input_html_extended-color-picker',function( $html, $input_atts, $is_quickedit, $acf_field ) { | |
$field_type = acf_get_field_type('extended-color-picker'); | |
ob_start(); | |
$acf_field['name'] = $input_atts['name']; | |
$field_type->render_field($acf_field); | |
$ret = ob_get_clean(); | |
$ret = str_replace('class="acf-color-picker"','class="qe-color-picker"',$ret); | |
return $ret; | |
}, 10, 4 ); | |
/** | |
* Update value | |
*/ | |
add_action( 'acf_qef_update_extended-color-picker', function( $value, $object_id, $acf_field ){ | |
update_field( $acf_field['key'], $value, $object_id ); | |
}, 10, 3 ); | |
/** | |
* The JS Part | |
*/ | |
add_action('admin_enqueue_scripts',function(){ | |
$script = <<<'EOT' | |
(function($,qe){ | |
var newtype = { | |
type:'extended-color-picker', | |
initialize:function() { | |
var args = acf.apply_filters('color_picker_args', { | |
defaultColor: false, | |
palettes: true, | |
hide: true, | |
}, this.$el ), | |
palette; | |
this.$input = this.$('[type="text"]').first(); | |
palette = this.$input.closest('.qe-color-picker').data('palette'); | |
if ( palette == 'no-palette' ) { | |
args.palettes = false; | |
} else if ( palette != '' ) { | |
args.palettes = palette.split(';'); | |
} | |
this.$input.wpColorPicker( args ); | |
qe.field.View.prototype.initialize.apply( this, arguments ); | |
}, | |
setValue:function( value ) { | |
this.dntChanged(); | |
this.$input.wpColorPicker( 'color', value ); | |
}, | |
unload:function() { | |
$( 'body' ).off( 'click.wpcolorpicker' ); | |
} | |
}; | |
qe.field.add_type( newtype ); | |
})( jQuery, window.acf_qef ); | |
EOT; | |
wp_add_inline_script( 'acf-quickedit', $script, 'after'); | |
// make sure the picker is always visible | |
$style = <<<'EOT' | |
.inline-edit-row [data-field-type="extended-color-picker"] .acf-input-wrap { | |
overflow:visible; | |
} | |
EOT; | |
wp_add_inline_style('acf-quickedit', $style, 'after'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment