Como adicionar o seletor de cores aos widgets?

4

Tenho alguns problemas ao adicionar o wpColorPicker a um widget. Alguém tem uma amostra de trabalho? Ele só funciona quando clico em 'Salvar' ou recarrego a página, mas quando eu arrasto um novo widget para a área ele não é ativado. Alguém tem alguma ideia? Abaixo você pode encontrar meu código até agora.

class SampleWidget extends WP_Widget 
    {

        /**
         * Register widget with WordPress.
         */
        public function __construct () 
        {
            parent::__construct
            (
                'sample_widget',
                'Sample',
                array( 'description' => __( 'A sample description'), )
            );  

            add_action( 'admin_enqueue_scripts', array( &$this, 'admin_enqueue_scripts' ) );
        }

        public function admin_enqueue_scripts ( $hook_suffix )
        {
            if ( $hook_suffix != 'widgets.php' ) return;

            wp_enqueue_style( 'wp-color-picker' );          
            wp_enqueue_script( 'wp-color-picker' ); 
        }

        /**
         * Front-end display of widget.
         *
         * @see WP_Widget::widget()
         *
         * @param array $args     Widget arguments.
         * @param array $instance Saved values from database.
         */
        public function widget( $args, $instance ) 
        {
            extract( $args );

            echo $before_widget;
            echo $after_widget;
        }

        /**
         * Sanitize widget form values as they are saved.
         *
         * @see WP_Widget::update()
         *
         * @param array $new_instance Values just sent to be saved.
         * @param array $old_instance Previously saved values from database.
         *
         * @return array Updated safe values to be saved.
         */
        public function update( $new_instance, $old_instance ) 
        {
            $instance = array();
            return $instance;
        }

        /**
         * Back-end widget form.
         *
         * @see WP_Widget::form()
         *
         * @param array $instance Previously saved values from database.
         */
        public function form ( $instance ) 
        {
            ?>
            <p>  
                <label for="<?php echo $this->get_field_id( 'background-color' ); ?>">Achtergrondkleur:</label>
                <input type="text" id="<?php echo $this->get_field_id( 'background-color' ); ?>" name="<?php echo $this->get_field_name( 'background-color' ); ?>" value="<?php echo esc_attr( $backgroundColor ); ?>" />                              
            </p>

            <script type="text/javascript">
            jQuery(document).ready(function($){
                $('#<?php echo $this->get_field_id( 'background-color' ); ?>').wpColorPicker();
            });
            </script>
            <?php
        }
    }
    
por Mark 19.04.2013 / 00:04

2 respostas

3

Aqui está o código que usei para um dos meus projetos:

<?php
function load_color_picker_style() {
    wp_enqueue_style( 'wp-color-picker' );
}
    add_action('admin_print_scripts-widgets.php', 'load_color_picker_script');
    add_action('admin_print_styles-widgets.php', 'load_color_picker_style');
?>

///Javascript

jQuery(document).ready(function($){
    function updateColorPickers(){
        $('#widgets-right .wp-color-picker').each(function(){
            $(this).wpColorPicker({
                // you can declare a default color here,
                // or in the data-default-color attribute on the input
                defaultColor: false,
                // a callback to fire whenever the color changes to a valid color
                change: function(event, ui){},
                // a callback to fire when the input is emptied or an invalid color
                clear: function() {},
                // hide the color picker controls on load
                hide: true,
                // show a group of common colors beneath the square
                // or, supply an array of colors to customize further
                palettes: ['#ffffff','#000000','#ff7c0b']
            });
        }); 
    }
    updateColorPickers();   
    $(document).ajaxSuccess(function(e, xhr, settings) {

        if(settings.data.search('action=save-widget') != -1 ) { 
            $('.color-field .wp-picker-container').remove();    
            updateColorPickers();       
        }
    });
 });

O único requisito é que a entrada que você quer que seja um colorpicker tenha o nome da classe de, bem, color-picker .

    
por Manny Fleurmond 19.04.2013 / 15:56
2

Acho que o que você realmente quer fazer é vincular ao evento "sortstop", que é acionado depois que um widget é colocado em uma área da barra lateral que pode ser solta.

jQuery('div.widgets-sortables').bind('sortstop', function(event,ui) {
    // This javascript code within here will be run after you've dropped a sidebar widget
});

Isso não foi testado, mas acho que é provavelmente o caminho certo a seguir.

    
por Dwayne Charrington 19.04.2013 / 02:30