Custom Colorpicker

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Custom Module Development / Custom Colorpicker

This topic is: resolved
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #101978

    pc
    Participant

    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.

    #102062

    Ben Carlo
    Keymaster

    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. 🙂

    Ben

    #102084

    Justin Busa
    Keymaster

    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

    #110161

    pc
    Participant

    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?

    #110218

    Justin Busa
    Keymaster

    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

    #110725

    pc
    Participant

    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!

    #110787

    Justin Busa
    Keymaster

    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

    #110980

    pc
    Participant
    This reply has been marked as private.
    #111429

    pc
    Participant

    Hi Justin,

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

    #111495

    Justin Busa
    Keymaster

    Hi pc,

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

    Justin

    #111513

    Justin Busa
    Keymaster

    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

    #111715

    pc
    Participant

    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

Viewing 12 posts - 1 through 12 (of 12 total)

The forum ‘Custom Module Development’ is closed to new topics and replies.