WordPress.org
Get WordPress

Make WordPress Core

Ticket #21206: iris-picker-5.diff

File iris-picker-5.diff, 17.8 KB (added by mattwiebe, 13 years ago)

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

     
    351351         * @since 3.4.0
    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
    358358        /**
    … …  
    372372         * @since 3.4.0
    373373         */
    374374        public function render_content() {
     375                $this_default = $this->setting->default;
     376                if ( strpos( $this_default, '#' ) === false )
     377                        $this_default = '#' . $this_default;
    375378                ?>
    376379                <label>
    377380                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    378381                        <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'); ?>" />
     382                                <input class="color-picker-hex" type="text" value="<?php echo esc_html( $this_default ); ?>" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" />
    386383                        </div>
    387                         <div class="farbtastic-placeholder"></div>
    388384                </label>
    389385                <?php
    390386        }

  • wp-includes/script-loader.php

     
    402402
    403403                $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
    404404
     405                $iris_deps = array( 'jquery-ui-draggable', 'jquery-ui-slider' );
     406                if ( wp_is_mobile() )
     407                        $iris_deps[] = 'touch-punch';
     408                $scripts->add( 'iris', '/wp-admin/js/iris.min.js', $iris_deps, false, 1 );
     409
     410                $scripts->add( 'wp-color-picker', "/wp-admin/js/wp-color-picker$suffix.js", array( 'iris' ), false, 1 );
     411                did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
     412                        'clear' => __( 'Clear' ),
     413                        'defaultString' => __( 'Default' ),
     414                        'pick' => __( 'Select Color' )
     415                ));
     416
    405417                $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );
    406418
    407419                $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
    … …  
    429441                        'saveAlert' => __('The changes you made will be lost if you navigate away from this page.')
    430442                ) );
    431443
    432                 $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), false, 1 );
     444                $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('wp-color-picker'), false, 1 );
    433445                $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
    434446        }
    435447}
    … …  
    482494        $styles->add( 'install', "/wp-admin/css/install$suffix.css" );
    483495        $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css' );
    484496        $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' );
     497        $styles->add( 'wp-color-picker', '/wp-admin/css/wp-color-picker.css' );
    485498        $styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
    486499        $styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );
    487500        $styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css" );

  • wp-content/themes/twentyeleven/inc/theme-options.php

     
    1717 */
    1818function twentyeleven_admin_enqueue_scripts( $hook_suffix ) {
    1919        wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' );
    20         wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '2011-06-10' );
    21         wp_enqueue_style( 'farbtastic' );
     20        wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'wp-color-picker' ), '2011-06-10' );
     21        wp_enqueue_style( 'wp-color-picker' );
    2222}
    2323add_action( 'admin_print_styles-appearance_page_theme_options', 'twentyeleven_admin_enqueue_scripts' );
    2424
    … …  
    268268function twentyeleven_settings_field_link_color() {
    269269        $options = twentyeleven_get_theme_options();
    270270        ?>
    271         <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
    272         <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
    273         <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
    274         <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    275         <br />
    276         <span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>
     271        <?php $default_color = 'data-default-color="' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '"'; ?> 
     272        <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" <?php echo $default_color ?>/>
    277273        <?php
    278274}
    279275

  • wp-content/themes/twentyeleven/inc/theme-options.js

     
    1 var farbtastic;
    2 
    31(function($){
    4         var pickColor = function(a) {
    5                 farbtastic.setColor(a);
    6                 $('#link-color').val(a);
    7                 $('#link-color-example').css('background-color', a);
    8         };
    9 
    102        $(document).ready( function() {
    11                 $('#default-color').wrapInner('<a href="#" />');
    12 
    13                 farbtastic = $.farbtastic('#colorPickerDiv', pickColor);
    14 
    15                 pickColor( $('#link-color').val() );
    16 
    17                 $('.pickcolor').click( function(e) {
    18                         $('#colorPickerDiv').show();
    19                         e.preventDefault();
    20                 });
    21 
    22                 $('#link-color').keyup( function() {
    23                         var a = $('#link-color').val(),
    24                                 b = a;
    25 
    26                         a = a.replace(/[^a-fA-F0-9]/, '');
    27                         if ( '#' + a !== b )
    28                                 $('#link-color').val(a);
    29                         if ( a.length === 3 || a.length === 6 )
    30                                 pickColor( '#' + a );
    31                 });
    32 
    33                 $(document).mousedown( function() {
    34                         $('#colorPickerDiv').hide();
    35                 });
    36 
    37                 $('#default-color a').click( function(e) {
    38                         pickColor( '#' + this.innerHTML.replace(/[^a-fA-F0-9]/, '') );
    39                         e.preventDefault();
    40                 });
    41 
     3                $('#link-color').wpColorPicker();
    424                $('.image-radio-option.color-scheme input:radio').change( function() {
    43                         var currentDefault = $('#default-color a'),
     5                        var currentDefault = $('#link-color').attr('data-default-color'),
    446                                newDefault = $(this).next().val();
    45 
    46                         if ( $('#link-color').val() == currentDefault.text() )
    47                                 pickColor( newDefault );
    48 
    49                         currentDefault.text( newDefault );
     7                       
     8                        if ( $('#link-color').val() == currentDefault.toString() )
     9                                $("#link-color").iris("option", "color", newDefault )
    5010                });
    5111        });
    5212})(jQuery);
     13 No newline at end of file

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

     
    1 var farbtastic, pickColor;
    2 
    31(function($) {
    42
    5         var defaultColor = '';
    6 
    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 
    193        $(document).ready(function() {
     4                var bgImage = $("#custom-background-image");
    205
    21                 defaultColor = $('#defaultcolor').val();
    22 
    23                 $('#pickcolor').click(function() {
    24                         $('#colorPickerDiv').show();
    25                         return false;
     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                        }
    2613                });
    2714
    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 );
    42                 });
    43 
    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());
     20                        bgImage.css('background-repeat', $(this).val());
    5021                });
    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                         });
    63                 });
    6422        });
    6523
    6624})(jQuery);
    67  No newline at end of file

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

     
    109109        api.ColorControl = api.Control.extend({
    110110                ready: function() {
    111111                        var control = this,
    112                                 rhex, spot, input, text, update;
     112                                rhex, input;
    113113
    114114                        rhex   = /^#([A-Fa-f0-9]{3}){0,2}$/;
    115                         spot   = this.container.find('.dropdown-content');
    116115                        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 
     116                       
     117                        this.container.find('.color-picker-hex').wpColorPicker({
     118                                change: function( event, options ) {
     119                    control.setting.set( options.color.toCSS() );
     120                }
     121                        });
     122                       
    124123                        // Only pass through values that are valid hexes/empty.
    125124                        input.sync( this.setting ).validate = function( to ) {
    126125                                return rhex.test( to ) ? to : null;
    127126                        };
    128 
    129                         this.setting.bind( update );
    130                         update( this.setting() );
    131 
    132                         this.dropdownInit();
    133127                }
    134128        });
    135129

  • wp-admin/custom-header.php

     
    175175                        wp_enqueue_script( 'media-upload' );
    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');
    181181                }
    … …  
    190190                $step = $this->step();
    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');
    196196        }
    … …  
    332332        function js_1() { ?>
    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' ); ?>',
    338337                header_text_fields;
    … …  
    341340                $('#name').css('color', color);
    342341                $('#desc').css('color', color);
    343342                $('#text-color').val(color);
    344                 farbtastic.setColor(color);
    345343        }
    346344
    347345        function toggle_text() {
    … …  
    361359
    362360        $(document).ready(function() {
    363361                header_text_fields = $('.displaying-header-text');
    364                 $('#pickcolor').click(function(e) {
    365                         e.preventDefault();
    366                         $('#color-picker').show();
     362                $('#text-color').wpColorPicker({
     363                        change: function( event, ui ) {
     364                                pickColor( ui.color.toString() );
     365                        }
    367366                });
    368 
    369367                $('#display-header-text').click( toggle_text );
    370 
    371                 $('#defaultcolor').click(function() {
    372                         pickColor(default_color);
    373                         $('#text-color').val(default_color);
     368                $('#defaultcolor').click(function() {
     369                        pickColor( default_color );
    374370                });
    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 { ?>
     371                <?php if ( !display_header_text() ) { ?>
    400372                toggle_text();
    401373                <?php } ?>
    402374        });
    … …  
    646618<tr valign="top" class="displaying-header-text">
    647619<th scope="row"><?php _e( 'Text Color' ); ?></th>
    648620<td>
    649         <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>
     621        <p>
     622<?php $header_textcolor = ( display_header_text() ) ? esc_attr( get_header_textcolor() ) : esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>
     623<input type="text" name="text-color" id="text-color" value="#<?php echo $header_textcolor; ?>" />
    656624        </p>
    657         <div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    658625</td>
    659626</tr>
    660627

  • wp-admin/css/customize-controls-rtl.css

     
    6565        margin-left: 5px;
    6666}
    6767
    68 .customize-section input[type="text"].color-picker-hex,
    69 .customize-control-color .farbtastic-placeholder {
     68.customize-section input[type="text"].color-picker-hex {
    7069        float: right;
    7170}
    7271

  • wp-admin/css/customize-controls.css

     
    314314/*
    315315 * Color Picker
    316316 */
    317 .customize-control-color .color-picker-hex,
    318 .customize-control-color .farbtastic-placeholder {
     317.customize-control-color .color-picker-hex {
    319318        display: none;
    320319}
    321320
    322 .customize-control-color.open .color-picker-hex,
    323 .customize-control-color.open .farbtastic-placeholder {
     321.customize-control-color.open .color-picker-hex {
    324322        display: block;
    325323}
    326324
    … …  
    339337}
    340338
    341339.customize-section input[type="text"].color-picker-hex {
    342         float: left;
    343340        width: 85px;
    344341        font-family: monospace;
    345342        text-align: center;
    … …  
    353350        color: #999;
    354351}
    355352
    356 .customize-control-color .farbtastic-placeholder {
    357         width: 100%;
    358         margin: 5px 0 10px;
    359         float: left;
    360 }
    361 
    362 .customize-control-color .farbtastic {
    363         margin: 0 auto;
    364 }
    365 
    366353/*
    367354 * Image Picker
    368355 */

  • wp-admin/custom-background.php

     
    108108                add_thickbox();
    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
    114114        /**
    … …  
    327327<tr valign="top">
    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 $default_color = current_theme_supports( 'custom-background', 'default-color' ) ? 'data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '" ' : ''; ?>
     331<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" <?php echo $default_color ?>/>
    335332</fieldset></td>
    336333</tr>
    337334</tbody>