WordPress.org
Get WordPress

Make WordPress Core

Ticket #21206: 21206.diff

File 21206.diff, 33.0 KB (added by lessbloat, 14 years ago)

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

     
    248248        }
    249249
    250250        public function enqueue() {
    251                 wp_enqueue_script( 'farbtastic' );
    252                 wp_enqueue_style( 'farbtastic' );
     251                wp_enqueue_script( 'mini-colors' );
     252                wp_enqueue_style( 'mini-colors' );
    253253        }
    254254
    255255        public function to_json() {
    … …  
    270270                                </div>
    271271                                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e('Hex Value'); ?>" />
    272272                        </div>
    273                         <div class="farbtastic-placeholder"></div>
    274273                </label>
    275274                <?php
    276275        }

  • wp-includes/script-loader.php

     
    396396                        'plugin_information' => __('Plugin Information:'),
    397397                        'ays' => __('Are you sure you want to install this plugin?')
    398398                ) );
    399 
     399               
    400400                $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
     401               
     402                $scripts->add( 'mini-colors', '/wp-admin/js/mini-colors.js', array('jquery'), '1.0' );
    401403
    402404                $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );
    403405
    … …  
    425427                        'warnDeleteMenu' => __( "You are about to permanently delete this menu. \n 'Cancel' to stop, 'OK' to delete." ),
    426428                        'saveAlert' => __('The changes you made will be lost if you navigate away from this page.')
    427429                ) );
    428 
    429                 $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('farbtastic'), false, 1 );
     430               
     431                $scripts->add( 'custom-background', "/wp-admin/js/custom-background$suffix.js", array('mini-colors'), false, 1 );
    430432                $scripts->add( 'media-gallery', "/wp-admin/js/media-gallery$suffix.js", array('jquery'), false, 1 );
    431433        }
    432434}
    … …  
    461463
    462464        $rtl_styles = array( 'wp-admin', 'ie', 'media', 'admin-bar', 'wplink', 'customize-controls' );
    463465        // Any rtl stylesheets that don't have a .dev version for ltr
    464         $no_suffix = array( 'farbtastic' );
     466        $no_suffix = array( 'farbtastic', 'mini-colors' );
    465467
    466468        $styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css" );
    467469
    … …  
    479481        $styles->add( 'install', "/wp-admin/css/install$suffix.css" );
    480482        $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css' );
    481483        $styles->add( 'farbtastic', '/wp-admin/css/farbtastic.css', array(), '1.3u1' );
     484        $styles->add( 'mini-colors', '/wp-admin/css/mini-colors.css', array(), '1.0' );
    482485        $styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
    483486        $styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );
    484487        $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( 'mini-colors' ), '2011-06-10' );
     21        wp_enqueue_style( 'mini-colors' );
    2222}
    2323add_action( 'admin_print_styles-appearance_page_theme_options', 'twentyeleven_admin_enqueue_scripts' );
    2424
    … …  
    270270        ?>
    271271        <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
    272272        <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' ); ?>" />
     273        <input type="button" id="pickcolor" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
    274274        <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    275275        <br />
    276276        <span><?php printf( __( 'Default color: %s', 'twentyeleven' ), '<span id="default-color">' . twentyeleven_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>

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

     
    1 var farbtastic;
    2 
    31(function($){
    42        var pickColor = function(a) {
    5                 farbtastic.setColor(a);
    63                $('#link-color').val(a);
    74                $('#link-color-example').css('background-color', a);
    85        };
    96
    107        $(document).ready( function() {
     8               
    119                $('#default-color').wrapInner('<a href="#" />');
    1210
    13                 farbtastic = $.farbtastic('#colorPickerDiv', pickColor);
    14 
    1511                pickColor( $('#link-color').val() );
    1612
    17                 $('.pickcolor').click( function(e) {
    18                         $('#colorPickerDiv').show();
    19                         e.preventDefault();
     13                $("#link-color").miniColors({
     14                        change: function(hex, rgb) {
     15                                $('#link-color-example').css('background-color', hex);
     16                        }
    2017                });
    2118
    2219                $('#link-color').keyup( function() {
    … …  
    2926                        if ( a.length === 3 || a.length === 6 )
    3027                                pickColor( '#' + a );
    3128                });
    32 
    33                 $(document).mousedown( function() {
    34                         $('#colorPickerDiv').hide();
     29               
     30                $('#link-color-example').click(function () {
     31                        return false;
    3532                });
    3633
    3734                $('#default-color a').click( function(e) {

  • wp-admin/js/mini-colors.js

     
     1/*
     2 * jQuery miniColors: A small color selector
     3 *
     4 * Copyright 2011 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/)
     5 *
     6 * Dual licensed under the MIT or GPL Version 2 licenses
     7 *
     8*/
     9if(jQuery) (function($) {
     10       
     11        $.extend($.fn, {
     12               
     13                miniColors: function(o, data) {
     14                       
     15                        var create = function(input, o, data) {
     16                                //
     17                                // Creates a new instance of the miniColors selector
     18                                //
     19                               
     20                                // Determine initial color (defaults to white)
     21                                var color = expandHex(input.val());
     22                                // CHANGED - if( !color ) color = 'ffffff';
     23                                if( !color ) color = 'F1F1F1';
     24                                var hsb = hex2hsb(color);
     25                               
     26                                // Create trigger
     27                                // CHANGED - var trigger = $('<a class="miniColors-trigger" style="background-color: #' + color + '" href="#"></a>');
     28                                var trigger = (o.trigger) ? o.trigger : $('#pickcolor');
     29                                // REMOVED - trigger.insertAfter(input);
     30                               
     31                                // Set input data and update attributes
     32                                input
     33                                        .addClass('miniColors')
     34                                        .data('original-maxlength', input.attr('maxlength') || null)
     35                                        .data('original-autocomplete', input.attr('autocomplete') || null)
     36                                        .data('letterCase', 'uppercase')
     37                                        .data('trigger', trigger)
     38                                        .data('hsb', hsb)
     39                                        .data('change', o.change ? o.change : null)
     40                                        .data('close', o.close ? o.close : null)
     41                                        .data('open', o.open ? o.open : null)
     42                                        .attr('maxlength', 7)
     43                                        .attr('autocomplete', 'off')
     44                                        .val('#' + convertCase(color, o.letterCase));
     45                               
     46                                // Handle options
     47                                if( o.readonly ) input.prop('readonly', true);
     48                                if( o.disabled ) disable(input);
     49                               
     50                                // Show selector when trigger is clicked
     51                                trigger.bind('click.miniColors', function(event) {
     52                                        event.preventDefault();
     53                                        if( input.val() === '' ) input.val('#');
     54                                        show(input);
     55
     56                                });
     57                               
     58                                // Show selector when input receives focus
     59                                input.bind('focus.miniColors', function(event) {
     60                                        if( input.val() === '' ) input.val('#');
     61                                        show(input);
     62                                });
     63                               
     64                                // Hide on blur
     65                                input.bind('blur.miniColors', function(event) {
     66                                        var hex = expandHex( hsb2hex(input.data('hsb')) );
     67                                        input.val( hex ? '#' + convertCase(hex, input.data('letterCase')) : '' );
     68                                });
     69                               
     70                                // Hide when tabbing out of the input
     71                                input.bind('keydown.miniColors', function(event) {
     72                                        if( event.keyCode === 9 ) hide(input);
     73                                });
     74                               
     75                                // Update when color is typed in
     76                                input.bind('keyup.miniColors', function(event) {
     77                                        setColorFromInput(input);
     78                                });
     79                               
     80                                // Handle pasting
     81                                input.bind('paste.miniColors', function(event) {
     82                                        // Short pause to wait for paste to complete
     83                                        setTimeout( function() {
     84                                                setColorFromInput(input);
     85                                        }, 5);
     86                                });
     87                               
     88                        };
     89                       
     90                        var destroy = function(input) {
     91                                //
     92                                // Destroys an active instance of the miniColors selector
     93                                //
     94                               
     95                                hide();
     96                                input = $(input);
     97                               
     98                                // Restore to original state
     99                                input.data('trigger').remove();
     100                                input
     101                                        .attr('autocomplete', input.data('original-autocomplete'))
     102                                        .attr('maxlength', input.data('original-maxlength'))
     103                                        .removeData()
     104                                        .removeClass('miniColors')
     105                                        .unbind('.miniColors');
     106                                $(document).unbind('.miniColors');
     107                        };
     108                       
     109                        var enable = function(input) {
     110                                //
     111                                // Enables the input control and the selector
     112                                //
     113                                input
     114                                        .prop('disabled', false)
     115                                        .data('trigger')
     116                                        .css('opacity', 1);
     117                        };
     118                       
     119                        var disable = function(input) {
     120                                //
     121                                // Disables the input control and the selector
     122                                //
     123                                hide(input);
     124                                input
     125                                        .prop('disabled', true)
     126                                        .data('trigger')
     127                                        .css('opacity', 0.5);
     128                        };
     129                       
     130                        var show = function(input) {
     131                                //
     132                                // Shows the miniColors selector
     133                                //
     134                                if( input.prop('disabled') ) return false;
     135                               
     136                                // Hide all other instances
     137                                hide();                         
     138                               
     139                                // Generate the selector
     140                                var selector = $('<div class="miniColors-selector"></div>');
     141                                selector
     142                                        .append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"><div class="miniColors-colorPicker-inner"></div></div>')
     143                                        .append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>')
     144                                        .css({
     145                                                top: input.is(':visible') ? input.offset().top + input.outerHeight() : input.data('trigger').offset().top + input.data('trigger').outerHeight(),
     146                                                left: input.is(':visible') ? input.offset().left : input.data('trigger').offset().left,
     147                                                display: 'none'
     148                                        })
     149                                        .addClass( input.attr('class') );
     150                               
     151                                // Set background for colors
     152                                var hsb = input.data('hsb');
     153                                selector
     154                                        .find('.miniColors-colors')
     155                                        .css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
     156                               
     157                                // Set colorPicker position
     158                                var colorPosition = input.data('colorPosition');
     159                                if( !colorPosition ) colorPosition = getColorPositionFromHSB(hsb);
     160                                selector.find('.miniColors-colorPicker')
     161                                        .css('top', colorPosition.y + 'px')
     162                                        .css('left', colorPosition.x + 'px');
     163                               
     164                                // Set huePicker position
     165                                var huePosition = input.data('huePosition');
     166                                if( !huePosition ) huePosition = getHuePositionFromHSB(hsb);
     167                                selector.find('.miniColors-huePicker').css('top', huePosition.y + 'px');
     168                               
     169                                // Set input data
     170                                input
     171                                        .data('selector', selector)
     172                                        .data('huePicker', selector.find('.miniColors-huePicker'))
     173                                        .data('colorPicker', selector.find('.miniColors-colorPicker'))
     174                                        .data('mousebutton', 0);
     175                                       
     176                                $('BODY').append(selector);
     177                                selector.fadeIn(100);
     178                               
     179                                // Prevent text selection in IE
     180                                selector.bind('selectstart', function() { return false; });
     181                               
     182                                $(document).bind('mousedown.miniColors touchstart.miniColors', function(event) {
     183                                       
     184                                        input.data('mousebutton', 1);
     185                                        var testSubject = $(event.target).parents().andSelf();
     186                                       
     187                                        if( testSubject.hasClass('miniColors-colors') ) {
     188                                                event.preventDefault();
     189                                                input.data('moving', 'colors');
     190                                                moveColor(input, event);
     191                                        }
     192                                       
     193                                        if( testSubject.hasClass('miniColors-hues') ) {
     194                                                event.preventDefault();
     195                                                input.data('moving', 'hues');
     196                                                moveHue(input, event);
     197                                        }
     198                                       
     199                                        if( testSubject.hasClass('miniColors-selector') ) {
     200                                                event.preventDefault();
     201                                                return;
     202                                        }
     203                                       
     204                                        if( testSubject.hasClass('miniColors') ) return;
     205                                       
     206                                        hide(input);
     207                                });
     208                               
     209                                $(document)
     210                                        .bind('mouseup.miniColors touchend.miniColors', function(event) {
     211                                            event.preventDefault();
     212                                                input.data('mousebutton', 0).removeData('moving');
     213                                        })
     214                                        .bind('mousemove.miniColors touchmove.miniColors', function(event) {
     215                                                event.preventDefault();
     216                                                if( input.data('mousebutton') === 1 ) {
     217                                                        if( input.data('moving') === 'colors' ) moveColor(input, event);
     218                                                        if( input.data('moving') === 'hues' ) moveHue(input, event);
     219                                                }
     220                                        });
     221                               
     222                                // Fire open callback
     223                                if( input.data('open') ) {
     224                                        input.data('open').call(input.get(0), '#' + hsb2hex(hsb), hsb2rgb(hsb));
     225                                }
     226                               
     227                        };
     228                       
     229                        var hide = function(input) {
     230                               
     231                                //
     232                                // Hides one or more miniColors selectors
     233                                //
     234                               
     235                                // Hide all other instances if input isn't specified
     236                                if( !input ) input = '.miniColors';
     237                               
     238                                $(input).each( function() {
     239                                        var selector = $(this).data('selector');
     240                                        $(this).removeData('selector');
     241                                        $(selector).fadeOut(100, function() {
     242                                                // Fire close callback
     243                                                if( input.data('close') ) {
     244                                                        var hsb = input.data('hsb'), hex = hsb2hex(hsb);       
     245                                                        input.data('close').call(input.get(0), '#' + hex, hsb2rgb(hsb));
     246                                                }
     247                                                $(this).remove();
     248                                        });
     249                                });
     250                               
     251                                $(document).unbind('.miniColors');
     252                               
     253                        };
     254                       
     255                        var moveColor = function(input, event) {
     256
     257                                var colorPicker = input.data('colorPicker');
     258                               
     259                                colorPicker.hide();
     260                               
     261                                var position = {
     262                                        x: event.pageX,
     263                                        y: event.pageY
     264                                };
     265                               
     266                                // Touch support
     267                                if( event.originalEvent.changedTouches ) {
     268                                        position.x = event.originalEvent.changedTouches[0].pageX;
     269                                        position.y = event.originalEvent.changedTouches[0].pageY;
     270                                }
     271                                position.x = position.x - input.data('selector').find('.miniColors-colors').offset().left - 5;
     272                                position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 5;
     273                                if( position.x <= -5 ) position.x = -5;
     274                                if( position.x >= 144 ) position.x = 144;
     275                                if( position.y <= -5 ) position.y = -5;
     276                                if( position.y >= 144 ) position.y = 144;
     277                               
     278                                input.data('colorPosition', position);
     279                                colorPicker.css('left', position.x).css('top', position.y).show();
     280                               
     281                                // Calculate saturation
     282                                var s = Math.round((position.x + 5) * 0.67);
     283                                if( s < 0 ) s = 0;
     284                                if( s > 100 ) s = 100;
     285                               
     286                                // Calculate brightness
     287                                var b = 100 - Math.round((position.y + 5) * 0.67);
     288                                if( b < 0 ) b = 0;
     289                                if( b > 100 ) b = 100;
     290                               
     291                                // Update HSB values
     292                                var hsb = input.data('hsb');
     293                                hsb.s = s;
     294                                hsb.b = b;
     295                               
     296                                // Set color
     297                                setColor(input, hsb, true);
     298                        };
     299                       
     300                        var moveHue = function(input, event) {
     301                               
     302                                var huePicker = input.data('huePicker');
     303                               
     304                                huePicker.hide();
     305                               
     306                                var position = {
     307                                        y: event.pageY
     308                                };
     309                               
     310                                // Touch support
     311                                if( event.originalEvent.changedTouches ) {
     312                                        position.y = event.originalEvent.changedTouches[0].pageY;
     313                                }
     314                               
     315                                position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 1;
     316                                if( position.y <= -1 ) position.y = -1;
     317                                if( position.y >= 149 ) position.y = 149;
     318                                input.data('huePosition', position);
     319                                huePicker.css('top', position.y).show();
     320                               
     321                                // Calculate hue
     322                                var h = Math.round((150 - position.y - 1) * 2.4);
     323                                if( h < 0 ) h = 0;
     324                                if( h > 360 ) h = 360;
     325                               
     326                                // Update HSB values
     327                                var hsb = input.data('hsb');
     328                                hsb.h = h;
     329                               
     330                                // Set color
     331                                setColor(input, hsb, true);
     332                               
     333                        };
     334                       
     335                        var setColor = function(input, hsb, updateInput) {
     336                                input.data('hsb', hsb);
     337                                var hex = hsb2hex(hsb);
     338                                if( updateInput ) input.val( '#' + convertCase(hex, input.data('letterCase')) );
     339                                //REMOVED - input.data('trigger').css('backgroundColor', '#' + hex);
     340                                if( input.data('selector') ) input.data('selector').find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
     341                               
     342                                // Fire change callback
     343                                if( input.data('change') ) {
     344                                        if( hex === input.data('lastChange') ) return;
     345                                        input.data('change').call(input.get(0), '#' + hex, hsb2rgb(hsb));
     346                                        input.data('lastChange', hex);
     347                                }
     348                               
     349                        };
     350                       
     351                        var setColorFromInput = function(input) {
     352                               
     353                                input.val('#' + cleanHex(input.val()));
     354                                var hex = expandHex(input.val());
     355                                if( !hex ) return false;
     356                               
     357                                // Get HSB equivalent
     358                                var hsb = hex2hsb(hex);
     359                               
     360                                // If color is the same, no change required
     361                                var currentHSB = input.data('hsb');
     362                                if( hsb.h === currentHSB.h && hsb.s === currentHSB.s && hsb.b === currentHSB.b ) return true;
     363                               
     364                                // Set colorPicker position
     365                                var colorPosition = getColorPositionFromHSB(hsb);
     366                                var colorPicker = $(input.data('colorPicker'));
     367                                colorPicker.css('top', colorPosition.y + 'px').css('left', colorPosition.x + 'px');
     368                                input.data('colorPosition', colorPosition);
     369                               
     370                                // Set huePosition position
     371                                var huePosition = getHuePositionFromHSB(hsb);
     372                                var huePicker = $(input.data('huePicker'));
     373                                huePicker.css('top', huePosition.y + 'px');
     374                                input.data('huePosition', huePosition);
     375                               
     376                                setColor(input, hsb);
     377                               
     378                                return true;
     379                               
     380                        };
     381                       
     382                        var convertCase = function(string, letterCase) {
     383                                if( letterCase === 'lowercase' ) return string.toLowerCase();
     384                                if( letterCase === 'uppercase' ) return string.toUpperCase();
     385                                return string;
     386                        };
     387                       
     388                        var getColorPositionFromHSB = function(hsb) {                           
     389                                var x = Math.ceil(hsb.s / 0.67);
     390                                if( x < 0 ) x = 0;
     391                                if( x > 150 ) x = 150;
     392                                var y = 150 - Math.ceil(hsb.b / 0.67);
     393                                if( y < 0 ) y = 0;
     394                                if( y > 150 ) y = 150;
     395                                return { x: x - 5, y: y - 5 };
     396                        };
     397                       
     398                        var getHuePositionFromHSB = function(hsb) {
     399                                var y = 150 - (hsb.h / 2.4);
     400                                if( y < 0 ) h = 0;
     401                                if( y > 150 ) h = 150;                         
     402                                return { y: y - 1 };
     403                        };
     404                       
     405                        var cleanHex = function(hex) {
     406                                return hex.replace(/[^A-F0-9]/ig, '');
     407                        };
     408                       
     409                        var expandHex = function(hex) {
     410                                hex = cleanHex(hex);
     411                                if( !hex ) return null;
     412                                if( hex.length === 3 ) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
     413                                return hex.length === 6 ? hex : null;
     414                        };                     
     415                       
     416                        var hsb2rgb = function(hsb) {
     417                                var rgb = {};
     418                                var h = Math.round(hsb.h);
     419                                var s = Math.round(hsb.s*255/100);
     420                                var v = Math.round(hsb.b*255/100);
     421                                if(s === 0) {
     422                                        rgb.r = rgb.g = rgb.b = v;
     423                                } else {
     424                                        var t1 = v;
     425                                        var t2 = (255 - s) * v / 255;
     426                                        var t3 = (t1 - t2) * (h % 60) / 60;
     427                                        if( h === 360 ) h = 0;
     428                                        if( h < 60 ) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
     429                                        else if( h < 120 ) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
     430                                        else if( h < 180 ) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
     431                                        else if( h < 240 ) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
     432                                        else if( h < 300 ) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
     433                                        else if( h < 360 ) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
     434                                        else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
     435                                }
     436                                return {
     437                                        r: Math.round(rgb.r),
     438                                        g: Math.round(rgb.g),
     439                                        b: Math.round(rgb.b)
     440                                };
     441                        };
     442                       
     443                        var rgb2hex = function(rgb) {
     444                                var hex = [
     445                                        rgb.r.toString(16),
     446                                        rgb.g.toString(16),
     447                                        rgb.b.toString(16)
     448                                ];
     449                                $.each(hex, function(nr, val) {
     450                                        if (val.length === 1) hex[nr] = '0' + val;
     451                                });
     452                                return hex.join('');
     453                        };
     454                       
     455                        var hex2rgb = function(hex) {
     456                                hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
     457                               
     458                                return {
     459                                        r: hex >> 16,
     460                                        g: (hex & 0x00FF00) >> 8,
     461                                        b: (hex & 0x0000FF)
     462                                };
     463                        };
     464                       
     465                        var rgb2hsb = function(rgb) {
     466                                var hsb = { h: 0, s: 0, b: 0 };
     467                                var min = Math.min(rgb.r, rgb.g, rgb.b);
     468                                var max = Math.max(rgb.r, rgb.g, rgb.b);
     469                                var delta = max - min;
     470                                hsb.b = max;
     471                                hsb.s = max !== 0 ? 255 * delta / max : 0;
     472                                if( hsb.s !== 0 ) {
     473                                        if( rgb.r === max ) {
     474                                                hsb.h = (rgb.g - rgb.b) / delta;
     475                                        } else if( rgb.g === max ) {
     476                                                hsb.h = 2 + (rgb.b - rgb.r) / delta;
     477                                        } else {
     478                                                hsb.h = 4 + (rgb.r - rgb.g) / delta;
     479                                        }
     480                                } else {
     481                                        hsb.h = -1;
     482                                }
     483                                hsb.h *= 60;
     484                                if( hsb.h < 0 ) {
     485                                        hsb.h += 360;
     486                                }
     487                                hsb.s *= 100/255;
     488                                hsb.b *= 100/255;
     489                                return hsb;
     490                        };                     
     491                       
     492                        var hex2hsb = function(hex) {
     493                                var hsb = rgb2hsb(hex2rgb(hex));
     494                                // Zero out hue marker for black, white, and grays (saturation === 0)
     495                                if( hsb.s === 0 ) hsb.h = 360;
     496                                return hsb;
     497                        };
     498                       
     499                        var hsb2hex = function(hsb) {
     500                                return rgb2hex(hsb2rgb(hsb));
     501                        };
     502
     503                       
     504                        // Handle calls to $([selector]).miniColors()
     505                        switch(o) {
     506                       
     507                                case 'readonly':
     508                                       
     509                                        $(this).each( function() {
     510                                                if( !$(this).hasClass('miniColors') ) return;
     511                                                $(this).prop('readonly', data);
     512                                        });
     513                                       
     514                                        return $(this);
     515                               
     516                                case 'disabled':
     517                                       
     518                                        $(this).each( function() {
     519                                                if( !$(this).hasClass('miniColors') ) return;
     520                                                if( data ) {
     521                                                        disable($(this));
     522                                                } else {
     523                                                        enable($(this));
     524                                                }
     525                                        });
     526                                                                               
     527                                        return $(this);
     528                       
     529                                case 'value':
     530                                       
     531                                        // Getter
     532                                        if( data === undefined ) {
     533                                                if( !$(this).hasClass('miniColors') ) return;
     534                                                var input = $(this),
     535                                                        hex = expandHex(input.val());
     536                                                return hex ? '#' + convertCase(hex, input.data('letterCase')) : null;
     537                                        }
     538                                       
     539                                        // Setter
     540                                        $(this).each( function() {
     541                                                if( !$(this).hasClass('miniColors') ) return;
     542                                                $(this).val(data);
     543                                                setColorFromInput($(this));
     544                                        });
     545                                       
     546                                        return $(this);
     547                                       
     548                                case 'destroy':
     549                                       
     550                                        $(this).each( function() {
     551                                                if( !$(this).hasClass('miniColors') ) return;
     552                                                destroy($(this));
     553                                        });
     554                                                                               
     555                                        return $(this);
     556                               
     557                                default:
     558                                       
     559                                        if( !o ) o = {};
     560                                       
     561                                        $(this).each( function() {
     562                                               
     563                                                // Must be called on an input element
     564                                                if( $(this)[0].tagName.toLowerCase() !== 'input' ) return;
     565                                               
     566                                                // If a trigger is present, the control was already created
     567                                                if( $(this).data('trigger') ) return;
     568                                               
     569                                                // Create the control
     570                                                create($(this), o, data);
     571                                               
     572                                        });
     573                                       
     574                                        return $(this);
     575                                       
     576                        }
     577                       
     578                }
     579                       
     580        });
     581       
     582})(jQuery);
     583 No newline at end of file

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

    Property changes on: wp-admin/js/mini-colors.js
___________________________________________________________________
Added: svn:executable
   + *
     
    1 var farbtastic, pickColor;
    2 
    31(function($) {
     2       
     3        $(document).ready( function() {
     4               
     5                var defaultColor = $('#defaultcolor').val();
    46
    5         var defaultColor = '';
     7                $("#background-color").miniColors();
    68
    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 
    289                $('#clearcolor a').click( function(e) {
    29                         pickColor( defaultColor );
    3010                        e.preventDefault();
     11                        $('#background-color').val(defaultColor);
     12                        $('#custom-background-image').css('background-color', defaultColor);
     13                        $('#clearcolor').hide();
    3114                });
    3215
    3316                $('#background-color').keyup(function() {
    … …  
    4023                        if ( hex.length == 4 || hex.length == 7 )
    4124                                pickColor( hex );
    4225                });
    43 
     26               
    4427                $('input[name="background-position-x"]').change(function() {
    4528                        $('#custom-background-image').css('background-position', $(this).val() + ' top');
    4629                });
    … …  
    4831                $('input[name="background-repeat"]').change(function() {
    4932                        $('#custom-background-image').css('background-repeat', $(this).val());
    5033                });
    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                 });
     34               
    6435        });
    6536
    6637})(jQuery);
     38 No newline at end of file

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

     
    116116                        input  = new api.Element( this.container.find('.color-picker-hex') );
    117117                        update = function( color ) {
    118118                                spot.css( 'background', color );
    119                                 control.farbtastic.setColor( color );
    120119                        };
     120                       
     121                        this.container.find('.color-picker-hex').miniColors({
     122                                trigger: this.container.find('.dropdown'),
     123                                change: function(hex, rgb) {
     124                                        spot.css( 'background', hex );
     125                                }
     126                        });
    121127
    122                         this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), control.setting.set );
    123 
    124128                        // Only pass through values that are valid hexes/empty.
    125129                        input.sync( this.setting ).validate = function( to ) {
    126130                                return rhex.test( to ) ? to : null;

  • 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('mini-colors');
    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('mini-colors');
    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);
     343                $('#background-color').val(color);
    345344        }
    346345
    347346        function toggle_text() {
    … …  
    360359        }
    361360
    362361        $(document).ready(function() {
     362               
    363363                header_text_fields = $('.displaying-header-text');
    364                 $('#pickcolor').click(function(e) {
    365                         e.preventDefault();
    366                         $('#color-picker').show();
    367                 });
    368364
     365                $("#text-color").miniColors();
     366
    369367                $('#display-header-text').click( toggle_text );
    370368
    371369                $('#defaultcolor').click(function() {
    … …  
    385383                                pickColor( hex );
    386384                });
    387385
    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 { ?>
     386                <?php if ( !display_header_text() ) { ?>
    400387                toggle_text();
    401388                <?php } ?>
    402389        });
    … …  
    641628<th scope="row"><?php _e( 'Text Color' ); ?></th>
    642629<td>
    643630        <p>
    644 <?php if ( display_header_text() ) : ?>
    645                 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_header_textcolor() ); ?>" />
    646 <?php else : ?>
    647                 <input type="text" name="text-color" id="text-color" value="#<?php echo esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>" />
    648 <?php endif; ?>
     631<?php $header_textcolor = ( display_header_text() ) ? esc_attr( get_header_textcolor() ) : esc_attr( get_theme_support( 'custom-header', 'default-text-color' ) ); ?>
     632                <input type="text" name="text-color" id="text-color" value="#<?php echo $header_textcolor; ?>" />
    649633                <a href="#" class="hide-if-no-js" id="pickcolor"><?php _e( 'Select a Color' ); ?></a>
    650634        </p>
    651635        <div id="color-picker" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>

  • wp-admin/css/mini-colors.css 

    Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: wp-admin/images/colors.png
___________________________________________________________________
Added: svn:executable
   + *
Added: svn:mime-type
   + application/octet-stream
     
     1/* CHANGED
     2.miniColors-trigger {
     3        height: 22px;
     4        width: 22px;
     5        background: url(images/trigger.png) center no-repeat;
     6        vertical-align: middle;
     7        margin: 0 .25em;
     8        display: inline-block;
     9        outline: none;
     10}*/
     11
     12.miniColors-trigger {
     13        margin-left: 8px;
     14        display: inline-block;
     15        outline: none;
     16}
     17
     18.miniColors-selector {
     19        position: absolute;
     20        width: 175px;
     21        height: 150px;
     22        background: #FFF;
     23        border: solid 1px #BBB;
     24        -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
     25        -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
     26        box-shadow: 0 0 6px rgba(0, 0, 0, .25);
     27        -moz-border-radius: 5px;
     28        -webkit-border-radius: 5px;
     29        border-radius: 5px;
     30        padding: 5px;
     31        z-index: 999999;
     32}
     33
     34.miniColors-selector.black {
     35        background: #000;
     36        border-color: #000;
     37}
     38
     39.miniColors-colors {
     40        position: absolute;
     41        top: 5px;
     42        left: 5px;
     43        width: 150px;
     44        height: 150px;
     45        background: url(../images/colors.png) right no-repeat;
     46        cursor: crosshair;
     47}
     48
     49.miniColors-hues {
     50        position: absolute;
     51        top: 5px;
     52        left: 160px;
     53        width: 20px;
     54        height: 150px;
     55        background: url(../images/colors.png) left no-repeat;
     56        cursor: crosshair;
     57}
     58
     59.miniColors-colorPicker {
     60        position: absolute;
     61        width: 9px;
     62        height: 9px;
     63        border: 1px solid #fff;
     64        -moz-border-radius: 11px;
     65        -webkit-border-radius: 11px;
     66        border-radius: 11px;
     67}
     68.miniColors-colorPicker-inner {
     69        position: absolute;
     70        top: 0;
     71        left: 0;
     72        width: 7px;
     73        height: 7px;
     74        border: 1px solid #000;
     75        -moz-border-radius: 9px;
     76        -webkit-border-radius: 9px;
     77        border-radius: 9px;
     78}
     79
     80.miniColors-huePicker {
     81        position: absolute;
     82        left: -3px;
     83        width: 24px;
     84        height: 1px;
     85        border: 1px solid #fff;
     86        border-radius: 2px;
     87        background: #000;
     88}
     89 No newline at end of file

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

    Property changes on: wp-admin/css/mini-colors.css
___________________________________________________________________
Added: svn:executable
   + *
     
    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.dev.css

     
    315315/*
    316316 * Color Picker
    317317 */
    318 .customize-control-color .color-picker-hex,
    319 .customize-control-color .farbtastic-placeholder {
     318.customize-control-color .color-picker-hex {
    320319        display: none;
    321320}
    322321
    323 .customize-control-color.open .color-picker-hex,
    324 .customize-control-color.open .farbtastic-placeholder {
     322.customize-control-color.open .color-picker-hex {
    325323        display: block;
    326324}
    327325
    … …  
    354352        color: #999;
    355353}
    356354
    357 .customize-control-color .farbtastic-placeholder {
    358         width: 100%;
    359         margin: 5px 0 10px;
    360         float: left;
    361 }
    362 
    363 .customize-control-color .farbtastic {
    364         margin: 0 auto;
    365 }
    366 
    367355/*
    368356 * Image Picker
    369357 */

  • 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('mini-colors');
    112112        }
    113113
    114114        /**