wp 3.5 color picker

[riyaku]

Any plan to use wp 3.5 new color picker? Option framework has implemented it if that make work easier. Thanks :-)

[evertiro]

It's planned! Just have to bite the bullet and write it :)

[asheborocreative]

I did this on my mutated version of NHP (I say mutated because that's essentially what happened to it when I started changing things lol). I'll post it here when I get a chance. It checks for version 3.5 and uses Farbtastic if it's a Wordpress version below. I haven't had a chance to really look through Redux yet but I'm sure what I've done can be easily re-purposed for it.

[asheborocreative]

@ghost1227 Maybe this will help you get it done quicker. These are the changes to mine on the NHP version. I replaced the original render function in NHP's field_color.php file with this one:

function render(){

    $class = (isset($this->field['class']))?$this->field['class']:'';

    if(get_bloginfo('version') >= '3.5'){
        echo '<input type="text" id="'.$this->field['id'].'" name="'.$this->args['opt_name'].'['.$this->field['id'].']" value="'.$this->value.'" class="'.$class.' popup-colorpicker" style="width:70px;" data-default-color="'.esc_attr($this->value).'"/>';
        echo (isset($this->field['desc']) && !empty($this->field['desc']))?' <span class="description">'.$this->field['desc'].'</span>':'';
    }else{
        echo '<div class="farb-popup-wrapper">';
        echo '<input type="text" id="'.$this->field['id'].'" name="'.$this->args['opt_name'].'['.$this->field['id'].']" value="'.$this->value.'" class="'.$class.' popup-colorpicker" style="width:70px;"/>';
        echo '<div class="farb-popup"><div class="farb-popup-inside"><div id="'.$this->field['id'].'picker" class="color-picker"></div></div></div>';
        echo (isset($this->field['desc']) && !empty($this->field['desc']))?' <span class="description">'.$this->field['desc'].'</span>':'';
        echo '</div>';
    }

}//function

Enqueue was replaced with this:

function enqueue(){

    if(get_bloginfo('version') >= '3.5'){
        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'nhp-opts-field-color-js', NHP_OPTIONS_URL.'fields/color/field_color.js', array( 'wp-color-picker' ), false, true );
    }else{
        wp_enqueue_script(
            'nhp-opts-field-color-js', 
            NHP_OPTIONS_URL.'fields/color/field_color_farb.js', 
            array('jquery', 'farbtastic'),
            time(),
            true
        );
    }

}//function

Now to explain.

You'll notice that there are two different javascript files. The original one is incredibly long compared to the new color picker, which only uses:

jQuery(document).ready(function($){ $('input.popup-colorpicker').wpColorPicker(); });

So, that's all that is in the field_color.js file. The other file that is called for versions older than 3.5 (field_color_farb.js) is the original version of the javascript file that that used Farbtastic. Since 3.5 is new, I figured it would be best to stay backward compatible for a while.

Anyway, maybe that will help you get the one in Redux switched over quicker....and one of these days I'll have time to check out Redux. I've been following the comments and it seems to be catching a lot of love. Good luck with it.

[evertiro]

Minor tweaks to add it to the color_gradient option, and it's done! Thanks for the push in the right direction!