Ticket #12186: custom-background.3.diff

Applications/MAMP/htdocs/wordpress/wp/wp-admin/custom-background.php

@@ -57 +57 @@
 
                 $page = add_theme_page(__('Custom Background'), __('Custom Background'), 'switch_themes', 'custom-background', array(&$this, 'admin_page'));
 
+                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'), 50);
                 if ( $this->admin_header_callback )
                         add_action("admin_head-$page", $this->admin_header_callback, 51);
@@ -81 +84 @@
         }
 
         /**
+         * 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');
+        }
+
+        /**
          * Execute custom background modification.
          *
          * @since unknown
@@ -119 +146 @@
                 }
                 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);
+                }
         }
 
         /**
+         * 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
+        }
+
+        /**
          * Display first step of custom background image page.
          *
          * @since unknown
@@ -143 +232 @@
                 call_user_func($this->admin_image_div_callback);
         } 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>
 <?php }
@@ -161 +250 @@
 <th scope="col"><?php _e( 'Position' ); ?></th>
 <th scope="col"><?php _e( 'Repeat' ); ?></th>
 <th scope="col"><?php _e( 'Attachment' ); ?></th>
+<th scope="col"><?php _e( 'Background Color' ); ?></th>
 </tr>
 
 <tbody>
@@ -201 +291 @@
 <?php _e('Fixed') ?>
 </label>
 </fieldset></td>
+
+<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 esc_attr(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>
 </tbody>
 </table>