WordPress.org

Make WordPress Core

Ticket #29982: 29982.2.diff

File 29982.2.diff, 7.7 KB (added by cainm, 7 years ago)
  • wp-content/themes/twentyfifteen/inc/customizer.php

     
    2727                'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
    2828        ) );
    2929
    30         $wp_customize->add_control( new Twentyfifteen_Customize_Color_Scheme_Control( $wp_customize, 'color_scheme', array(
     30        $wp_customize->add_control( 'color_scheme', array(
    3131                'label'    => esc_html__( 'Color Scheme', 'twentyfifteen' ),
    3232                'section'  => 'colors',
     33                'type'     => 'select',
    3334                'choices'  => twentyfifteen_get_color_scheme_choices(),
    3435                'priority' => 1,
    35         ) ) );
     36        ) );
    3637
    3738        // Add custom sidebar text color setting and control.
    3839        $wp_customize->add_setting( 'sidebar_textcolor', array(
     
    5960add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
    6061
    6162/**
    62  * Custom control for Color Schemes
    63  *
    64  * @since Twenty Fifteen 1.0
    65  */
    66 function twentyfifteen_customize_color_scheme_control() {
    67         class Twentyfifteen_Customize_Color_Scheme_Control extends WP_Customize_Control {
    68                 public $type = 'colorScheme';
    69 
    70                 function enqueue() {
    71                         wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '', true  );
    72                         wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
    73                 }
    74 
    75                 public function render_content() {
    76                         if ( empty( $this->choices ) )
    77                                 return;
    78 
    79                         ?>
    80                         <label>
    81                                 <?php if ( ! empty( $this->label ) ) : ?>
    82                                         <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    83                                 <?php endif;
    84                                 if ( ! empty( $this->description ) ) : ?>
    85                                         <span class="description customize-control-description"><?php echo $this->description; ?></span>
    86                                 <?php endif; ?>
    87 
    88                                 <select <?php $this->link(); ?>>
    89                                         <?php
    90                                         foreach ( $this->choices as $value => $label )
    91                                                 echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
    92                                         ?>
    93                                 </select>
    94                         </label>
    95                         <?php
    96                 }
    97         }
    98 }
    99 add_action( 'customize_register', 'twentyfifteen_customize_color_scheme_control', 10 );
    100 
    101 /**
    10263 * Register color schemes for Twenty Fifteen.
    10364 * Can be filtered with twentyfifteen_color_schemes.
    10465 *
     
    650611add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    651612
    652613/**
     614 * Binds JS listener to make Customizer color_scheme control.
     615 * Passes color scheme data as colorScheme global
     616 *
     617 * @since Twenty Fifteen 1.0
     618 */
     619function twentyfifteen_customize_control_js() {
     620        wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '', true  );
     621        wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
     622}
     623add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
     624
     625/**
    653626 * Binds JS handlers to make Customizer preview reload changes asynchronously.
    654627 *
    655628 * @since Twenty Fifteen 1.0
  • wp-content/themes/twentyfifteen/js/color-scheme-control.js

     
    66 */
    77
    88( function( wp ) {
    9         wp.customize.controlConstructor.colorScheme = wp.customize.Control.extend( {
     9        wp.customize.controlConstructor.select = wp.customize.Control.extend( {
    1010                ready: function() {
    11                         var parentSection    = this.container.closest( '.control-section' ),
    12                                 headerTextColor  = parentSection.find( '#customize-control-header_textcolor .color-picker-hex' ),
    13                                 backgroundColor  = parentSection.find( '#customize-control-background_color .color-picker-hex' ),
    14                                 sidebarColor     = parentSection.find( '#customize-control-header_background_color .color-picker-hex' ),
    15                                 sidebarTextColor = parentSection.find( '#customize-control-sidebar_textcolor .color-picker-hex' );
     11                        if ( 'color_scheme' === this.id ) {
     12                                var parentSection    = this.container.closest( '.control-section' ),
     13                                        headerTextColor  = parentSection.find( '#customize-control-header_textcolor .color-picker-hex' ),
     14                                        backgroundColor  = parentSection.find( '#customize-control-background_color .color-picker-hex' ),
     15                                        sidebarColor     = parentSection.find( '#customize-control-header_background_color .color-picker-hex' ),
     16                                        sidebarTextColor = parentSection.find( '#customize-control-sidebar_textcolor .color-picker-hex' );
    1617
    17                         this.setting.bind( 'change', function( value ) {
    18                                 // if Header Text is not hidden, update value
    19                                 if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) {
    20                                         wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
    21                                         headerTextColor.val( colorScheme[value].colors[4] )
     18                                this.setting.bind( 'change', function( value ) {
     19                                        // if Header Text is not hidden, update value
     20                                        if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) {
     21                                                wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
     22                                                headerTextColor.val( colorScheme[value].colors[4] )
     23                                                        .data( 'data-default-color', colorScheme[value].colors[4] )
     24                                                        .wpColorPicker( 'color', colorScheme[value].colors[4] )
     25                                                        .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
     26                                        }
     27
     28                                        // update Background Color
     29                                        wp.customize( 'background_color' ).set( colorScheme[value].colors[0] );
     30                                        backgroundColor.val( colorScheme[value].colors[0] )
     31                                                .data( 'data-default-color', colorScheme[value].colors[0] )
     32                                                .wpColorPicker( 'color', colorScheme[value].colors[0] )
     33                                                .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
     34
     35                                        // update Header/Sidebar Background Color
     36                                        wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
     37                                        sidebarColor.val( colorScheme[value].colors[1] )
     38                                                .data( 'data-default-color', colorScheme[value].colors[1] )
     39                                                .wpColorPicker( 'color', colorScheme[value].colors[1] )
     40                                                .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
     41
     42                                        // update Sidebar Text Color
     43                                        wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
     44                                        sidebarTextColor.val( colorScheme[value].colors[4] )
    2245                                                .data( 'data-default-color', colorScheme[value].colors[4] )
    2346                                                .wpColorPicker( 'color', colorScheme[value].colors[4] )
    2447                                                .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
    25                                 }
    26 
    27                                 // update Background Color
    28                                 wp.customize( 'background_color' ).set( colorScheme[value].colors[0] );
    29                                 backgroundColor.val( colorScheme[value].colors[0] )
    30                                         .data( 'data-default-color', colorScheme[value].colors[0] )
    31                                         .wpColorPicker( 'color', colorScheme[value].colors[0] )
    32                                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
    33 
    34                                 // update Header/Sidebar Background Color
    35                                 wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
    36                                 sidebarColor.val( colorScheme[value].colors[1] )
    37                                         .data( 'data-default-color', colorScheme[value].colors[1] )
    38                                         .wpColorPicker( 'color', colorScheme[value].colors[1] )
    39                                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
    40 
    41                                 // update Sidebar Text Color
    42                                 wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
    43                                 sidebarTextColor.val( colorScheme[value].colors[4] )
    44                                         .data( 'data-default-color', colorScheme[value].colors[4] )
    45                                         .wpColorPicker( 'color', colorScheme[value].colors[4] )
    46                                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
    47                         } );
     48                                } );
     49                        }
    4850                }
    4951        } );
    5052} )( this.wp );
     53 No newline at end of file