WordPress.org
Get WordPress

Make WordPress Core

Changeset 22030


Ignore:
Timestamp:
09/27/2012 01:57:38 AM (12 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.