WordPress.org

Make WordPress Core

Ticket #12186: custom-background.3.diff

File custom-background.3.diff, 4.0 KB (added by lancewillett, 12 years ago)

background color additions to custom-background.php

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

     
    5757
    5858                $page = add_theme_page(__('Custom Background'), __('Custom Background'), 'switch_themes', 'custom-background', array(&$this, 'admin_page'));
    5959
     60                add_action("admin_print_scripts-$page", array(&$this, 'js_includes'));
     61                add_action("admin_print_styles-$page", array(&$this, 'css_includes'));
     62                add_action("admin_head-$page", array(&$this, 'js'), 50);
    6063                add_action("admin_head-$page", array(&$this, 'take_action'), 50);
    6164                if ( $this->admin_header_callback )
    6265                        add_action("admin_head-$page", $this->admin_header_callback, 51);
     
    8184        }
    8285
    8386        /**
     87         * Setup the enqueue for the JavaScript files.
     88         *
     89         * @since unknown
     90         */
     91        function js_includes() {
     92                $step = $this->step();
     93
     94                if ( 1 == $step )
     95                        wp_enqueue_script('farbtastic');
     96        }
     97
     98        /**
     99         * Setup the enqueue for the CSS files
     100         *
     101         * @since unknown
     102         */
     103        function css_includes() {
     104                $step = $this->step();
     105
     106                if ( 1 == $step )
     107                        wp_enqueue_style('farbtastic');
     108        }
     109
     110        /**
    84111         * Execute custom background modification.
    85112         *
    86113         * @since unknown
     
    119146                }
    120147                if ( isset($_POST['remove-background']) )
    121148                        set_theme_mod('background_image', '');
     149                if ( isset( $_POST['background-color'] ) ) {
     150                        $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
     151                        if ( strlen($color) == 6 || strlen($color) == 3 )
     152                                set_theme_mod('background_color', $color);
     153                }
    122154        }
    123155
    124156        /**
     157         * Execute Javascript depending on step.
     158         *
     159         * @since unknown
     160         */
     161        function js() {
     162                $step = $this->step();
     163                if ( 1 == $step )
     164                        $this->js_1();
     165        }
     166
     167        /**
     168         * Display Javascript based on Step 1.
     169         *
     170         * @since unknown
     171         */
     172        function js_1() { ?>
     173<script type="text/javascript">
     174        var buttons = ['#pickcolor'],
     175                farbtastic;
     176
     177        function pickColor(color) {
     178                jQuery('#background-color').val(color);
     179                farbtastic.setColor(color);
     180        }
     181
     182        jQuery(document).ready(function() {
     183                jQuery('#pickcolor').click(function() {
     184                        jQuery('#colorPickerDiv').show();
     185                });
     186
     187                farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
     188                pickColor('#<?php background_color(); ?>');
     189        });
     190
     191        jQuery(document).mousedown(function(){
     192                hide_picker(); // Make the picker disappear if you click outside its div element
     193        });
     194
     195        function hide_picker(what) {
     196                var update = false;
     197                jQuery('#colorPickerDiv').each(function(){
     198                        var id = jQuery(this).attr('id');
     199                        if (id == what) {
     200                                return;
     201                        }
     202                        var display = jQuery(this).css('display');
     203                        if (display == 'block') {
     204                                jQuery(this).fadeOut(2);
     205                        }
     206                });
     207        }
     208
     209</script>
     210<?php
     211        }
     212
     213        /**
    125214         * Display first step of custom background image page.
    126215         *
    127216         * @since unknown
     
    143232                call_user_func($this->admin_image_div_callback);
    144233        } else {
    145234?>
    146 <div id="custom-background-image">
     235<div id="custom-background-image" style="background-color: #<?php background_color(); ?>;">
    147236<img class="custom-background-image" src="<?php background_image(); ?>" />
    148237</div>
    149238<?php }
     
    161250<th scope="col"><?php _e( 'Position' ); ?></th>
    162251<th scope="col"><?php _e( 'Repeat' ); ?></th>
    163252<th scope="col"><?php _e( 'Attachment' ); ?></th>
     253<th scope="col"><?php _e( 'Background Color' ); ?></th>
    164254</tr>
    165255
    166256<tbody>
     
    201291<?php _e('Fixed') ?>
    202292</label>
    203293</fieldset></td>
     294
     295<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
     296<input type="text" name="background-color" id="background-color" value="#<?php esc_attr(background_color()) ?>" />
     297<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
     298
     299<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
     300</fieldset></td>
    204301</tr>
    205302</tbody>
    206303</table>