WordPress.org
Get WordPress

Make WordPress Core

Changeset 20598


Ignore:
Timestamp:
04/25/2012 09:03:29 PM (14 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.