ACF RGBA Color Picker + ACF Quick Edit Fields

acf-quick-edit-rgba-color-picker.php

<?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');


});