WordPress.org

Make WordPress Core

Changeset 13574


Ignore:
Timestamp:
03/03/2010 05:10:43 PM (10 years ago)
Author:
ryan
Message:

Background color selection. Props lancewillett. see #12186

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/custom-background.php

    r13339 r13574  
    5858        $page = add_theme_page(__('Background'), __('Background'), 'switch_themes', 'custom-background', array(&$this, 'admin_page'));
    5959
    60         add_action("admin_head-$page", array(&$this, 'take_action'), 50);
     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);
     63        add_action("admin_head-$page", array(&$this, 'take_action'), 49);
    6164        if ( $this->admin_header_callback )
    6265            add_action("admin_head-$page", $this->admin_header_callback, 51);
     
    7982
    8083        return $step;
     84    }
     85
     86    /**
     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');
    81108    }
    82109
     
    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            else
     154                set_theme_mod('background_color', '');
     155        }
     156    }
     157
     158    /**
     159     * Execute Javascript depending on step.
     160     *
     161     * @since unknown
     162     */
     163    function js() {
     164        $step = $this->step();
     165        if ( 1 == $step )
     166            $this->js_1();
     167    }
     168
     169    /**
     170     * Display Javascript based on Step 1.
     171     *
     172     * @since unknown
     173     */
     174    function js_1() { ?>
     175<script type="text/javascript">
     176    var buttons = ['#pickcolor'],
     177        farbtastic;
     178
     179    function pickColor(color) {
     180        jQuery('#background-color').val(color);
     181        farbtastic.setColor(color);
     182    }
     183
     184    jQuery(document).ready(function() {
     185        jQuery('#pickcolor').click(function() {
     186            jQuery('#colorPickerDiv').show();
     187        });
     188
     189        farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
     190        pickColor('#<?php background_color(); ?>');
     191    });
     192
     193    jQuery(document).mousedown(function(){
     194        hide_picker(); // Make the picker disappear if you click outside its div element
     195    });
     196
     197    function hide_picker(what) {
     198        var update = false;
     199        jQuery('#colorPickerDiv').each(function(){
     200            var id = jQuery(this).attr('id');
     201            if (id == what) {
     202                return;
     203            }
     204            var display = jQuery(this).css('display');
     205            if (display == 'block') {
     206                jQuery(this).fadeOut(2);
     207            }
     208        });
     209    }
     210
     211</script>
     212<?php
    122213    }
    123214
     
    144235    } else {
    145236?>
    146 <div id="custom-background-image">
     237<div id="custom-background-image" style="background-color: #<?php background_color(); ?>;">
    147238<img class="custom-background-image" src="<?php background_image(); ?>" />
    148239</div>
     
    162253<th scope="col"><?php _e( 'Repeat' ); ?></th>
    163254<th scope="col"><?php _e( 'Attachment' ); ?></th>
     255<th scope="col"><?php _e( 'Color' ); ?></th>
    164256</tr>
    165257
     
    201293<?php _e('Fixed') ?>
    202294</label>
     295</fieldset></td>
     296
     297<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Color' ); ?></span></legend>
     298<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
     299<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
     300
     301<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    203302</fieldset></td>
    204303</tr>
  • trunk/wp-includes/theme.php

    r13469 r13574  
    13581358 */
    13591359function get_background_image() {
    1360     $default =  defined('BACKGROUND_IMAGE') ? BACKGROUND_IMAGE : '';
     1360    $default = defined('BACKGROUND_IMAGE') ? BACKGROUND_IMAGE : '';
    13611361
    13621362    return get_theme_mod('background_image', $default);
     
    13701370function background_image() {
    13711371    echo get_background_image();
     1372}
     1373
     1374/**
     1375 * Retrieve value for custom background color.
     1376 *
     1377 * @since 3.0.0
     1378 * @uses BACKGROUND_COLOR
     1379 *
     1380 * @return string
     1381 */
     1382function get_background_color() {
     1383    $default = defined('BACKGROUND_COLOR') ? BACKGROUND_COLOR : '';
     1384
     1385    return get_theme_mod('background_color', $default);
     1386}
     1387
     1388/**
     1389 * Display background color value.
     1390 *
     1391 * @since 3.0.0
     1392 */
     1393function background_color() {
     1394    echo get_background_color();
    13721395}
    13731396
     
    14381461<style type="text/css">
    14391462body {
    1440     background-image:url('<?php background_image(); ?>');
     1463    background-color: #<?php background_color(); ?>;
     1464    background-image: url('<?php background_image(); ?>');
    14411465    <?php echo $repeat; ?>
    14421466    <?php echo $position; ?>
Note: See TracChangeset for help on using the changeset viewer.