Custom Colorpicker

Developers
1

Hi,

I am trying to integrate a custom field in my custom module plugin. I am using this colorpicker.

My code looks like this -


add_action('fl_builder_control_uabb-color', 'fl_uabb_color', 1, 4);
add_action( 'wp_enqueue_scripts', 'fl_uabb_color_assets', 100 );

/**
* Custom fields
*/
function fl_uabb_color($name, $value, $field, $settings) {
    echo '<input type="text" class="cs-wp-color-picker" />';
}

/**
* Custom field styles and scripts
*/
function fl_uabb_color_assets() {
	if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) {
		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_style( 'cs-wp-color-picker', BB_ULTIMATE_ADDON_URL . 'fields/color-picker/css/cs-wp-color-picker.min.css', array( 'wp-color-picker' ), '1.0.0', 'all' );
		wp_enqueue_script(
			'iris',
			admin_url( 'js/iris.min.js' ),
			array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ),
			false,
			1
		);
		wp_enqueue_script(
			'wp-color-picker-new',
			admin_url( 'js/color-picker.min.js' ),
			array( 'iris' ),
			false,
			1
		);
		wp_enqueue_script( 'cs-wp-color-picker', BB_ULTIMATE_ADDON_URL . 'fields/color-picker/js/cs-wp-color-picker.min.js', array( 'wp-color-picker-new' ), '1.0.0', true );
		$colorpicker_l10n = array(
			'clear' => __( 'Clear' ),
			'defaultString' => __( 'Default' ),
			'pick' => __( 'Select Color' ),
			'current' => __( 'Current Color' ),
		);
		wp_localize_script( 'wp-color-picker-new', 'wpColorPickerL10n', $colorpicker_l10n );
	}
}

But this has modified the existing color picker in such a away - http://goo.gl/s33T8A
The color gradient vanishes. Please help me to debug the exact conflict. Also tell the ways to integrate this color picker into my plugin.

2

Hey Nik,

I’ve moved your thread to the Custom Module section. Also, I’ve already assigned another member of our team to assist you with your concern. :slight_smile:

Ben

3

Hey Nik,

Our picker is built on Iris as well, so it looks like there is a conflict there somewhere. I’ll have to do some digging, so I’ve filed an issue to get this fixed.

Thanks!
Justin

4

Hi Justin,

Is there any update on the conflict which I mentioned above? All I needed was a RGBA option using this color picker. Can you please guide me with it?

5

Hey PC,

That conflict will be resolved in the 1.7.6 update going out today. Give that a shot and let me know how it goes.

Justin

6

Hi Justin,

It seems the conflict is resolved. I have also integrated custom color picker. Seems it works fine. But I need your help with preview section. How do I make it live preview like other fields? How does preview work for custom fields? Also if I do not pass the preview array to the field, it should work with AJAX call, like in other fields. But doesn’t work so. Guide me with it too!

7

Hi pc,

I don’t think that’s currently possible, but if you send me a copy of your module to test, I can find a solution for you.

Thanks,
Justin

8

[Content Hidden]

9

Hi Justin,

Hope your weekend was good! Any update with the custom color picker?

10

Hi pc,

I did, thanks! I’m a bit behind on support but will be having a look at this today.

Justin

11

Hi pc,

There might be a better preview API we can implement in the future, but for now, this should work for you…

$( 'body' ).delegate( '.cs-wp-color-picker', 'change', function( e ){
	
	var input   = $( this ),
		preview = input.closest( '.fl-field' ).data( 'preview' ),
		i 		= null;
	
	if ( 'css' == preview.type ) {	
		if ( 'undefined' != typeof preview.rules ) {
			for ( i in preview.rules ) {
				FLBuilder.preview._previewCSS( preview.rules[ i ], e );
			}
		}
		else {
			FLBuilder.preview._previewCSS( preview, e );
		}
	}
	
} );

Let me know if you have any questions about that.

Justin

12

Hi Justin,

Thanks you very much for your help! Finally, we are able to resolve color picker issue & its working perfect now.

RGBA Color Picker - http://bsf.io/p8vws

Regards,
Pratik