Make WordPress Core

Ticket #21206: iris-picker-6.diff

File iris-picker-6.diff, 42.2 KB (added by mattwiebe, 12 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/wp-color-picker.js

     
     1( function( $, undef ){
     2
     3        // html stuff
     4        var _before = '<span class="wp-color-result" />';
     5        var _after = '<div class="wp-picker-holder" />';
     6        var _wrap = '<a tabindex="0" class="wp-picker-container" />';
     7        var _button = '<input type="button" class="button hidden" />';
     8
     9        // jQuery UI Widget constructor
     10        var ColorPicker = {
     11                options: {
     12                        defaultColor: false,
     13                        change: false,
     14                        clear: false,
     15                        hide: true
     16                },
     17                _create: function() {
     18                        // bail early for IE < 8
     19                        if ( $.browser.msie && parseInt( $.browser.version, 10 ) < 8 )
     20                                return;
     21                        var self = this;
     22                        var el = self.element;
     23                        $.extend( self.options, el.data() );
     24
     25                        self.initialValue = el.val();
     26
     27                        // Set up HTML structure, hide things
     28                        el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
     29                        self.wrap = el.parent();
     30                        self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( "title", wpColorPickerL10n.pick );
     31                        self.pickerContainer = $( _after ).insertAfter( el );
     32                        self.button = $( _button );
     33
     34                        if ( self.options.defaultColor )
     35                                self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
     36                        else
     37                                self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
     38
     39                        self.button.insertAfter( el );
     40
     41                        el.iris( {
     42                                target: self.pickerContainer,
     43                                hide: true,
     44                                change: function( event, ui ) {
     45                                        self.toggler.css( { backgroundColor: ui.color.toString() } );
     46                                        // check for a custom cb
     47                                        if ( $.isFunction( self.options.change ) )
     48                                                self.options.change.call( this, event, ui );
     49                                }
     50                        } );
     51                        el.val( self.initialValue );
     52                        self._addListeners();
     53                        if ( ! self.options.hide )
     54                                self.toggler.click();
     55                },
     56                _addListeners: function() {
     57                        var self = this;
     58
     59                        self.toggler.click( function( event ){
     60                                event.stopPropagation();
     61                                self.element.toggle().iris( 'toggle' );
     62                                self.button.toggleClass('hidden');
     63                                self.toggler.toggleClass( 'wp-picker-open' );
     64
     65                                // close picker when you click outside it
     66                                if ( self.toggler.hasClass( 'wp-picker-open' ) )
     67                                        $( "body" ).on( 'click', { wrap: self.wrap, toggler: self.toggler }, self._bodyListener );
     68                                else
     69                                        $( "body" ).off( 'click', self._bodyListener );
     70                        });
     71
     72                        // if we have a clear callback, handle empty values in the field
     73                        if ( $.isFunction( self.options.clear ) ) {
     74                                self.element.change(function( event ) {
     75                                        var val = self.element.val();
     76                                        if ( val === '' || val === '#' )
     77                                                self.options.clear.call( this, event );
     78                                });
     79                        }
     80
     81                        // open a keyboard-focused closed picker with space or enter
     82                        $( document ).keydown( function( e ) {
     83                                if ( self.wrap.is( ':focus' ) && e.keyCode === 13 || e.keyCode === 32 ) {
     84                                        e.preventDefault();
     85                                        self.toggler.trigger('click').next().focus();
     86                                }
     87                        });
     88
     89                        self.button.click( function( event ) {
     90                                var me = $(this);
     91                                if ( me.hasClass( 'wp-picker-clear' ) ) {
     92                                        self.element.val( '' );
     93                                        self.toggler.css('backgroundColor', '');
     94                                        if ( $.isFunction( self.options.clear ) )
     95                                                self.options.clear.call( this, event );
     96                                } else if ( me.hasClass( 'wp-picker-default' ) ) {
     97                                        self.element.val( self.options.defaultColor ).change();
     98                                }
     99                        });
     100                },
     101                _bodyListener: function( event ) {
     102                        if ( ! event.data.wrap.find( event.target ).length )
     103                                        event.data.toggler.click();
     104                },
     105                // $("#input").wpColorPicker('color') returns the current color
     106                // $("#input").wpColorPicker('color', '#bada55') to set
     107                color: function( newColor ) {
     108                        if ( newColor === undef )
     109                                return this.element.iris( "option", "color" );
     110
     111                        this.element.iris( "option", "color", newColor );
     112                }
     113        }
     114
     115        $.widget( 'wp.wpColorPicker', ColorPicker );
     116}( jQuery ) );
     117 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/js/iris.min.js

     
     1/*! Iris - v0.9.3 - 2012-08-26
     2* https://github.com/Automattic/Iris
     3* Copyright (c) 2012 Matt Wiebe; Licensed GPL */
     4(function(a,b){function h(){if(d)e="filter";else{var b=a('<div id="iris-gradtest" />'),c="linear-gradient(top,#fff,#000)";a.each(f,function(a,d){b.css("backgroundImage",d+c);if(b.css("backgroundImage").match("gradient"))return e=a,!1}),a.browser.webkit&&e===!1&&(b.css("background","-webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#000))"),b.css("backgroundImage").match("gradient")&&(e="webkit")),b.remove()}}function i(b,c){return b=b==="top"?"top":"left",c=a.isArray(c)?c:Array.prototype.slice.call(arguments,1),e==="webkit"?k(b,c):f[e]+"linear-gradient("+b+", "+c.join(", ")+")"}function j(b,c){b=b==="top"?"top":"left",c=a.isArray(c)?c:Array.prototype.slice.call(arguments,1);var d=b==="top"?0:1,e=a(this),f=c.length-1,g=parseInt(a.browser.version,10)>=8?"-ms-filter":"filter";g="filter";var h=d===1?"left":"top",i=d===1?"right":"bottom",j=d===1?"height":"width",k='<div class="iris-ie-gradient-shim" style="position:absolute;'+j+":100%;"+h+":%start%;"+i+":%end%;"+g+':%filter%;" data-color:"%color%"></div>',m="";e.css("position")==="static"&&e.css({position:"relative"}),c=l(c),a.each(c,function(a,b){if(a===f)return!1;var e=c[a+1];if(b.stop===e.stop)return;var g=100-parseFloat(e.stop)+"%";b.octoHex=(new Color(b.color)).toIEOctoHex(),e.octoHex=(new Color(e.color)).toIEOctoHex();var h="progid:DXImageTransform.Microsoft.Gradient(GradientType="+d+", StartColorStr='"+b.octoHex+"', EndColorStr='"+e.octoHex+"')";m+=k.replace("%start%",b.stop).replace("%end%",g).replace("%filter%",h)}),e.find(".iris-ie-gradient-shim").remove(),a(m).prependTo(e)}function k(b,c){var d=[];return b=b==="top"?"0% 0%,0% 100%,":"0% 100%,100% 100%,",c=l(c),a.each(c,function(a,b){d.push("color-stop("+parseFloat(b.stop)/100+", "+b.color+")")}),"-webkit-gradient(linear,"+b+d.join(",")+")"}function l(b){var c=[],d=[],e=[],f=b.length-1;return a.each(b,function(a,b){var e=b,f=!1,g=b.match(/1?[0-9]{1,2}%$/);g&&(e=b.replace(/\s?1?[0-9]{1,2}%$/,""),f=g.shift()),c.push(e),d.push(f)}),d[0]===!1&&(d[0]="0%"),d[f]===!1&&(d[f]="100%"),d=m(d),a.each(d,function(a){e[a]={color:c[a],stop:d[a]}}),e}function m(b){var c=0,d=b.length-1,e=0,f=!1,g,h,i,j;if(b.length<=2||a.inArray(!1,b)<0)return b;while(e<b.length-1)!f&&b[e]===!1?(c=e-1,f=!0):f&&b[e]!==!1&&(d=e,e=b.length),e++;h=d-c,j=parseInt(b[c].replace("%"),10),g=(parseFloat(b[d].replace("%"))-j)/h,e=c+1,i=1;while(e<d)b[e]=j+i*g+"%",i++,e++;return m(b)}var c='<div class="iris-picker"><div class="iris-picker-inner"><div class="iris-square"><a class="iris-square-value" href="#"><span class="iris-square-handle ui-slider-handle"></span></a><div class="iris-square-slider iris-square-horiz"></div><div class="iris-square-slider iris-square-vert"></div></div><div class="iris-slider iris-hue"><div class="iris-slider-offset"></div></div></div></div>',d=!!(a.browser.msie&&parseInt(a.browser.version,10)<10),e=!1,f=["-moz-","-webkit-","-o-","-ms-"],g='.iris-picker{display:block;position:relative}.iris-error{background-color:#ffafaf}.iris-border{border-radius:4px;border:1px solid #aaa;width:200px;background-color:#fff}.iris-picker-inner{position:absolute;top:0;right:0;left:0;bottom:0}.iris-border .iris-picker-inner{top:10px;right:10px;left:10px;bottom:10px}.iris-picker .iris-square,.iris-picker .iris-slider,.iris-picker .grad-box{border-radius:4px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.4);box-shadow:inset 0 0 5px rgba(0,0,0,0.4);height:100%;width:12.5%;float:left;margin-right:5%}.iris-picker .iris-square{width:76%;margin-right:10%}.iris-picker .grad-box{width:auto;margin:0}.iris-picker .iris-square .sat,.iris-ie-9 .iris-square,.iris-ie-9 .iris-slider,.iris-ie-9 .grad-box{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-radius:0}.iris-picker .iris-square .sat{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.iris-ie-lt9 .iris-square,.iris-ie-lt9 .iris-slider,.iris-ie-lt9 .grad-box{outline:1px solid #aaa}.iris-ie-lt9 .iris-square .ui-slider-handle{outline:1px solid #aaa;background-color:#fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"}.iris-picker .iris-hue{margin-right:0}.iris-picker .iris-hue .ui-slider-handle{position:absolute;right:-3px;left:-3px;border:4px solid #aaa;border-width:4px 3px;width:auto;height:6px;background:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.2);opacity:.9;z-index:5}.iris-hue .ui-slider-handle:before{content:" ";position:absolute;left:-2px;right:-2px;top:-3px;bottom:-3px;border:2px solid #fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.iris-picker .iris-result{margin-right:0}.iris-picker .iris-slider-offset{width:100%;height:100%;position:relative;bottom:-6px}.iris-square .iris-square-horiz{position:absolute;top:-7px;left:-7px;height:1px;width:100%}.iris-square .iris-square-vert{position:absolute;right:6px;top:7px;width:1px;height:100%}.iris-square .iris-square-slider a{opacity:.3;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";-moz-transition:opacity 300ms;-webkit-transition:opacity 300ms;transition:opacity 300ms}.iris-square .iris-square-slider .ui-slider-handle.active{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}.iris-dragging .iris-square-slider .ui-slider-handle.active{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}.iris-picker .ui-slider-handle{background:#f5f5f5;-webkit-border-radius:10px;-moz-border-radius:50%;border-radius:50%;box-shadow:inset #fff 0 1px 1px,inset 0 -1px 1px rgba( 0,0,0,0.4 ),0px 1px 4px 0 rgba( 0,0,0,0.2 ),0 0 2px rgba( 0,0,0,0.3 );display:block;opacity:0.7;position:absolute;z-index:5;height:20px;width:20px;cursor:default;cursor:ns-resize}.iris-square-horiz .ui-slider-handle{cursor:ew-resize}.iris-square-slider .ui-slider-handle{width:14px;height:14px;opacity:1;background-color:#eee}.iris-picker .iris-square-handle{background:transparent;border:3px solid #fff;box-shadow:inset 0 -1px 1px rgba( 0,0,0,0.4 ),0px 1px 4px 0 rgba( 0,0,0,0.2 ),0 0 2px rgba( 0,0,0,0.3 );width:14px;height:14px;position:absolute;left:-10px;top:-10px;cursor:move}.iris-picker .iris-square-value{width:8px;height:8px;position:absolute}.iris-ie-lt9 .iris-square-value,.iris-mozilla .iris-square-value{width:1px;height:1px}';if(d&&parseInt(a.browser.version,10)<=7)return a.fn.iris=a.noop;a.fn.gradient=function(b){var c=arguments;return this.each(function(){d?j.apply(this,c):a(this).css("backgroundImage",i.apply(this,c))})},a.fn.LSSquare=function(c){return c=c|0,this.each(function(){var d=a(this),e=d.data("hue")!==b;e||(d.append('<div class="sat grad-box" /><div class="lum grad-box" />'),d.css("position","relative"),d.children(".grad-box").css({position:"absolute",top:0,left:0,bottom:0,right:0}));var f=d.find(".lum"),g=d.find(".sat");e||f.gradient("top","#fff","rgba(255,255,255,0) 50%","rgba(0,0,0,0) 50%","rgba(0,0,0,1)"),g.gradient("left","hsl("+c+",0%,50%)","hsl("+c+",100%,50%)"),d.data("hue",c)})},a.fn.raninbowGradient=function(b,c){b=b||"top";var d=a.extend({},{s:100,l:50},c),e="hsl(%h%,"+d.s+"%,"+d.l+"%)",f=0,g=[];while(f<=360)g.push(e.replace("%h%",f)),f+=30;return this.each(function(){a(this).gradient(b,g)})};var n={options:{color:!1,hide:!0,border:!0,target:!1,width:200},_inited:!1,_create:function(){var b=this.element,d=this.options.color||b.val();e===!1&&h(),b.is("input")?(this.options.target?this.picker=a(c).appendTo(this.options.target):this.picker=a(c).insertAfter(b),this._addInputListeners(b)):(b.append(c),this.picker=b.find(".iris-picker"));if(a.browser.mozilla)this.picker.addClass("iris-mozilla");else if(a.browser.msie){var f=parseInt(a.browser.version,10);f===9?this.picker.addClass("iris-ie-9"):f<=8&&this.picker.addClass("iris-ie-lt9")}this.color=new Color(d),this.options.color=this.color.toString(),this.controls={},this.controls.square=this.picker.find(".iris-square"),this.controls.result=this.picker.find(".iris-result");var g=this.hue=this.color.h();this.options.hide&&this.picker.hide(),this.options.border&&this.picker.addClass("iris-border"),this.controls.square.LSSquare(g),this.picker.find(".iris-hue").raninbowGradient(),this._initControls(),this.active="external",this._dimensions(),this._change()},_dimensions:function(a){var b=this.picker.find(".iris-picker-inner"),c=this.controls,d=c.square,e=this.picker.find(".iris-hue"),f="77.5%",g="12%",h=20,i=this.options.border?this.options.width-h:this.options.width,j;a&&(d.css("width",""),e.css("width",""),this.picker.removeAttr("style")),f=i*(parseFloat(f)/100),g=i*(parseFloat(g)/100),j=this.options.border?f+h:f,d.width(f).height(f),e.height(f).width(g),this.picker.css({width:this.options.width,height:j})},_addInputListeners:function(a){var b=this;a.on("change",function(c){var d=new Color(a.val()),e=a.val().replace(/^#/,"");a.removeClass("iris-error"),d.error?e!==""&&a.addClass("iris-error"):b._setOption("color",d.toString())})},_initControls:function(){var b=this,c=b.controls.square,d=b.color.h();b.controls.h=b.picker.find(".iris-hue .iris-slider-offset").slider({orientation:"vertical",max:359,min:0,value:359-d,slide:function(a,c){b.active="h",c.value=359-c.value,b.color.h(c.value),b._change.apply(b,arguments)}}),b.controls.squareDrag=b.picker.find(".iris-square-value").draggable({containment:"parent",zIndex:1e3,cursor:"move",drag:function(a,c){b._squareDrag(a,c)},start:function(){c.addClass("iris-dragging")},stop:function(){c.removeClass("iris-dragging")}}),c.mousedown(function(c){if(c.button!==0)return;if(!a(c.target).is("div"))return;var d=b.controls.square.offset(),e={top:c.pageY-d.top,left:c.pageX-d.left};c.preventDefault(),b._squareDrag(c,{position:e}),c.target=b.controls.squareDrag.get(0),b.controls.squareDrag.css(e).trigger(c)}),b.controls.s=c.find(".iris-square-horiz").slider({slide:function(a,c){b.color.s(c.value),b.active="s",b._change.apply(b,arguments)}}),b.controls.l=c.find(".iris-square-vert").slider({orientation:"vertical",slide:function(a,c){b.color.l(c.value),b.active="l",b._change.apply(b,arguments)}}),b.controls.square.mousemove(function(c){var d=a(this),e=d.offset(),f=c.pageX-e.left,g=c.pageY-e.top,h=d.find(".iris-square-horiz .ui-slider-handle"),i=d.find(".iris-square-vert .ui-slider-handle");f>b.controls.square.width()-20?i.addClass("active"):i.removeClass("active"),g<20?h.addClass("active"):h.removeClass("active")}),b.controls.square.mouseleave(function(){a(this).find(".iris-square-slider .ui-slider-handle").removeClass("active")})},_squareDrag:function(a,b){var c=this,d=c._squareDimensions(),e=Math.round((d.h-b.position.top)/d.h*100),f=100-Math.round((d.w-b.position.left)/d.w*100);c.color.s(f).l(e),c.active="square",c._change.apply(c,arguments)},_setOption:function(a,b){var c=this.options[a];if(a==="color"){b=""+b;var d=b.replace(/^#/,""),e=new Color(b);e.error||(this.color=e,this.options.color=this.color.toString(),this.active="external",this._change(),this.options[a]=this.color.toString())}},_squareDimensions:function(a){var c=this.controls.square,d,e;return a!==b&&c.data("dimensions")?c.data("dimensions"):(e=this.controls.squareDrag,d={w:c.width(),h:c.height()},c.data("dimensions",d),d)},_change:function(b,c){var d=this,e=d.controls,f=d.color.toHsl(),g=d.color.toString(),h=["s","l","square"];d.active==="external"||d.active==="h"?(e.square.LSSquare(f.h),d.active==="h"?h=[]:h.push("h"),this.hue=f.h):f.h!==this.hue&&(f.h=this.hue,d.color.h(this.hue)),g=d.color.toString(),a.each(h,function(a,b){if(b!==d.active)switch(b){case"h":e.h.slider("value",359-f.h);break;case"s":d.active!=="l"&&e.s.slider("value",f.s);break;case"l":d.active!=="s"&&e.l.slider("value",f.l);break;case"square":var c=d._squareDimensions(),g={left:f.s/100*c.w,top:c.h-f.l/100*c.h};d.active==="s"?delete g.top:d.active==="l"&&delete g.left,d.controls.squareDrag.css(g)}}),this.controls.result.css("backgroundColor",g),this.options.color=this.color.toString(),this.element.is(":input")&&!d.color.error&&this.element.val(g).removeClass("iris-error"),this._inited&&this._trigger("change",{type:this.active},{color:this.color}),this._inited=!0,this.active=!1},show:function(){this.picker.show()},hide:function(){this.picker.hide()},toggle:function(){this.picker.toggle()}};a.widget("a8c.iris",n),a('<style id="iris-css">'+g+"</style>").appendTo("head")})(jQuery),function(a,b){var c=function(a,b){return this instanceof c?this._init(a,b):new c(a,b)};c.prototype={_color:0,_alpha:1,error:!1,__hsl:{h:0,s:0,l:0},_init:function(a){var c="noop";switch(typeof a){case"object":return this._alpha=a.a||1,c=a.r!==b?"fromRgb":a.l!==b?"fromHsl":c,this[c](a);case"string":return this.fromCSS(a);case"number":return this.fromInt(parseInt(a,10))}return this},noop:function(){return this},fromCSS:function(a){var b,c;return this.error=!1,a.match(/^(rgb|hsl)a?/)?(c=a.replace(/(\s|%)/g,"").replace(/^(rgb|hsl)a?\(/,"").replace(/\);?$/,"").split(","),c.length===4&&(this._alpha=parseFloat(c.pop())),a.match(/^rgb/)?this.fromRgb({r:parseInt(c[0],10),g:parseInt(c[1],10),b:parseInt(c[2],10)}):this.fromHsl({h:parseInt(c[0],10),s:parseInt(c[1],10),l:parseInt(c[2],10)})):this.fromHex(a)},fromRgb:function(a,c){return typeof a!="object"||a.r===b||a.g===b||a.b===b?(this.error=!0,this):(this.error=!1,this.fromInt(parseInt((a.r<<16)+(a.g<<8)+a.b,10),c))},fromHex:function(a){return a=a.replace(/^#/,"").replace(/^0x/,""),a.length===3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]),this.error=!/^[0-9A-F]{6}$/i.test(a),this.fromInt(parseInt(a,16))},fromHsl:function(a){if(typeof a!="object"||a.h===b||a.s===b||a.l===b)return this.error=!0,this;var c,d,e,f,g,h,i,j;return this.__hsl=a,h=a.h/360,i=a.s/100,j=a.l/100,i===0?c=d=e=j:(f=j<.5?j*(1+i):j+i-j*i,g=2*j-f,c=this.hue2rgb(g,f,h+1/3),d=this.hue2rgb(g,f,h),e=this.hue2rgb(g,f,h-1/3)),this.fromRgb({r:c*255,g:d*255,b:e*255},!0)},fromInt:function(a,c){return this._color=parseInt(a,10),isNaN(this._color)&&(this._color=0),this._color>16777215?this._color=16777215:this._color<0&&(this._color=0),c===b&&(this.__hsl.h=this.__hsl.s=0),this},hue2rgb:function(a,b,c){return c<0&&(c+=1),c>1&&(c-=1),c<1/6?a+(b-a)*6*c:c<.5?b:c<2/3?a+(b-a)*(2/3-c)*6:a},toString:function(){var a=parseInt(this._color,10).toString(16);if(this.error)return"";if(a.length<6)for(var b=6-a.length-1;b>=0;b--)a="0"+a;return"#"+a},toCSS:function(a,b){a=a||"hex",b=parseFloat(b||this._alpha);switch(a){case"rgb":case"rgba":var c=this.toRgb();return b<1?"rgba( "+c.r+", "+c.g+", "+c.b+", "+b+" )":"rgb( "+c.r+", "+c.g+", "+c.b+" )";case"hsl":case"hsla":var d=this.toHsl();return b<1?"hsla( "+d.h+", "+d.s+", "+d.l+", "+b+" )":"hsl( "+d.h+", "+d.s+", "+d.l+" )";default:return this.toString()}},toRgb:function(){return{r:255&this._color>>16,g:255&this._color>>8,b:255&this._color}},toHsl:function(){var a=this.toRgb(),b=a.r/255,c=a.g/255,d=a.b/255,e=Math.max(b,c,d),f=Math.min(b,c,d),g,h,i=(e+f)/2;if(e===f)g=h=0;else{var j=e-f;h=i>.5?j/(2-e-f):j/(e+f);switch(e){case b:g=(c-d)/j+(c<d?6:0);break;case c:g=(d-b)/j+2;break;case d:g=(b-c)/j+4}g/=6}return g=Math.round(g*360),g===0&&this.__hsl.h!==g&&(g=this.__hsl.h),h=Math.round(h*100),h===0&&this.__hsl.s&&(h=this.__hsl.s),{h:g,s:h,l:Math.round(i*100)}},toInt:function(){return this._color},toIEOctoHex:function(){var a=this.toString(),b=parseInt(255*this._alpha,10).toString(16);return b.length===1&&(b="0"+b),"#"+b+a.replace(/^#/,"")},toLuminosity:function(){var a=this.toRgb();return.2126*Math.pow(a.r/255,2.2)+.7152*Math.pow(a.g/255,2.2)+.0722*Math.pow(a.b/255,2.2)},getDistanceLuminosityFrom:function(a){if(a instanceof c){var b=this.toLuminosity(),d=a.toLuminosity();return b>d?(b+.05)/(d+.05):(d+.05)/(b+.05)}throw"getDistanceLuminosityFrom requires a Color object"},getMaxContrastColor:function(){var a=this.toLuminosity(),b=a>=.5?"000000":"ffffff";return new c(b)},getGrayscaleContrastingColor:function(a){if(!a)return this.getMaxContrastColor();var b=a<5?5:a,c=this.getMaxContrastColor();a=c.getDistanceLuminosityFrom(this);if(a<=b)return c;var d=0===c.toInt()?1:-1;while(a>b)c=c.incrementLightness(d),a=c.getDistanceLuminosityFrom(this);return c},getReadableContrastingColor:function(a,d){if(!a instanceof c)return this;var e=d===b?5:d,f=a.getDistanceLuminosityFrom(this),g=a.getMaxContrastColor(),h=g.getDistanceLuminosityFrom(a);if(h<=e)return g;if(f>=e)return this;var i=0===g.toInt()?-1:1;while(f<e){this.incrementLightness(i),f=this.getDistanceLuminosityFrom(a);if(this._color===0||this._color===16777215)break}return this},h:function(a){return this._hsl("h",a)},s:function(a){return this._hsl("s",a)},l:function(a){return this._hsl("l",a)},_hsl:function(a,c){var d=this.toHsl();return c===b?d[a]:(a==="h"?d[a]=c%360:d[a]=c<0?0:c>100?100:c,this.fromHsl(d))},darken:function(a){return a=a||5,this.incrementLightness(-a)},lighten:function(a){return a=a||5,this.incrementLightness(a)},incrementLightness:function(a){return this.l(this.l()+a)},saturate:function(a){return a=a||15,this.incrementSaturation(a)},desaturate:function(a){return a=a||15,this.incrementSaturation(-a)},incrementSaturation:function(a){return this.s(this.s()+a)},toGrayscale:function(){return this.h(0)},getComplement:function(){return this.incrementHue(180)},getSplitComplement:function(a){a=a||1;var b=180+a*30;return this.incrementHue(b)},getAnalog:function(a){a=a||1;var b=a*30;return this.incrementHue(b)},getTetrad:function(a){a=a||1;var b=a*60;return this.incrementHue(b)},getTriad:function(a){a=a||1;var b=a*120;return this.incrementHue(b)},incrementHue:function(a){return this.h(this.h()+a)}},a.Color=c}(typeof exports=="object"&&exports||this);
     5 No newline at end of file
  • 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/wp-color-picker.css

     
     1.wp-color-picker {
     2        width: 80px;
     3}
     4.wp-color-result {
     5        background-color: #f9f9f9;
     6        border: 1px solid #c4c4c4;
     7        -moz-border-radius: 4px;
     8        -webkit-border-radius: 4px;
     9        border-radius: 4px;
     10        box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
     11        -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
     12        -ms-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
     13        -o-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
     14        -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.05);
     15        cursor: pointer;
     16        display: inline-block;
     17        height: 21px;
     18        margin: 0 6px 1px 0px;
     19        position: relative;
     20        top: 1px;
     21        user-select: none;
     22        -moz-user-select: none;
     23        -ms-user-select: none;
     24        -webkit-user-select: none;
     25        vertical-align: bottom;
     26        width: 98px;
     27}
     28.wp-color-result:after {
     29        background-color: #f9f9f9;
     30        background-image: -moz-linear-gradient(top, #fff 0%, #eee 100%);
     31        background-image: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
     32        background-image: -ms-linear-gradient(top, #fff 0%, #eee 100%);
     33        background-image: -o-linear-gradient(top, #fff 0%, #eee 100%);
     34        background-image: linear-gradient(top, #fff 0%, #eee 100%);
     35        border-bottom-right-radius: 3px;
     36        -moz-border-radius-bottomright: 3px;
     37        -webkit-border-bottom-right-radius: 3px;
     38        border-left: 1px solid #d4d4d4;
     39        border-left-color: #c8c8c8;
     40        border-top-right-radius: 3px;
     41        -moz-border-radius-topright: 3px;
     42        -webkit-border-top-right-radius: 3px;
     43        bottom: 0px;
     44        content: attr( title );
     45        color: #555;
     46        font-size: 11px;
     47        line-height: 21px;
     48        padding: 0 6px;
     49        position: absolute;
     50        right: 0px;
     51        text-align: center;
     52        top: 0px;
     53}
     54.wp-color-result:hover {
     55        border-color: #aaa;
     56        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
     57        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
     58        -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
     59        -o-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
     60        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
     61}
     62.wp-color-result:hover:after {
     63        color: #222;
     64        border-color: #aaa;
     65        border-left: 1px solid #999;
     66}
     67.wp-color-result.wp-picker-open {
     68        top: 0;
     69        width: 38px;
     70}
     71.wp-color-result.wp-picker-open:after {
     72        display: none;
     73}
     74.wp-picker-container, .wp-picker-container:active {
     75        display: inline-block;
     76        outline: 0;
     77}
     78.wp-picker-container:focus {
     79        background: #fff;
     80}
     81.wp-picker-container:focus .wp-color-result {
     82        border-color: #888;
     83        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     84        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     85        -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     86        -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     87        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     88}
     89.wp-picker-container .button {
     90        margin-left: 6px;
     91}
     92.wp-picker-container .iris-hue a.ui-slider-handle:focus:before {
     93        border-color:#333
     94}
     95.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
     96        background-color:#555
     97}
     98.wp-picker-container .iris-picker {
     99        border-color: #dfdfdf;
     100        margin-top: 6px;
     101}
     102input[type="text"].iris-error {
     103        background-color: #ffebe8;
     104        border-color: #c00;
     105        color: #000;
     106}
     107 No newline at end of file
  • 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>