WordPress.org

Make WordPress Core

Ticket #17198: farbtastic-color-input.diff

File farbtastic-color-input.diff, 2.6 KB (added by lancewillett, 9 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() {