WordPress.org

Make WordPress Core

Changeset 20598


Ignore:
Timestamp:
04/25/2012 09:03:29 PM (8 years ago)
Author:
koopersmith
Message:

Theme Customizer: Add statuses to the color and image controls. see #19910.

Move the color control from the switch statement to WP_Customize_Color_Control.
Markup improvements.

Location:
trunk/wp-includes
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-includes/class-wp-customize-control.php

    r20545 r20598  
    6565     * @since 3.4.0
    6666     */
    67     public function enqueue() {
    68         switch( $this->type ) {
    69             case 'color':
    70                 wp_enqueue_script( 'farbtastic' );
    71                 wp_enqueue_style( 'farbtastic' );
    72                 break;
    73         }
    74     }
     67    public function enqueue() {}
    7568
    7669
    … …  
    177170                <?php
    178171                break;
    179             case 'color':
    180                 ?>
    181                 <label>
    182                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    183                     <div class="dropdown color-picker-toggle">
    184                         <div class="dropdown-content color-picker-spot"></div>
    185                         <div class="dropdown-arrow"></div>
    186                     </div>
    187                     <div class="color-picker-control color-picker-hex">
    188                         <span>#</span>
    189                         <input type="text" <?php $this->link(); ?> />
    190                     </div>
    191                     <div class="color-picker-control farbtastic-placeholder"></div>
    192                 </label>
    193                 <?php
    194                 break;
    195172            case 'checkbox':
    196173                ?>
    197174                <label>
    198175                    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    199                     <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> class="customize-control-content" />
     176                    <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
    200177                </label>
    201178                <?php
    … …  
    226203                <label>
    227204                    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    228                     <select <?php $this->link(); ?> class="customize-control-content">
     205                    <select <?php $this->link(); ?>>
    229206                        <?php
    230207                        foreach ( $this->choices as $value => $label )
    … …  
    259236}
    260237
     238class WP_Customize_Color_Control extends WP_Customize_Control {
     239    public $type = 'color';
     240    public $statuses;
     241
     242    public function __construct( $manager, $id, $args = array() ) {
     243        $this->statuses = array( '' => __('Default') );
     244        parent::__construct( $manager, $id, $args );
     245    }
     246
     247    public function enqueue() {
     248        wp_enqueue_script( 'farbtastic' );
     249        wp_enqueue_style( 'farbtastic' );
     250    }
     251
     252    public function to_json() {
     253        parent::to_json();
     254        $this->json['statuses'] = $this->statuses;
     255    }
     256
     257    public function render_content() {
     258        ?>
     259        <label>
     260            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     261            <div class="customize-control-content">
     262                <div class="dropdown">
     263                    <div class="dropdown-content">
     264                        <div class="dropdown-status"></div>
     265                    </div>
     266                    <div class="dropdown-arrow"></div>
     267                </div>
     268                <div class="color-picker-hex">
     269                    <span>#</span>
     270                    <input type="text" <?php $this->link(); ?> />
     271                </div>
     272            </div>
     273            <div class="farbtastic-placeholder"></div>
     274        </label>
     275        <?php
     276    }
     277}
     278
    261279class WP_Customize_Upload_Control extends WP_Customize_Control {
    262280    public $type    = 'upload';
    … …  
    293311    public $type = 'image';
    294312    public $get_url;
     313    public $statuses;
    295314
    296315    protected $tabs = array();
    297316
    298317    public function __construct( $manager, $id, $args ) {
     318        $this->statuses = array( '' => __('No Image') );
     319
    299320        parent::__construct( $manager, $id, $args );
    300321
    301322        $this->add_tab( 'upload-new', __('Upload New'), array( $this, 'tab_upload_new' ) );
    302323        $this->add_tab( 'uploaded',   __('Uploaded'),   array( $this, 'tab_uploaded' ) );
     324    }
     325
     326    public function to_json() {
     327        parent::to_json();
     328        $this->json['statuses'] = $this->statuses;
    303329    }
    304330
    … …  
    312338            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    313339
    314 
    315             <div class="dropdown preview-thumbnail">
    316                 <div class="dropdown-content">
    317                     <?php if ( empty( $src ) ): ?>
    318                         <img style="display:none;" />
    319                     <?php else: ?>
    320                         <img src="<?php echo esc_url( $src ); ?>" />
    321                     <?php endif; ?>
     340            <div class="customize-control-content">
     341                <div class="dropdown preview-thumbnail">
     342                    <div class="dropdown-content">
     343                        <?php if ( empty( $src ) ): ?>
     344                            <img style="display:none;" />
     345                        <?php else: ?>
     346                            <img src="<?php echo esc_url( $src ); ?>" />
     347                        <?php endif; ?>
     348                        <div class="dropdown-status"></div>
     349                    </div>
     350                    <div class="dropdown-arrow"></div>
    322351                </div>
    323                 <div class="dropdown-arrow"></div>
    324352            </div>
    325353
    … …  
    375403    public function __construct( $manager ) {
    376404        parent::__construct( $manager, 'header_image', array(
    377             'label'   => __( 'Header Image' ),
    378             'section' => 'header',
    379             'context' => 'custom-header',
    380             'removed' => 'remove-header',
    381             'get_url' => 'get_header_image',
     405            'label'    => __( 'Header Image' ),
     406            'section'  => 'header',
     407            'context'  => 'custom-header',
     408            'removed'  => 'remove-header',
     409            'get_url'  => 'get_header_image',
     410            'statuses' => array(
     411                ''                      => __('Default'),
     412                'remove-header'         => __('No Image'),
     413                'random-default-image'  => __('Random Default Image'),
     414                'random-uploaded-image' => __('Random Uploaded Image'),
     415            )
    382416        ) );
    383417

  • trunk/wp-includes/class-wp-customize.php

    r20585 r20598  
    540540            // @todo: replace with a new accept() setting method
    541541            // 'sanitize_callback' => 'sanitize_hexcolor',
    542             'control'        => 'color',
    543542            'theme_supports' => array( 'custom-header', 'header-text' ),
    544543            'default'        => get_theme_support( 'custom-header', 'default-text-color' ),
    … …  
    552551        ) );
    553552
    554         $this->add_control( 'header_textcolor', array(
     553        $this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array(
    555554            'label'   => __( 'Text Color' ),
    556555            'section' => 'header',
    557             'type'    => 'color',
    558         ) );
     556        ) ) );
    559557
    560558        // Input type: checkbox
    … …  
    584582        ) );
    585583
    586         $this->add_control( 'background_color', array(
     584        $this->add_control( new WP_Customize_Color_Control( $this, 'background_color', array(
    587585            'label'   => __( 'Background Color' ),
    588586            'section' => 'background',
    589             'type'    => 'color',
    590         ) );
     587        ) ) );
    591588
    592589        $this->add_setting( 'background_image', array(
    … …  
    595592        ) );
    596593
    597         $this->add_control( new WP_Customize_Upload_Control( $this, 'background_image', array(
     594        $this->add_control( new WP_Customize_Image_Control( $this, 'background_image', array(
    598595            'label'          => __( 'Background Image' ),
    599596            'section'        => 'background',
    600             'type'           => 'upload',
    601597            'context'        => 'custom-background',
    602598        ) ) );

  • trunk/wp-includes/css/customize-controls.dev.css

    r20547 r20598  
    142142    line-height: 28px;
    143143}
     144.customize-control-content {
     145    float: right;
     146    width: 140px;
     147}
    144148
    145149.customize-control-text input,
    … …  
    218222    float: left;
    219223    min-width: 30px;
    220     height: 24px;
    221     line-height: 24px;
     224    height: 16px;
     225    line-height: 16px;
    222226    margin-right: 16px;
    223     padding: 0 5px;
     227    padding: 4px 5px;
    224228    background-color: #eee;
    225229    border: 1px solid #ccc;
    226230    -webkit-border-radius: 3px 0 0 3px;
    227231    border-radius: 3px 0 0 3px;
     232
     233    -webkit-user-select: none;
     234    -moz-user-select: none;
     235    user-select: none;
    228236}
    229237
    … …  
    270278}
    271279
     280.customize-control .dropdown-status {
     281    display: none;
     282    max-width: 112px;
     283    color: #999;
     284}
     285
    272286/*
    273287 * Color Picker
    274288 */
    275 .customize-control .color-picker-control {
     289.customize-control-color .color-picker-hex,
     290.customize-control-color .farbtastic-placeholder {
    276291    display: none;
    277292}
    278 .customize-control.open .color-picker-control {
    279     display: block;
    280 }
    281 
    282 .customize-control .dropdown .color-picker-spot {
     293.customize-control-color.open .color-picker-hex,
     294.customize-control-color.open .farbtastic-placeholder {
     295    display: block;
     296}
     297
     298.customize-control-color .dropdown {
     299    margin-right: 5px;
     300    margin-bottom: 5px;
     301}
     302
     303.customize-control-color .dropdown .dropdown-content {
    283304    background-color: #fff;
    284305    border: 1px solid rgba( 0, 0, 0, 0.15 );
    285306}
    286307
    287 .customize-section .dropdown:hover .color-picker-spot {
     308.customize-control-color .dropdown:hover .dropdown-content {
    288309    border-color: rgba( 0, 0, 0, 0.25 );
    289310}
    … …  
    292313    float: left;
    293314    width: 70px;
    294     margin-left: 5px;
    295315    font-family: monospace;
    296316    background-color: #fff;
    … …  
    323343}
    324344
    325 .customize-section .color-picker-control.farbtastic-placeholder {
     345.customize-control-color .farbtastic-placeholder {
    326346    width: 235px;
    327347    margin: 5px 0 10px 25px;
    … …  
    329349}
    330350
    331 .customize-section .color-picker-control .farbtastic {
     351.customize-control-color .farbtastic {
    332352    margin: 0 auto;
    333353}
    … …  
    340360.customize-control-image .actions {
    341361    display: none;
     362    float: left;
    342363}
    343364.customize-control-image.open .library,
    … …  
    353374}
    354375
     376.customize-section .customize-control-image .dropdown-status {
     377    padding: 4px 5px;
     378}
     379
    355380.customize-section .customize-control-image .preview-thumbnail img {
    356381    display: block;
    … …  
    398423.customize-section .customize-control-image .library-content {
    399424    display: none;
    400     width: 260px;
     425    width: 100%;
    401426    float: left;
    402427    padding: 10px 0;

  • trunk/wp-includes/js/customize-controls.dev.js

    r20585 r20598  
    9191                });
    9292            });
     93        },
     94
     95        ready: function() {},
     96
     97        dropdownInit: function() {
     98            var control  = this,
     99                statuses = this.container.find('.dropdown-status'),
     100                params   = this.params,
     101                update   = function( to ) {
     102                    if ( typeof to === 'string' && params.statuses && params.statuses[ to ] )
     103                        statuses.html( params.statuses[ to ] ).show();
     104                    else
     105                        statuses.hide();
     106                };
    93107
    94108            // Support the .dropdown class to open/close complex elements
    … …  
    97111                control.container.toggleClass('open');
    98112            });
    99         },
    100         ready: function() {}
     113
     114            this.setting.bind( update );
     115            update( this.setting() );
     116        }
    101117    });
    102118
    … …  
    106122                spot, text, update;
    107123
    108             spot   = this.container.find('.color-picker-spot');
     124            spot   = this.container.find('.dropdown-content');
    109125            update = function( color ) {
    110                 color = '#' + color;
     126                color = color ? '#' + color : '';
    111127                spot.css( 'background', color );
    112128                control.farbtastic.setColor( color );
    … …  
    119135            this.setting.bind( update );
    120136            update( this.setting() );
     137
     138            this.dropdownInit();
    121139        }
    122140    });
    … …  
    219237                    this.tabs.uploaded.both.addClass('hidden');
    220238            }
     239
     240            this.dropdownInit();
    221241        },
    222242        success: function( attachment ) {

  • trunk/wp-includes/js/customize-preview.dev.js

    r20476 r20598  
    5151        api( 'background_color', function( value ) {
    5252            value.bind( function( to ) {
    53                 body.css( 'background-color', '#' + to );
     53                body.css( 'background-color', to ? '#' + to : '' );
    5454            });
    5555        });
Note: See TracChangeset for help on using the changeset viewer.