WordPress.org
Get WordPress

Make WordPress Core

Ticket #30409: 30409.5.1.diff

File 30409.5.1.diff, 21.9 KB (added by georgestephanis, 11 years ago)

  • src/wp-content/themes/twentyfifteen/inc/customizer.php

     
    2727                'transport'         => 'postMessage',
    2828        ) );
    2929
    30         $wp_customize->add_setting( 'color_scheme_css', array(
    31                 'default'   => '',
    32                 'transport' => 'postMessage',
    33         ) );
    34 
    3530        $wp_customize->add_control( 'color_scheme', array(
    3631                'label'    => esc_html__( 'Base Color Scheme', 'twentyfifteen' ),
    3732                'section'  => 'colors',
    … …  
    231226 */
    232227function twentyfifteen_color_scheme_css() {
    233228        $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
    234         $color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
    235229
    236230        // Don't do anything if the default color scheme is selected.
    237         if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
     231        if ( 'default' === $color_scheme_option ) {
    238232                return;
    239233        }
    240234
     235        $color_scheme = twentyfifteen_get_color_scheme();
     236
     237        $colors = array(
     238                'background_color'            => $color_scheme[0],
     239                'header_background_color'     => $color_scheme[1],
     240                'box_background_color'        => $color_scheme[2],
     241                'textcolor'                   => $color_scheme[3],
     242                'secondary_sidebar_textcolor' => $color_scheme[4],
     243                'meta_box_background_color'   => $color_scheme[5],
     244        );
     245
     246        $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
     247
    241248        wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
    242249}
    243250add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    … …  
    250257 * @since Twenty Fifteen 1.0
    251258 */
    252259function twentyfifteen_customize_control_js() {
    253         wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true  );
     260        wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '20141213', true  );
    254261        wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
    255262}
    256263add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
    … …  
    258265/**
    259266 * Binds JS handlers to make the Customizer preview reload changes asynchronously.
    260267 *
     268 * Passes color scheme data as colorScheme global.
     269 *
    261270 * @since Twenty Fifteen 1.0
    262271 */
    263272function twentyfifteen_customize_preview_js() {
    264         wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
     273        wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview', 'iris', 'underscore', 'wp-util' ), '20141213', true );
     274        wp_localize_script( 'twentyfifteen-customize-preview', 'colorScheme', twentyfifteen_get_color_schemes() );
    265275}
    266276add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    267277
    268278/**
    269  * Output an Underscore template for generating CSS for the color scheme.
     279 * Returns CSS for the color schemes.
    270280 *
    271  * The template generates the css dynamically for instant display in the Customizer
    272  * preview, and to be saved in a `theme_mod` for display on the front-end.
     281 * @since Twenty Fifteen 1.0
    273282 *
    274  * @since Twenty Fifteen 1.0
     283 * @param array $colors Color scheme colors.
     284 * @return string Color scheme CSS.
    275285 */
    276 function twentyfifteen_color_scheme_css_template() {
    277         ?>
    278         <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     286function twentyfifteen_get_color_scheme_css( $colors ) {
     287        $colors = wp_parse_args( $colors, array(
     288                'background_color'            => '',
     289                'header_background_color'     => '',
     290                'box_background_color'        => '',
     291                'textcolor'                   => '',
     292                'secondary_textcolor'         => '', // Will be calculated from textcolor if omitted
     293                'border_color'                => '', // Will be calculated from textcolor if omitted
     294                'border_focus_color'          => '', // Will be calculated from textcolor if omitted
     295                'sidebar_textcolor'           => '', // Will be calculated from secondary_sidebar_textcolor if omitted
     296                'sidebar_border_color'        => '', // Will be calculated from secondary_sidebar_textcolor if omitted
     297                'sidebar_border_focus_color'  => '', // Will be calculated from secondary_sidebar_textcolor if omitted
     298                'secondary_sidebar_textcolor' => '',
     299                'meta_box_background_color'   => '',
     300        ) );
     301
     302        // Calculate textcolor derivatives if any have been omitted
     303        if ( empty( $colors['secondary_textcolor'] ) || empty( $colors['border_color'] ) || empty( $colors['border_focus_color'] ) ) {
     304                $textcolor_rgb = twentyfifteen_hex2rgb( $colors['textcolor'] );
     305
     306                if ( empty( $colors['secondary_textcolor'] ) ) {
     307                        $colors['secondary_textcolor'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $textcolor_rgb );
     308                }
     309
     310                if ( empty( $colors['border_color'] ) ) {
     311                        $colors['border_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $textcolor_rgb );
     312                }
     313
     314                if ( empty( $colors['border_focus_color'] ) ) {
     315                        $colors['border_focus_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $textcolor_rgb );
     316                }
     317        }
     318
     319        // Calculate secondary_sidebar_textcolor derivatives if any have been omitted
     320        if ( empty( $colors['sidebar_textcolor'] ) || empty( $colors['sidebar_border_color'] ) || empty( $colors['sidebar_border_focus_color'] ) ) {
     321                $secondary_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $colors['secondary_sidebar_textcolor'] );
     322
     323                if ( empty( $colors['sidebar_textcolor'] ) ) {
     324                        $colors['sidebar_textcolor'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $secondary_sidebar_textcolor_rgb );
     325                }
     326
     327                if ( empty( $colors['sidebar_border_color'] ) ) {
     328                        $colors['sidebar_border_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $secondary_sidebar_textcolor_rgb );
     329                }
     330
     331                if ( empty( $colors['sidebar_border_focus_color'] ) ) {
     332                        $colors['sidebar_border_focus_color'] = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $secondary_sidebar_textcolor_rgb );
     333                }
     334        }
     335
     336        $css = <<<CSS
    279337        /* Color Scheme */
    280338
    281339        /* Background Color */
    282340        body {
    283                 background-color: {{ data.background_color }};
     341                background-color: {$colors['background_color']};
    284342        }
    285343
    286344        /* Sidebar Background Color */
    287345        body:before,
    288346        .site-header {
    289                 background-color: {{ data.header_background_color }};
     347                background-color: {$colors['header_background_color']};
    290348        }
    291349
    292350        /* Box Background Color */
    … …  
    298356        .page-header,
    299357        .page-content,
    300358        .comments-area {
    301                 background-color: {{ data.box_background_color }};
     359                background-color: {$colors['box_background_color']};
    302360        }
    303361
    304362        /* Box Background Color */
    … …  
    315373        .page-links a:hover,
    316374        .page-links a:focus,
    317375        .sticky-post {
    318                 color: {{ data.box_background_color }};
     376                color: {$colors['box_background_color']};
    319377        }
    320378
    321379        /* Main Text Color */
    … …  
    328386        .widget_calendar tbody a,
    329387        .page-links a,
    330388        .sticky-post {
    331                 background-color: {{ data.textcolor }};
     389                background-color: {$colors['textcolor']};
    332390        }
    333391
    334392        /* Main Text Color */
    … …  
    352410        .comment-list .reply a:focus,
    353411        .site-info a:hover,
    354412        .site-info a:focus {
    355                 color: {{ data.textcolor }};
     413                color: {$colors['textcolor']};
    356414        }
    357415
    358416        /* Main Text Color */
    … …  
    369427        .pingback .edit-link a:hover,
    370428        .comment-list .reply a:hover,
    371429        .site-info a:hover {
    372                 border-color: {{ data.textcolor }};
     430                border-color: {$colors['textcolor']};
    373431        }
    374432
    375433        /* Secondary Text Color */
    … …  
    389447        .widget_calendar tbody a:focus,
    390448        .page-links a:hover,
    391449        .page-links a:focus {
    392                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    393                 background-color: {{ data.secondary_textcolor }};
     450                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     451                background-color: {$colors['secondary_textcolor']};
    394452        }
    395453
    396454        /* Secondary Text Color */
    … …  
    429487        .wp-caption-text,
    430488        .gallery-caption,
    431489        .comment-list .reply a {
    432                 color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    433                 color: {{ data.secondary_textcolor }};
     490                color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     491                color: {$colors['secondary_textcolor']};
    434492        }
    435493
    436494        /* Secondary Text Color */
    … …  
    437495        blockquote,
    438496        .logged-in-as a:hover,
    439497        .comment-author a:hover {
    440                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    441                 border-color: {{ data.secondary_textcolor }};
     498                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     499                border-color: {$colors['secondary_textcolor']};
    442500        }
    443501
    444502        /* Border Color */
    … …  
    445503        hr,
    446504        .dropdown-toggle:hover,
    447505        .dropdown-toggle:focus {
    448                 background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    449                 background-color: {{ data.border_color }};
     506                background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     507                background-color: {$colors['border_color']};
    450508        }
    451509
    452510        /* Border Color */
    … …  
    481539        .comment-list .trackback,
    482540        .comment-list .reply a,
    483541        .no-comments {
    484                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    485                 border-color: {{ data.border_color }};
     542                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     543                border-color: {$colors['border_color']};
    486544        }
    487545
    488546        /* Border Focus Color */
    … …  
    489547        a:focus,
    490548        button:focus,
    491549        input:focus {
    492                 outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    493                 outline-color: {{ data.border_focus_color }};
     550                outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     551                outline-color: {$colors['border_focus_color']};
    494552        }
    495553
    496554        input:focus,
    497555        textarea:focus {
    498                 border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
    499                 border-color: {{ data.border_focus_color }};
     556                border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
     557                border-color: {$colors['border_focus_color']};
    500558        }
    501559
    502560        /* Sidebar Link Color */
    503561        .secondary-toggle:before {
    504                 color: {{ data.sidebar_textcolor }};
     562                color: {$colors['sidebar_textcolor']};
    505563        }
    506564
    507565        .site-title a,
    508566        .site-description {
    509                 color: {{ data.sidebar_textcolor }};
     567                color: {$colors['sidebar_textcolor']};
    510568        }
    511569
    512570        /* Sidebar Text Color */
    513571        .site-title a:hover,
    514572        .site-title a:focus {
    515                 color: {{ data.secondary_sidebar_textcolor }};
     573                color: {$colors['secondary_sidebar_textcolor']};
    516574        }
    517575
    518576        /* Sidebar Border Color */
    519577        .secondary-toggle {
    520                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    521                 border-color: {{ data.sidebar_border_color }};
     578                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     579                border-color: {$colors['sidebar_border_color']};
    522580        }
    523581
    524582        /* Sidebar Border Focus Color */
    525583        .secondary-toggle:hover,
    526584        .secondary-toggle:focus {
    527                 border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    528                 border-color: {{ data.sidebar_border_focus_color }};
     585                border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     586                border-color: {$colors['sidebar_border_focus_color']};
    529587        }
    530588
    531589        .site-title a {
    532                 outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
    533                 outline-color: {{ data.sidebar_border_focus_color }};
     590                outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
     591                outline-color: {$colors['sidebar_border_focus_color']};
    534592        }
    535593
    536594        /* Meta Background Color */
    537595        .entry-footer {
    538                 background-color: {{ data.meta_box_background_color }};
     596                background-color: {$colors['meta_box_background_color']};
    539597        }
    540598
    541599        @media screen and (min-width: 38.75em) {
    542600                /* Main Text Color */
    543601                .page-header {
    544                         border-color: {{ data.textcolor }};
     602                        border-color: {$colors['textcolor']};
    545603                }
    546604        }
    547605
    … …  
    560618                .widget_calendar tbody a,
    561619                .widget_calendar tbody a:hover,
    562620                .widget_calendar tbody a:focus {
    563                         color: {{ data.header_background_color }};
     621                        color: {$colors['header_background_color']};
    564622                }
    565623
    566624                /* Sidebar Link Color */
    … …  
    569627                .widget-title,
    570628                .widget blockquote cite,
    571629                .widget blockquote small {
    572                         color: {{ data.sidebar_textcolor }};
     630                        color: {$colors['sidebar_textcolor']};
    573631                }
    574632
    575633                .widget button,
    … …  
    577635                .widget input[type="reset"],
    578636                .widget input[type="submit"],
    579637                .widget_calendar tbody a {
    580                         background-color: {{ data.sidebar_textcolor }};
     638                        background-color: {$colors['sidebar_textcolor']};
    581639                }
    582640
    583641                .textwidget a {
    584                         border-color: {{ data.sidebar_textcolor }};
     642                        border-color: {$colors['sidebar_textcolor']};
    585643                }
    586644
    587645                /* Sidebar Text Color */
    … …  
    592650                .widget blockquote,
    593651                .widget .wp-caption-text,
    594652                .widget .gallery-caption {
    595                         color: {{ data.secondary_sidebar_textcolor }};
     653                        color: {$colors['secondary_sidebar_textcolor']};
    596654                }
    597655
    598656                .widget button:hover,
    … …  
    605663                .widget input[type="submit"]:focus,
    606664                .widget_calendar tbody a:hover,
    607665                .widget_calendar tbody a:focus {
    608                         background-color: {{ data.secondary_sidebar_textcolor }};
     666                        background-color: {$colors['secondary_sidebar_textcolor']};
    609667                }
    610668
    611669                .widget blockquote {
    612                         border-color: {{ data.secondary_sidebar_textcolor }};
     670                        border-color: {$colors['secondary_sidebar_textcolor']};
    613671                }
    614672
    615673                /* Sidebar Border Color */
    … …  
    626684                .widget_nav_menu .sub-menu,
    627685                .widget_pages .children,
    628686                .widget abbr[title] {
    629                         border-color: {{ data.sidebar_border_color }};
     687                        border-color: {$colors['sidebar_border_color']};
    630688                }
    631689
    632690                .dropdown-toggle:hover,
    633691                .dropdown-toggle:focus,
    634692                .widget hr {
    635                         background-color: {{ data.sidebar_border_color }};
     693                        background-color: {$colors['sidebar_border_color']};
    636694                }
    637695
    638696                .widget input:focus,
    639697                .widget textarea:focus {
    640                         border-color: {{ data.sidebar_border_focus_color }};
     698                        border-color: {$colors['sidebar_border_focus_color']};
    641699                }
    642700
    643701                .sidebar a:focus,
    644702                .dropdown-toggle:focus {
    645                         outline-color: {{ data.sidebar_border_focus_color }};
     703                        outline-color: {$colors['sidebar_border_focus_color']};
    646704                }
    647705        }
     706CSS;
     707
     708        return $css;
     709}
     710
     711/**
     712 * Output an Underscore template for generating CSS for the color scheme.
     713 *
     714 * The template generates the css dynamically for instant display in the Customizer
     715 * preview.
     716 *
     717 * @since Twenty Fifteen 1.0
     718 */
     719function twentyfifteen_color_scheme_css_template() {
     720        if ( ! is_customize_preview() ) {
     721                return;
     722        }
     723
     724        $colors = array(
     725                'background_color'            => '{{ data.background_color }}',
     726                'header_background_color'     => '{{ data.header_background_color }}',
     727                'box_background_color'        => '{{ data.box_background_color }}',
     728                'textcolor'                   => '{{ data.textcolor }}',
     729                'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
     730                'border_color'                => '{{ data.border_color }}',
     731                'border_focus_color'          => '{{ data.border_focus_color }}',
     732                'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
     733                'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
     734                'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
     735                'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
     736                'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
     737        );
     738        ?>
     739        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     740                <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
    648741        </script>
    649742        <?php
    650743}
    651 add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
     744add_action( 'wp_footer', 'twentyfifteen_color_scheme_css_template' );

  • src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

     
    1 /* global colorScheme, Color */
     1/* global colorScheme */
    22/**
    33 * Add a listener to the Color Scheme control to update other color controls to new values/defaults.
    44 * Also trigger an update of the Color Scheme CSS when a color is changed.
    … …  
    55 */
    66
    77( function( api ) {
    8         var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
    9                 colorSchemeKeys = [
    10                         'background_color',
    11                         'header_background_color',
    12                         'box_background_color',
    13                         'textcolor',
    14                         'sidebar_textcolor',
    15                         'meta_box_background_color'
    16                 ],
    17                 colorSettings = [
    18                         'background_color',
    19                         'header_background_color',
    20                         'sidebar_textcolor'
    21                 ];
    22 
    238        api.controlConstructor.select = api.Control.extend( {
    249                ready: function() {
    2510                        if ( 'color_scheme' === this.id ) {
    … …  
    4530                        }
    4631                }
    4732        } );
    48 
    49         // Generate the CSS for the current Color Scheme.
    50         function getCSS() {
    51                 var scheme = api( 'color_scheme' )(),
    52                         colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
    53 
    54                 // Merge in color scheme overrides.
    55                 _.each( colorSettings, function( setting ) {
    56                         colors[ setting ] = api( setting )();
    57                 });
    58 
    59                 // Add additional colors.
    60                 colors.secondary_textcolor = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
    61                 colors.border_color = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
    62                 colors.border_focus_color = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
    63                 colors.secondary_sidebar_textcolor = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
    64                 colors.sidebar_border_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
    65                 colors.sidebar_border_focus_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
    66 
    67                 return cssTemplate( colors );
    68         }
    69 
    70         // Update the CSS whenever a color setting is changed.
    71         _.each( colorSettings, function( setting ) {
    72                 api( setting, function( setting ) {
    73                         setting.bind( _.throttle( function() {
    74                                 api( 'color_scheme_css' ).set( getCSS() );
    75                         }, 250 ) );
    76                 } );
    77         } );
    7833} )( wp.customize );

  • src/wp-content/themes/twentyfifteen/js/customize-preview.js

     
     1/* global colorScheme, Color */
    12/**
    23 * Live-update changed settings in real time in the Customizer preview.
    34 */
    45
    5 ( function( $ ) {
    6         var $style = $( '#twentyfifteen-color-scheme-css' );
     6(function( wp, $ ){
    77
     8        if ( ! wp || ! wp.customize ) { return; }
     9
     10        var api = wp.customize,
     11                $style = $( '#twentyfifteen-color-scheme-css' ),
     12                cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
     13                colorSchemeKeys = [
     14                        'background_color',
     15                        'header_background_color',
     16                        'box_background_color',
     17                        'textcolor',
     18                        'sidebar_textcolor',
     19                        'meta_box_background_color'
     20                ],
     21                colorSettings = [
     22                        'background_color',
     23                        'header_background_color',
     24                        'sidebar_textcolor'
     25                ];
     26
    827        if ( ! $style.length ) {
    9                 $style = $( 'head' ).append( '<style type="text/css" id="twentyfifteen-color-scheme-css" />' )
    10                                     .find( '#twentyfifteen-color-scheme-css' );
     28                $style = $( 'head' )
     29                        .append( '<style type="text/css" id="twentyfifteen-color-scheme-css" />' )
     30                        .find( '#twentyfifteen-color-scheme-css' );
    1131        }
    1232
    1333        // Site title.
    14         wp.customize( 'blogname', function( value ) {
     34        api( 'blogname', function( value ) {
    1535                value.bind( function( to ) {
    1636                        $( '.site-title a' ).text( to );
    1737                } );
    … …  
    1838        } );
    1939
    2040        // Site tagline.
    21         wp.customize( 'blogdescription', function( value ) {
     41        api( 'blogdescription', function( value ) {
    2242                value.bind( function( to ) {
    2343                        $( '.site-description' ).text( to );
    2444                } );
    … …  
    2545        } );
    2646
    2747        // Color Scheme CSS.
    28         wp.customize( 'color_scheme_css', function( value ) {
    29                 value.bind( function( to ) {
    30                         $style.html( to );
    31                 } );
     48
     49        // Generate the CSS for the current Color Scheme.
     50        function updateCSS() {
     51                var scheme = api( 'color_scheme' )(), css,
     52                        colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
     53
     54                // Merge in color scheme overrides.
     55                _.each( colorSettings, function( setting ) {
     56                        colors[ setting ] = api( setting )();
     57                });
     58
     59                // Add additional colors.
     60                colors.secondary_textcolor = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
     61                colors.border_color = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
     62                colors.border_focus_color = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
     63                colors.secondary_sidebar_textcolor = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
     64                colors.sidebar_border_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
     65                colors.sidebar_border_focus_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
     66
     67                css = cssTemplate( colors );
     68                $style.html( css );
     69        }
     70
     71        // Update the CSS whenever a color setting is changed.
     72        _.each( colorSettings, function( setting ) {
     73                api( setting, function( value ) {
     74                        value.bind( updateCSS );
     75                });
    3276        } );
    33 
    34 } )( jQuery );
     77})( window.wp, jQuery );

  • src/wp-includes/script-loader.php

     
    418418        $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
    419419        $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models', 'media-audiovideo', 'wp-playlist' ), false, 1 );
    420420
     421        $scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
     422
    421423        if ( is_admin() ) {
    422424                $scripts->add( 'admin-tags', "/wp-admin/js/tags$suffix.js", array('jquery', 'wp-ajax-response'), false, 1 );
    423425                did_action( 'init' ) && $scripts->localize( 'admin-tags', 'tagsl10n', array(
    … …  
    503505
    504506                $scripts->add( 'farbtastic', '/wp-admin/js/farbtastic.js', array('jquery'), '1.2' );
    505507
    506                 $scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
    507508                $scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
    508509                did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
    509510                        'clear' => __( 'Clear' ),