Changeset 17737

Timestamp:

04/28/2011 09:32:34 AM (15 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:

• theme-options.css (modified) (1 diff)
• theme-options.js (modified) (1 diff)
• theme-options.php (modified) (2 diffs)

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

@@ -21 +21 @@
         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;
+}

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

@@ -1 +1 @@
 var farbtastic;
-function pickColor(a) {
-        farbtastic.setColor(a);
-        jQuery("#link-color").val(a);
-        jQuery("#link-color").css("background-color", a);
-}
-jQuery(document).ready(function() {
-        jQuery("#pickcolor").click(function() {
-                jQuery("#colorPickerDiv").show();
-                return false;
-        });
-        jQuery("#link-color").keyup(function() {
-                var b = jQuery("#link-color").val(),
-                a = b;
-                if (a.charAt(0) != "#") {
-                        a = "#" + a;
-                }
-                a = a.replace(/[^#a-fA-F0-9]+/, "");
-                if (a != b) {
-                        jQuery("#link-color").val(a);
-                }
-                if (a.length == 4 || a.length == 7) {
-                        pickColor(a);
-                }
-        });
-        farbtastic = jQuery.farbtastic("#colorPickerDiv",
-        function(a) {
-                pickColor(a);
-        });
-        pickColor(jQuery("#link-color").val());
-        jQuery(document).mousedown(function() {
-                jQuery("#colorPickerDiv").each(function() {
-                        var a = jQuery(this).css("display");
-                        if (a == "block") {
-                                jQuery(this).fadeOut(2);
-                        }
+
+(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);
+
+                pickColor( $('#link-color').val() );
+
+                $('#pickcolor').click( function(e) {
+                        $('#colorPickerDiv').show();
+                        e.preventDefault();
+                });
+
+                $('#link-color').keyup( function() {
+                        var a = $('#link-color').val(),
+                                b = a;
+
+                        a = a.replace(/[^a-fA-F0-9]/, '');
+                        if ( '#' + a !== b )
+                                $('#link-color').val(a);
+                        if ( a.length === 3 || a.length === 6 )
+                                pickColor( '#' + a );
+                });
+
+                $(document).mousedown( function() {
+                        $('#colorPickerDiv').hide();
                 });
         });
-});
+})(jQuery);

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

@@ -22 +22 @@
                 return;
 
-        wp_enqueue_style(  'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', '', '0.1' );
-        wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js' );
+        wp_enqueue_style( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' );
+        wp_enqueue_script( 'twentyeleven-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '2011-04-28' );
         wp_enqueue_style( 'farbtastic' );
-        wp_enqueue_script( 'farbtastic' );
 }
 add_action( 'admin_enqueue_scripts', 'twentyeleven_admin_enqueue_scripts' );
@@ -194 +193 @@
                                                 <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'] ); ?>" />
-                                                        <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e( 'Select a Color', 'twentyeleven' ); ?></a>
+                                                        <span id="link-color-example"></span> <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 />