Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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>
Note: See TracChangeset for help on using the changeset viewer.