WordPress.org
Get WordPress

Make WordPress Core

Changeset 22030


Ignore:
Timestamp:
09/27/2012 01:57:38 AM (14 years ago)
Author:
nacin
Message:

New color picker, props mattwiebe. see #21206.

Replaces Farbtastic. May change further in response to user testing.

Location:
trunk
Files:
5 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/custom-background.php

    r21944 r22030  
    109109                wp_enqueue_script('media-upload');
    110110                wp_enqueue_script('custom-background');
    111                 wp_enqueue_style('farbtastic');
     111                wp_enqueue_style('wp-color-picker');
    112112        }
    113113
    … …  
    328328<th scope="row"><?php _e( 'Background Color' ); ?></th>
    329329<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
    330 <?php $show_clear = get_theme_mod('background_color') ? '' : ' style="display:none"'; ?>
    331 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
    332 <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e('Select a Color'); ?></a> <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php current_theme_supports( 'custom-background', 'default-color' ) ? _e( 'Default' ) : _e( 'Clear' ); ?></a>)</span>
    333 <input type="hidden" id="defaultcolor" value="<?php if ( current_theme_supports( 'custom-background', 'default-color' ) ) echo '#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ); ?>" />
    334 <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
     330<?php
     331$default_color = '';
     332if ( current_theme_supports( 'custom-background', 'default-color' ) )
     333        $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
     334?>
     335<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
    335336</fieldset></td>
    336337</tr>

  • trunk/wp-admin/custom-header.php

    r21944 r22030  
    176176                        wp_enqueue_script( 'custom-header' );
    177177                        if ( current_theme_supports( 'custom-header', 'header-text' ) )
    178                                 wp_enqueue_script('farbtastic');
     178                                wp_enqueue_script( 'wp-color-picker' );
    179179                } elseif ( 2 == $step ) {
    180180                        wp_enqueue_script('imgareaselect');
    … …  
    191191
    192192                if ( ( 1 == $step || 3 == $step ) && current_theme_supports( 'custom-header', 'header-text' ) )
    193                         wp_enqueue_style('farbtastic');
     193                        wp_enqueue_style( 'wp-color-picker' );
    194194                elseif ( 2 == $step )
    195195                        wp_enqueue_style('imgareaselect');
    … …  
    333333<script type="text/javascript">
    334334/* <![CDATA[ */
    335 var farbtastic;
    336335(function($){
    337336        var default_color = '#<?php echo get_theme_support( 'custom-header', 'default-text-color' ); ?>',
    … …  
    342341                $('#desc').css('color', color);
    343342                $('#text-color').val(color);
    344                 farbtastic.setColor(color);
    345343        }
    346344
    … …  
    361359
    362360        $(document).ready(function() {
     361                var text_color = $('#text-color');
    363362                header_text_fields = $('.displaying-header-text');
    364                 $('#pickcolor').click(function(e) {
    365                         e.preventDefault();
    366                         $('#color-picker').show();
     363                text_color.wpColorPicker({
     364                        change: function( event, ui ) {
     365                                pickColor( text_color.wpColorPicker('color') );
     366                        },
     367                        clear: function() {
     368                                pickColor( '' );
     369                        }
    367370                });
    368 
    369371                $('#display-header-text').click( toggle_text );
    370 
    371                 $('#defaultcolor').click(function() {
    372                         pickColor(default_color);
    373                         $('#text-color').val(default_color);
    374                 });
    375 
    376                 $('#text-color').keyup(function() {
    377                         var _hex = $('#text-color').val();
    378                         var hex = _hex;
    379                         if ( hex[0] != '#' )
    380                                 hex = '#' + hex;
    381                         hex = hex.replace(/[^#a-fA-F0-9]+/, '');
    382                         if ( hex != _hex )
    383                                 $('#text-color').val(hex);
    384                         if ( hex.length == 4 || hex.length == 7 )
    385                                 pickColor( hex );
    386                 });
    387 
    388                 $(document).mousedown(function(){
    389                         $('#color-picker').each( function() {
    390                                 var display = $(this).css('display');
    391                                 if (display == 'block')
    392                                         $(this).fadeOut(2);
    393                         });
    394                 });
    395 
    396                 farbtastic = $.farbtastic('#color-picker', function(color) { pickColor(color); });
    397                 <?php if ( display_header_text() ) { ?>
    398                 pickColor('#<?php echo get_header_textcolor(); ?>');
    399                 <?php } else { ?>
     372                <?php if ( ! display_header_text() ) : ?>
    400373                toggle_text();
    401                 <?php } ?>
     374                <?php endif; ?>
    402375        });
    403376})(jQuery);
    … …  
    648621<td>
    649622        <p>
    650 <?php if ( display_header_text() ) : ?>
    651                 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_header_textcolor() ); ?>" />
    652 <?php else : ?>
    653                 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>" />
    654 <?php endif; ?>
    655                 <a href="#" class="hide-if-no-js" id="pickcolor"><?php _e( 'Select a Color' ); ?></a>
     623<?php
     624$header_textcolor = display_header_text() ? get_header_textcolor() : get_theme_support( 'custom-header', 'default-text-color' );
     625$default_color = '';
     626if ( current_theme_supports( 'custom-header', 'default-text-color' ) )
     627        $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ) . '"';
     628?>
     629                <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( $header_textcolor ); ?>"<?php echo $default_color; ?> />
    656630        </p>
    657         <div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    658631</td>
    659632</tr>

  • trunk/wp-admin/js/custom-background.js

    r21592 r22030  
    1 var farbtastic, pickColor;
    2 
    31(function($) {
    42
    5         var defaultColor = '';
     3        $(document).ready(function() {
     4                var bgImage = $("#custom-background-image");
    65
    7         pickColor = function(color) {
    8                 farbtastic.setColor(color);
    9                 $('#background-color').val(color);
    10                 $('#custom-background-image').css('background-color', color);
    11                 // If we have a default color, and they match, then we need to hide the 'Default' link.
    12                 // Otherwise, we hide the 'Clear' link when it is empty.
    13                 if ( ( defaultColor && color === defaultColor ) || ( ! defaultColor && ( '' === color || '#' === color ) ) )
    14                         $('#clearcolor').hide();
    15                 else
    16                         $('#clearcolor').show();
    17         }
    18 
    19         $(document).ready(function() {
    20 
    21                 defaultColor = $('#defaultcolor').val();
    22 
    23                 $('#pickcolor').click(function() {
    24                         $('#colorPickerDiv').show();
    25                         return false;
    26                 });
    27 
    28                 $('#clearcolor a').click( function(e) {
    29                         pickColor( defaultColor );
    30                         e.preventDefault();
    31                 });
    32 
    33                 $('#background-color').keyup(function() {
    34                         var _hex = $('#background-color').val(), hex = _hex;
    35                         if ( hex.charAt(0) != '#' )
    36                                 hex = '#' + hex;
    37                         hex = hex.replace(/[^#a-fA-F0-9]+/, '');
    38                         if ( hex != _hex )
    39                                 $('#background-color').val(hex);
    40                         if ( hex.length == 4 || hex.length == 7 )
    41                                 pickColor( hex );
     6                $('#background-color').wpColorPicker({
     7                        change: function( event, ui ) {
     8                                bgImage.css('background-color', ui.color.toString());
     9                        },
     10                        clear: function() {
     11                                bgImage.css('background-color', '');
     12                        }
    4213                });
    4314
    4415                $('input[name="background-position-x"]').change(function() {
    45                         $('#custom-background-image').css('background-position', $(this).val() + ' top');
     16                        bgImage.css('background-position', $(this).val() + ' top');
    4617                });
    4718
    4819                $('input[name="background-repeat"]').change(function() {
    49                         $('#custom-background-image').css('background-repeat', $(this).val());
    50                 });
    51 
    52                 farbtastic = $.farbtastic('#colorPickerDiv', function(color) {
    53                         pickColor(color);
    54                 });
    55                 pickColor($('#background-color').val());
    56 
    57                 $(document).mousedown(function(){
    58                         $('#colorPickerDiv').each(function(){
    59                                 var display = $(this).css('display');
    60                                 if ( display == 'block' )
    61                                         $(this).fadeOut(2);
    62                         });
     20                        bgImage.css('background-repeat', $(this).val());
    6321                });
    6422        });

  • trunk/wp-admin/js/customize-controls.js

    r21814 r22030  
    110110                ready: function() {
    111111                        var control = this,
    112                                 rhex, spot, input, text, update;
    113 
    114                         rhex   = /^#([A-Fa-f0-9]{3}){0,2}$/;
    115                         spot   = this.container.find('.dropdown-content');
    116                         input  = new api.Element( this.container.find('.color-picker-hex') );
    117                         update = function( color ) {
    118                                 spot.css( 'background', color );
    119                                 control.farbtastic.setColor( color );
    120                         };
    121 
    122                         this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set );
    123 
    124                         // Only pass through values that are valid hexes/empty.
    125                         input.sync( this.setting ).validate = function( to ) {
    126                                 return rhex.test( to ) ? to : null;
    127                         };
    128 
    129                         this.setting.bind( update );
    130                         update( this.setting() );
    131 
    132                         this.dropdownInit();
     112                                picker = this.container.find('.color-picker-hex');
     113
     114                        picker.val( control.setting() ).wpColorPicker({
     115                                change: function( event, options ) {
     116                                        control.setting.set( picker.wpColorPicker('color') );
     117                                },
     118                                clear: function() {
     119                                        control.setting.set( false );
     120                                }
     121                        });
    133122                }
    134123        });

  • trunk/wp-includes/class-wp-customize-control.php

    r21497 r22030  
    352352         */
    353353        public function enqueue() {
    354                 wp_enqueue_script( 'farbtastic' );
    355                 wp_enqueue_style( 'farbtastic' );
     354                wp_enqueue_script( 'wp-color-picker' );
     355                wp_enqueue_style( 'wp-color-picker' );
    356356        }
    357357
    … …  
    373373         */
    374374        public function render_content() {
     375                $this_default = $this->setting->default;
     376                $default_attr = '';
     377                if ( $this_default ) {
     378                        if ( false === strpos( $this_default, '#' ) )
     379                                $this_default = '#' . $this_default;
     380                        $default_attr = ' data-default-color="' . esc_attr( $this_default ) . '"';
     381                }
     382                // The input's value gets set by JS. Don't fill it.
    375383                ?>
    376384                <label>
    377385                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    378386                        <div class="customize-control-content">
    379                                 <div class="dropdown">
    380                                         <div class="dropdown-content">
    381                                                 <div class="dropdown-status"></div>
    382                                         </div>
    383                                         <div class="dropdown-arrow"></div>
    384                                 </div>
    385                                 <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" />
     387                                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>"<?php echo $default_attr ?> />
    386388                        </div>
    387                         <div class="farbtastic-placeholder"></div>
    388389                </label>
    389390                <?php

  • trunk/wp-includes/script-loader.php

    r22029 r22030  
    423423                $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
    424424
     425                $scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
     426                $scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
     427                did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
     428                        'clear' => __( 'Clear' ),
     429                        'defaultString' => __( 'Default' ),
     430                        'pick' => __( 'Select Color' ),
     431                        'current' => __( 'Current Color' ),
     432                ) );
     433
    425434                $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );
    426435
    … …  
    450459                ) );
    451460
    452                 $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), false, 1 );
     461                $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array( 'wp-color-picker' ), false, 1 );
    453462                $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
    454463        }
    … …  
    503512        $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css' );
    504513        $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' );
     514        $styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" );
    505515        $styles->add( 'jcrop', "/wp-includes/js/jcrop/jquery.Jcrop.min.css", array(), '0.9.10' );
    506516        $styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );
Note: See TracChangeset for help on using the changeset viewer.