Ticket #17198: farbtastic-color-input.diff

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

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

wp-content/themes/twentyeleven/inc/theme-options.css

@@ -19 +19 @@
 }
 .image-radio-option img {
         margin: 0 0 0 -2px;
-}
-#link-color-example {
-        padding: 4px 14px;
-        margin: 0 7px 0 3px;
-        -moz-border-radius: 4px;
-        -khtml-border-radius: 4px;
-        -webkit-border-radius: 4px;
-        border-radius: 4px;
-        border: 1px solid #dfdfdf;
 }
- No newline at end of file

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

@@ -1 +1 @@
 var farbtastic;
 
 (function($){
-        var pickColor = function(a) {
-                farbtastic.setColor(a);
-                $('#link-color').val(a);
-                $('#link-color-example').css('background-color', a);
-        }
-
         $(document).ready( function() {
-                farbtastic = $.farbtastic('#colorPickerDiv', pickColor);
+                farbtastic = $.farbtastic('#colorPickerDiv', '#link-color');
 
-                pickColor( $('#link-color').val() );
-
                 $('#pickcolor').click( function(e) {
                         $('#colorPickerDiv').show();
                         e.preventDefault();
@@ -25 +17 @@
                         if ( '#' + a !== b )
                                 $('#link-color').val(a);
                         if ( a.length === 3 || a.length === 6 )
-                                pickColor( '#' + a );
+                                a = '#' + a;
                 });
 
                 $(document).mousedown( function() {