Iris Color Picker Palette Problem

• willviles

• August 18, 2014 at 9:19 pm

I’m trying to add custom palette support to my ACF color pickers.

I’ve tried the following method called in acf/input/admin_enqueue_scripts:

acf.add_action('ready append', function( $el ){
  var palette =  ['#f9e0c5', '#dcc6b2', '#f9ebe1', '#344857'];
  acf.get_fields({ type : 'color_picker'}, $el).each(function(){
    $(this).iris('option', 'palettes', palette);
  });
});

But the following error is thrown:

cannot call methods on iris prior to initialization; attempted to call method ‘option’

The following code adds the palette as expected, however (strangely) the color picker stops selecting the correct color when interacting with the draggable gradient. Not sure why.

<?php function load_color_palette_options() {?>
  <script>
  jQuery(document).ready(function($){
    var palette = ['#f9e0c5', '#dcc6b2', '#f9ebe1', '#344857'];
    if ($('.acf-color_picker').length) {
      $('.acf-color_picker').iris({
        palettes: palette
      });
    }
  });
  </script>
<?php } 
add_action( 'admin_print_footer_scripts', 'load_color_palette_options' );?>

Anyone got a suggestion as to what’s the best way to add a custom color picker palette to ACF5 color-picker fields without breaking its functionality?

• ractoon

• November 8, 2014 at 9:54 am

Updated method posted at https://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes

The method below runs into performance issues when combined with repeater/flexible content fields.

This method has worked for me:

function my_acf_admin_head() {
	echo "
	<script>
	(function($){
  	acf.add_action('ready append', function() {
  		acf.get_fields({ type : 'color_picker'}).each(function() {
  	  	$(this).iris({
  			  palettes: ['#efefef', '#0093d0', '#235164', '#203051', '#1b2945', '#181717'],
  			  change: function(event, ui) {
  					$(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
  			  }
  			});
  		});
  	});
	})(jQuery);
	</script>
	";
}

add_action( 'acf/input/admin_head', 'my_acf_admin_head' );