colorpicker callback modification

If update_graph_colors() is something you wrote for a js function, can you provide that as well, so we can try and recreate the best we can.

It’s just a function to refresh a graph preview section with the new colors, triggered after a user changes or adds a new color. It updates another function which outputs json to the page to be read by the graph:

function update_chart_colors()
{

  var fill_colors = [];
  var line_colors = [];

  $('.chart-bg-fill-color').each(function(){
    var curr_fill_color = $(this).find('input.wp-color-picker');
    fill_colors.push(curr_fill_color.val());
  });

  $('.chart-border-line-color').each(function(){
  var curr_color = $(this).find('input.wp-color-picker');
    if (curr_color != 'undefined') {
      line_colors.push(curr_color.val());
    }
  });

  update_chart('color_bg', fill_colors.toString());
  update_chart('color', line_colors.toString());

}

function update_chart(option, value){
var curr_graph_setting = jQuery.parseJSON(document.getElementById('script-container-graph').innerHTML);
curr_graph_setting[option] = value;
var updated_json = JSON.stringify(curr_graph_setting);
$('#script-container-HC-1').html(updated_json);

}

Thanks

I don’t have a great answer or this, after kicking some tires for about an hour or so.

With the version above, I am not quite sure how to provide the custom change callback to the Iris config. It’s found at https://github.com/Automattic/Iris/blob/master/src/iris.js for a non-minified form. My js may be weak enough to not know how to spot it.

I had noticed that we have an overridden “alpha” version with CMB2, which adds some alpha channels to the color pickers. that “alpha => true” spot in the options spot in our docs.

With that alpha-powered js file loaded, it DOES easily allow for providing a change callback option as demo’d at https://github.com/CMB2/CMB2/wiki/Field-Types#colorpicker. Example:

'attributes' => array(
	'data-colorpicker' => json_encode( array(
		'change' => 'testing',
	) ),
),

Part of that wp-color-picker-alpha.js file is an anonymous function already set for the iris config, but it tries to invoke a function passed in like my “testing” above. However, it’s failing an if statement check to see if the passed value is a function. It’s evaluating to string.

if ( $.isFunction( self.options.change ) ) {
	self.options.change.call( this, event, ui );
}

Googling showed we could get a function out of a string like this:

if ( $.isFunction( window[self.options.change] ) ) {
	window[self.options.change].call( this, event, ui );
}

BUT we don’t have that as part of CMB2 core. So there’s no great way to get it in there, unless you want to edit and re-minify yourself. Not sure how much work you want to do for that part.

I do think/feel there’s an unintended bug in the $.isFunction() part that didn’t fully account for things, and how things would be passed. We’re not able to easily pass non-string values because they would be defined in PHP mode, and thus interpreted as PHP functions.

Looking back to the original replies, I could see why it could be flaky, as I think that attempt with the JS is trying to invoke a new Iris instance on the specified selector. If it does actually return the current instance, then cool, but still probably part of why it’s a bit flaky.

Thanks for taking the time. I figured it out though!

The iris file included overrides the default WP iris, so I just called an another instance of that to override the CMB2 iris function as well so I could add my change callback in there as so:

$.widget( 'a8c.iris', $.a8c.iris, {

  _change: function() {
      this._super();

      var self = this,
        el   = self.element;

      console.log('changed color');
      update_chart_colors();
    },
  });

Works like a charm! Didn’t have to edit the core file or anything, just added that to my JS.

Won’t see me arguing. ??