WordPress.org

Make WordPress Core

Ticket #17198: farbtastic-color-input.diff

File farbtastic-color-input.diff, 2.6 KB (added by lancewillett, 3 years ago)

Sample of how to implement the color contrast with farbtastic on the input element directly

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

     
    192192                                        <td> 
    193193                                                <fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend> 
    194194                                                        <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" /> 
    195                                                         <span id="link-color-example"></span> <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a> 
     195                                                        <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a> 
    196196                                                        <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div> 
    197197                                                        <br /> 
    198198                                                        <small class="description"><?php printf( __( 'Default color: %s', 'twentyeleven' ), $default_options['link_color'] ); ?></small> 
  • wp-content/themes/twentyeleven/inc/theme-options.css

     
    1919} 
    2020.image-radio-option img { 
    2121        margin: 0 0 0 -2px; 
    22 } 
    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; 
    3122} 
    32  No newline at end of file 
  • wp-content/themes/twentyeleven/inc/theme-options.js

     
    11var farbtastic; 
    22 
    33(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  
    104        $(document).ready( function() { 
    11                 farbtastic = $.farbtastic('#colorPickerDiv', pickColor); 
     5                farbtastic = $.farbtastic('#colorPickerDiv', '#link-color'); 
    126 
    13                 pickColor( $('#link-color').val() ); 
    14  
    157                $('#pickcolor').click( function(e) { 
    168                        $('#colorPickerDiv').show(); 
    179                        e.preventDefault(); 
     
    2517                        if ( '#' + a !== b ) 
    2618                                $('#link-color').val(a); 
    2719                        if ( a.length === 3 || a.length === 6 ) 
    28                                 pickColor( '#' + a ); 
     20                                a = '#' + a; 
    2921                }); 
    3022 
    3123                $(document).mousedown( function() {