Changeset 13574

Timestamp:

03/03/2010 05:10:43 PM (13 years ago)

Author:

ryan

Message:

Background color selection. Props lancewillett. see #12186

Location:

trunk

Files:

• wp-admin/custom-background.php (modified) (6 diffs)
• wp-includes/theme.php (modified) (3 diffs)

trunk/wp-admin/custom-background.php

@@ -58 +58 @@
         $page = add_theme_page(__('Background'), __('Background'), 'switch_themes', 'custom-background', array(&$this, 'admin_page'));
 
-        add_action("admin_head-$page", array(&$this, 'take_action'), 50);
+        add_action("admin_print_scripts-$page", array(&$this, 'js_includes'));
+        add_action("admin_print_styles-$page", array(&$this, 'css_includes'));
+        add_action("admin_head-$page", array(&$this, 'js'), 50);
+        add_action("admin_head-$page", array(&$this, 'take_action'), 49);
         if ( $this->admin_header_callback )
             add_action("admin_head-$page", $this->admin_header_callback, 51);
@@ -79 +82 @@
 
         return $step;
+    }
+
+    /**
+     * Setup the enqueue for the JavaScript files.
+     *
+     * @since unknown
+     */
+    function js_includes() {
+        $step = $this->step();
+
+        if ( 1 == $step )
+            wp_enqueue_script('farbtastic');
+    }
+
+    /**
+     * Setup the enqueue for the CSS files
+     *
+     * @since unknown
+     */
+    function css_includes() {
+        $step = $this->step();
+
+        if ( 1 == $step )
+            wp_enqueue_style('farbtastic');
     }
 
@@ -120 +147 @@
         if ( isset($_POST['remove-background']) )
             set_theme_mod('background_image', '');
+        if ( isset( $_POST['background-color'] ) ) {
+            $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
+            if ( strlen($color) == 6 || strlen($color) == 3 )
+                set_theme_mod('background_color', $color);
+            else
+                set_theme_mod('background_color', '');
+        }
+    }
+
+    /**
+     * Execute Javascript depending on step.
+     *
+     * @since unknown
+     */
+    function js() {
+        $step = $this->step();
+        if ( 1 == $step )
+            $this->js_1();
+    }
+
+    /**
+     * Display Javascript based on Step 1.
+     *
+     * @since unknown
+     */
+    function js_1() { ?>
+<script type="text/javascript">
+    var buttons = ['#pickcolor'],
+        farbtastic;
+
+    function pickColor(color) {
+        jQuery('#background-color').val(color);
+        farbtastic.setColor(color);
+    }
+
+    jQuery(document).ready(function() {
+        jQuery('#pickcolor').click(function() {
+            jQuery('#colorPickerDiv').show();
+        });
+
+        farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
+        pickColor('#<?php background_color(); ?>');
+    });
+
+    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);
+            }
+        });
+    }
+
+</script>
+<?php
     }
 
@@ -144 +235 @@
     } else {
 ?>
-<div id="custom-background-image">
+<div id="custom-background-image" style="background-color: #<?php background_color(); ?>;">
 <img class="custom-background-image" src="<?php background_image(); ?>" />
 </div>
@@ -162 +253 @@
 <th scope="col"><?php _e( 'Repeat' ); ?></th>
 <th scope="col"><?php _e( 'Attachment' ); ?></th>
+<th scope="col"><?php _e( 'Color' ); ?></th>
 </tr>
 
@@ -201 +293 @@
 <?php _e('Fixed') ?>
 </label>
+</fieldset></td>
+
+<td><fieldset><legend class="screen-reader-text"><span><?php _e( '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" />
+
+<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
 </fieldset></td>
 </tr>

trunk/wp-includes/theme.php

@@ -1358 +1358 @@
  */
 function get_background_image() {
-    $default =  defined('BACKGROUND_IMAGE') ? BACKGROUND_IMAGE : '';
+    $default = defined('BACKGROUND_IMAGE') ? BACKGROUND_IMAGE : '';
 
     return get_theme_mod('background_image', $default);
@@ -1370 +1370 @@
 function background_image() {
     echo get_background_image();
+}
+
+/**
+ * Retrieve value for custom background color.
+ *
+ * @since 3.0.0
+ * @uses BACKGROUND_COLOR
+ *
+ * @return string
+ */
+function get_background_color() {
+    $default = defined('BACKGROUND_COLOR') ? BACKGROUND_COLOR : '';
+
+    return get_theme_mod('background_color', $default);
+}
+
+/**
+ * Display background color value.
+ *
+ * @since 3.0.0
+ */
+function background_color() {
+    echo get_background_color();
 }
 
@@ -1438 +1461 @@
 <style type="text/css">
 body {
-    background-image:url('<?php background_image(); ?>');
+    background-color: #<?php background_color(); ?>;
+    background-image: url('<?php background_image(); ?>');
     <?php echo $repeat; ?>
     <?php echo $position; ?>