WordPress.org

Make WordPress Core

Ticket #21206: 21206.diff

File 21206.diff, 33.0 KB (added by lessbloat, 22 months 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        /**