Ticket #12186: background_js_fix.patch

wp-admin/custom-background.php

@@ -156 +156 @@
 <td>
 <style type="text/css">
 #custom-background-image {
+        <?php if ( get_background_color() ) { ?>
         background-color: #<?php echo get_background_color()?>;
-        <?php if ( get_background_image() ) { ?>
-        background: url(<?php echo get_theme_mod('background_image_thumb', ''); ?>);
+        <?php }
+        if ( get_background_image() ) { ?>
+        background-image: url(<?php echo get_theme_mod('background_image_thumb', ''); ?>);
         background-repeat: <?php echo get_theme_mod('background_repeat', 'no-repeat'); ?>;
         background-position: top <?php echo get_theme_mod('background_position', 'left'); ?>;
         background-attachment: <?php echo get_theme_mod('background_position', 'fixed'); ?>;
@@ -221 +223 @@
 <th scope="row"><?php _e( 'Background Color' ); ?></th>
 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
-<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
+<input type="button" class="button hide-if-no-js" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
 
 <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
 </fieldset></td>

wp-admin/js/custom-background.dev.js

@@ -1 @@
-var buttons = ['#pickcolor'], farbtastic;
+var farbtastic;
 
 function pickColor(color) {
         jQuery('#background-color').val(color);
-        farbtastic.setColor(color);
         jQuery('#custom-background-image').css('background-color', color);
+        farbtastic.setColor(color);
 }
 
 jQuery(document).ready(function() {
         jQuery('#pickcolor').click(function() {
                 jQuery('#colorPickerDiv').show();
         });
+
         jQuery('#background-color').keyup(function() {
                 var _hex = jQuery('#background-color').val();
                 var hex = _hex;
@@ -21 +22 @@
                 if ( hex.length == 4 || hex.length == 7 )
                         pickColor( hex );
         });
+
         jQuery('input[name="background-position"]').change(function() {
-                jQuery('#custom-background-image').css('background-position', 'top '+jQuery(this).val());
+                jQuery('#custom-background-image').css('background-position', 'top ' + jQuery(this).val());
         });
+
         jQuery('select[name="background-repeat"]').change(function() {
                 jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
         });
@@ -31 +34 @@
         farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
                 pickColor(color);
         });
-        pickColor(customBackgroundL10n.backgroundcolor);
-});
+        pickColor(jQuery('#background-color').val());
 
-jQuery(document).mousedown(function(){
-        hide_picker(); // Make the picker disappear if you click outside its div element
-});
-
-function hide_picker(what) {
-        var update = false;
-        jQuery('#colorPickerDiv').each(function(){
-                var id = jQuery(this).attr('id');
-                if ( id == what )
-                        return;
-
-                var display = jQuery(this).css('display');
-                if ( display == 'block' )
-                        jQuery(this).fadeOut(2);
+        jQuery(document).mousedown(function(){
+                jQuery('#colorPickerDiv').each(function(){
+                        var display = jQuery(this).css('display');
+                        if ( display == 'block' )
+                                jQuery(this).fadeOut(2);
+                });
         });
-}
- No newline at end of file
+});