WordPress.org

Make WordPress Core

Changeset 17737


Ignore:
Timestamp:
04/28/11 09:32:34 (3 years ago)
Author:
nacin
Message:

Twenty Eleven: Fix up the color picker JS. Use a separate color swatch rather than the input background. While cool, it doesn't have suffficient contrast. Also set farbtastic as a JS dependency. see #17198.

Location:
trunk/wp-content/themes/twentyeleven/inc
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentyeleven/inc/theme-options.css

    r17735 r17737  
    2121    margin: 0 0 0 -2px; 
    2222} 
     23#link-color-example { 
     24    padding: 4px 14px; 
     25    margin: 0 7px 0 3px; 
     26    -moz-border-radius: 4px; 
     27    -khtml-border-radius: 4px; 
     28    -webkit-border-radius: 4px; 
     29    border-radius: 4px; 
     30    border: 1px solid #dfdfdf; 
     31} 
  • trunk/wp-content/themes/twentyeleven/inc/theme-options.js

    r17735 r17737  
    11var farbtastic; 
    2 function pickColor(a) { 
    3     farbtastic.setColor(a); 
    4     jQuery("#link-color").val(a); 
    5     jQuery("#link-color").css("background-color", a); 
    6 } 
    7 jQuery(document).ready(function() { 
    8     jQuery("#pickcolor").click(function() { 
    9         jQuery("#colorPickerDiv").show(); 
    10         return false; 
    11     }); 
    12     jQuery("#link-color").keyup(function() { 
    13         var b = jQuery("#link-color").val(), 
    14         a = b; 
    15         if (a.charAt(0) != "#") { 
    16             a = "#" + a; 
    17         } 
    18         a = a.replace(/[^#a-fA-F0-9]+/, ""); 
    19         if (a != b) { 
    20             jQuery("#link-color").val(a); 
    21         } 
    22         if (a.length == 4 || a.length == 7) { 
    23             pickColor(a); 
    24         } 
    25     }); 
    26     farbtastic = jQuery.farbtastic("#colorPickerDiv", 
    27     function(a) { 
    28         pickColor(a); 
    29     }); 
    30     pickColor(jQuery("#link-color").val()); 
    31     jQuery(document).mousedown(function() { 
    32         jQuery("#colorPickerDiv").each(function() { 
    33             var a = jQuery(this).css("display"); 
    34             if (a == "block") { 
    35                 jQuery(this).fadeOut(2); 
    36             } 
     2 
     3(function($){ 
     4    var pickColor = function(a) { 
     5        farbtastic.setColor(a); 
     6        $('#link-color').val(a); 
     7        $('#link-color-example').css('background-color', a); 
     8    } 
     9 
     10    $(document).ready( function() { 
     11        farbtastic = $.farbtastic('#colorPickerDiv', pickColor); 
     12 
     13        pickColor( $('#link-color').val() ); 
     14 
     15        $('#pickcolor').click( function(e) { 
     16            $('#colorPickerDiv').show(); 
     17            e.preventDefault(); 
     18        }); 
     19 
     20        $('#link-color').keyup( function() { 
     21            var a = $('#link-color').val(), 
     22                b = a; 
     23 
     24            a = a.replace(/[^a-fA-F0-9]/, ''); 
     25            if ( '#' + a !== b ) 
     26                $('#link-color').val(a); 
     27            if ( a.length === 3 || a.length === 6 ) 
     28                pickColor( '#' + a ); 
     29        }); 
     30 
     31        $(document).mousedown( function() { 
     32            $('#colorPickerDiv').hide(); 
    3733        }); 
    3834    }); 
    39 }); 
     35})(jQuery); 
  • trunk/wp-content/themes/twentyeleven/inc/theme-options.php

    r17735 r17737  
    2222        return; 
    2323 
    24     wp_enqueue_style(  'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', '', '0.1' ); 
    25     wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js' ); 
     24    wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' ); 
     25    wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '2011-04-28' ); 
    2626    wp_enqueue_style( 'farbtastic' ); 
    27     wp_enqueue_script( 'farbtastic' ); 
    2827} 
    2928add_action( 'admin_enqueue_scripts', 'twentyeleven_admin_enqueue_scripts' ); 
     
    194193                        <fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend> 
    195194                            <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" /> 
    196                             <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a> 
     195                            <span id="link-color-example"></span> <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a> 
    197196                            <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div> 
    198197                            <br /> 
Note: See TracChangeset for help on using the changeset viewer.