WordPress.org

Make WordPress Core

Changeset 30274


Ignore:
Timestamp:
11/07/2014 08:54:48 PM (7 years ago)
Author:
iandstewart
Message:

Twenty Fifteen: add instant updating of color schemes to the customizer with postMessage.

Props celloexpressions, bradyvercher, westonruter, fixes #29988.

Location:
trunk/src/wp-content/themes/twentyfifteen
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyfifteen/css/admin-custom-header.css

    r30230 r30274  
    3636
    3737/* Hide the header text color option */
    38 .appearance_page_custom-header tr.displaying-header-text {
     38.appearance_page_custom-header tr.displaying-header-text,
     39.appearance_page_custom-header tr.displaying-header-text td,
     40.appearance_page_custom-header tr.displaying-header-text th {
    3941    display: none;
    4042}
  • trunk/src/wp-content/themes/twentyfifteen/inc/customizer.php

    r30272 r30274  
    2020    $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    2121    $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    22     $wp_customize->get_setting( 'background_color' )->transport = 'refresh';
    2322
    2423    // Add color scheme setting and control.
     
    2625        'default'           => 'default',
    2726        'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
     27        'transport'         => 'postMessage',
     28    ) );
     29
     30    $wp_customize->add_setting( 'color_scheme_css', array(
     31        'default'           => '',
     32        'sanitize_callback' => 'esc_html',
     33        'transport'         => 'postMessage',
    2834    ) );
    2935
     
    4046        'default'           => $color_scheme[4],
    4147        'sanitize_callback' => 'sanitize_hex_color',
     48        'transport'         => 'postMessage',
    4249    ) );
    4350
     
    5562        'default'           => $color_scheme[1],
    5663        'sanitize_callback' => 'sanitize_hex_color',
     64        'transport'         => 'postMessage',
    5765    ) );
    5866
     
    223231function twentyfifteen_color_scheme_css() {
    224232    $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
     233    $color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
    225234
    226235    // Don't do anything if the default color scheme is selected.
    227     if ( 'default' === $color_scheme_option ) {
     236    if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
    228237        return;
    229238    }
    230239
    231     // If we get this far, we have custom styles. Let's do this.
    232     $color_scheme = twentyfifteen_get_color_scheme();
    233 
    234     // Convert main and sidebar text hex color to rgba.
    235     $color_main_text_rgb        = twentyfifteen_hex2rgb( $color_scheme[3] );
    236     $color_sidebar_link_rgb     = twentyfifteen_hex2rgb( $color_scheme[4] );
    237 
    238     $color_background           = $color_scheme[0];
    239     $color_sidebar_background   = $color_scheme[1];
    240     $color_box_background       = $color_scheme[2];
    241     $color_main_text            = $color_scheme[3];
    242     $color_secondary_text       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb );
    243     $color_border               = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb );
    244     $color_border_focus         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb );
    245     $color_sidebar_link         = $color_scheme[4];
    246     $color_sidebar_text         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb );
    247     $color_sidebar_border       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb );
    248     $color_sidebar_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb );
    249     $color_meta_box             = $color_scheme[5];
    250 
    251     $css = '
    252         /* Color Scheme */
    253 
    254         /* Background Color */
    255         body {
    256             background-color: %1$s;
     240    wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
     241}
     242add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
     243
     244/**
     245 * Binds JS listener to make Customizer color_scheme control.
     246 * Passes color scheme data as colorScheme global.
     247 *
     248 * @since Twenty Fifteen 1.0
     249 */
     250function twentyfifteen_customize_control_js() {
     251    wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true  );
     252    wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
     253}
     254add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
     255
     256/**
     257 * Binds JS handlers to make Customizer preview reload changes asynchronously.
     258 *
     259 * @since Twenty Fifteen 1.0
     260 */
     261function twentyfifteen_customize_preview_js() {
     262    wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
     263}
     264add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
     265
     266/**
     267 * Output an Underscore template for generating CSS for the color scheme.
     268 *
     269 * @since Twenty Fifteen 1.0
     270 */
     271function twentyfifteen_color_scheme_css_template() {
     272    ?>
     273    <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     274    /* Color Scheme */
     275
     276    /* Background Color */
     277    body {
     278        background-color: {{ data.background_color }};
     279    }
     280
     281    /* Sidebar Background Color */
     282    body:before,
     283    .site-header {
     284        background-color: {{ data.header_background_color }};
     285    }
     286
     287    /* Box Background Color */
     288    .post-navigation,
     289    .pagination,
     290    .secondary,
     291    .site-footer,
     292    .hentry,
     293    .page-header,
     294    .page-content,
     295    .comments-area {
     296        background-color: {{ data.box_background_color }};
     297    }
     298
     299    /* Box Background Color */
     300    button,
     301    input[type="button"],
     302    input[type="reset"],
     303    input[type="submit"],
     304    .pagination .prev,
     305    .pagination .next,
     306    .pagination .prev:before,
     307    .pagination .next:before,
     308    .widget_calendar tbody a,
     309    .widget_calendar tbody a:hover,
     310    .widget_calendar tbody a:focus,
     311    .entry-content .page-links a,
     312    .entry-content .page-links a:hover,
     313    .entry-content .page-links a:focus,
     314    .sticky-post {
     315        color: {{ data.box_background_color }};
     316    }
     317
     318    /* Main Text Color */
     319    button,
     320    input[type="button"],
     321    input[type="reset"],
     322    input[type="submit"],
     323    .pagination .prev,
     324    .pagination .next,
     325    .widget_calendar tbody a,
     326    .page-links a,
     327    .sticky-post {
     328        background-color: {{ data.textcolor }};
     329    }
     330
     331    /* Main Text Color */
     332    body,
     333    blockquote cite,
     334    blockquote small,
     335    a,
     336    .dropdown-toggle:after,
     337    .image-navigation a:hover,
     338    .image-navigation a:focus,
     339    .comment-navigation a:hover,
     340    .comment-navigation a:focus,
     341    .widget-title,
     342    .entry-footer a:hover,
     343    .entry-footer a:focus,
     344    .comment-metadata a:hover,
     345    .comment-metadata a:focus,
     346    .pingback .edit-link a:hover,
     347    .pingback .edit-link a:focus,
     348    .comment-list .reply a:hover,
     349    .comment-list .reply a:focus,
     350    .site-info a:hover,
     351    .site-info a:focus {
     352        color: {{ data.textcolor }};
     353    }
     354
     355    /* Main Text Color */
     356    .entry-content a,
     357    .entry-summary a,
     358    .page-content a,
     359    .comment-content a,
     360    .pingback .comment-body > a,
     361    .author-description a,
     362    .taxonomy-description a,
     363    .textwidget a,
     364    .entry-footer a:hover,
     365    .comment-metadata a:hover,
     366    .pingback .edit-link a:hover,
     367    .comment-list .reply a:hover,
     368    .site-info a:hover {
     369        border-color: {{ data.textcolor }};
     370    }
     371
     372    /* Secondary Text Color */
     373    button:hover,
     374    button:focus,
     375    input[type="button"]:hover,
     376    input[type="button"]:focus,
     377    input[type="reset"]:hover,
     378    input[type="reset"]:focus,
     379    input[type="submit"]:hover,
     380    input[type="submit"]:focus,
     381    .pagination .prev:hover,
     382    .pagination .prev:focus,
     383    .pagination .next:hover,
     384    .pagination .next:focus,
     385    .widget_calendar tbody a:hover,
     386    .widget_calendar tbody a:focus,
     387    .page-links a:hover,
     388    .page-links a:focus {
     389        background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     390        background-color: {{ data.secondary_textcolor }};
     391    }
     392
     393    /* Secondary Text Color */
     394    blockquote,
     395    a:hover,
     396    a:focus,
     397    .main-navigation .menu-item-description,
     398    .post-navigation .meta-nav,
     399    .post-navigation a:hover .post-title,
     400    .post-navigation a:focus .post-title,
     401    .image-navigation,
     402    .image-navigation a,
     403    .comment-navigation,
     404    .comment-navigation a,
     405    .widget,
     406    .author-heading,
     407    .entry-footer,
     408    .entry-footer a,
     409    .taxonomy-description,
     410    .page-links > .page-links-title,
     411    .entry-caption,
     412    .comment-author,
     413    .comment-metadata,
     414    .comment-metadata a,
     415    .pingback .edit-link,
     416    .pingback .edit-link a,
     417    .post-password-form label,
     418    .comment-form label,
     419    .comment-notes,
     420    .comment-awaiting-moderation,
     421    .logged-in-as,
     422    .form-allowed-tags,
     423    .no-comments,
     424    .site-info,
     425    .site-info a,
     426    .wp-caption-text,
     427    .gallery-caption,
     428    .comment-list .reply a {
     429        color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     430        color: {{ data.secondary_textcolor }};
     431    }
     432
     433    /* Secondary Text Color */
     434    blockquote,
     435    .logged-in-as a:hover,
     436    .comment-author a:hover {
     437        border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     438        border-color: {{ data.secondary_textcolor }};
     439    }
     440
     441    /* Border Color */
     442    hr,
     443    .dropdown-toggle:hover,
     444    .dropdown-toggle:focus {
     445        background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     446        background-color: {{ data.border_color }};
     447    }
     448
     449    /* Border Color */
     450    pre,
     451    abbr[title],
     452    table,
     453    th,
     454    td,
     455    input,
     456    textarea,
     457    .main-navigation ul,
     458    .main-navigation li,
     459    .post-navigation,
     460    .pagination,
     461    .comment-navigation,
     462    .widget li,
     463    .widget_categories .children,
     464    .widget_nav_menu .sub-menu,
     465    .widget_pages .children,
     466    .site-header,
     467    .site-footer,
     468    .hentry .hentry,
     469    .author-info,
     470    .entry-content .page-links a,
     471    .page-links > span,
     472    .page-header,
     473    .comments-area,
     474    .comment-list .comment-respond,
     475    .comment-list article,
     476    .comment-list .pingback,
     477    .comment-list .trackback,
     478    .comment-list .reply a,
     479    .no-comments {
     480        border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     481        border-color: {{ data.border_color }};
     482    }
     483
     484    .post-navigation .nav-previous:not(.has-post-thumbnail) .nav-next:not(.has-post-thumbnail) {
     485        border-color: {{ data.border_color }};
     486    }
     487
     488    /* Border Focus Color */
     489    a:focus,
     490    button:focus,
     491    input:focus {
     492        outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     493        outline-color: {{ data.border_focus_color }};
     494    }
     495
     496    input:focus,
     497    textarea:focus {
     498        border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     499        border-color: {{ data.border_focus_color }};
     500    }
     501
     502    /* Sidebar Link Color */
     503    .secondary-toggle:before {
     504        color: {{ data.sidebar_textcolor }};
     505    }
     506
     507    .site-title a,
     508    .site-description {
     509        color: {{ data.sidebar_textcolor }};
     510    }
     511
     512    /* Sidebar Text Color */
     513    .site-title a:hover,
     514    .site-title a:focus {
     515        color: {{ data.sidebar_textcolor2 }};
     516    }
     517
     518    /* Sidebar Border Color */
     519    .secondary-toggle {
     520        border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     521        border-color: {{ data.sidebar_border_color }};
     522    }
     523
     524    /* Sidebar Border Focus Color */
     525    .secondary-toggle:hover,
     526    .secondary-toggle:focus {
     527        border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     528        border-color: {{ data.sidebar_border_focus_color }};
     529    }
     530
     531    .site-title a {
     532        outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     533        outline-color: {{ data.sidebar_border_focus_color }};
     534    }
     535
     536    /* Meta Background Color */
     537    .entry-footer {
     538        background-color: {{ data.meta_box_background_color }};
     539    }
     540
     541    @media screen and (min-width: 38.75em) {
     542        /* Main Text Color */
     543        .page-header {
     544            border-color: {{ data.textcolor }};
     545        }
     546    }
     547
     548    @media screen and (min-width: 59.6875em) {
     549        /* Make sure its transparent on desktop */
     550        .site-header,
     551        .secondary {
     552            background-color: transparent;
    257553        }
    258554
    259555        /* Sidebar Background Color */
    260         body:before,
    261         .site-header {
    262             background-color: %2$s;
    263         }
    264 
    265         /* Box Background Color */
    266         .post-navigation,
    267         .pagination,
    268         .secondary,
    269         .site-footer,
    270         .hentry,
    271         .page-header,
    272         .page-content,
    273         .comments-area {
    274             background-color: %3$s;
    275         }
    276 
    277         /* Box Background Color */
    278         button,
    279         input[type="button"],
    280         input[type="reset"],
    281         input[type="submit"],
    282         .pagination .prev,
    283         .pagination .next,
    284         .pagination .prev:before,
    285         .pagination .next:before,
     556        .widget button,
     557        .widget input[type="button"],
     558        .widget input[type="reset"],
     559        .widget input[type="submit"],
    286560        .widget_calendar tbody a,
    287561        .widget_calendar tbody a:hover,
    288         .widget_calendar tbody a:focus,
    289         .entry-content .page-links a,
    290         .entry-content .page-links a:hover,
    291         .entry-content .page-links a:focus,
    292         .sticky-post {
    293             color: %3$s;
    294         }
    295 
    296         /* Main Text Color */
    297         button,
    298         input[type="button"],
    299         input[type="reset"],
    300         input[type="submit"],
    301         .pagination .prev,
    302         .pagination .next,
    303         .widget_calendar tbody a,
    304         .page-links a,
    305         .sticky-post {
    306             background-color: %4$s;
    307         }
    308 
    309         /* Main Text Color */
    310         body,
    311         blockquote cite,
    312         blockquote small,
    313         a,
     562        .widget_calendar tbody a:focus {
     563            color: {{ data.header_background_color }};
     564        }
     565
     566        /* Sidebar Link Color */
     567        .secondary a,
    314568        .dropdown-toggle:after,
    315         .image-navigation a:hover,
    316         .image-navigation a:focus,
    317         .comment-navigation a:hover,
    318         .comment-navigation a:focus,
    319569        .widget-title,
    320         .entry-footer a:hover,
    321         .entry-footer a:focus,
    322         .comment-metadata a:hover,
    323         .comment-metadata a:focus,
    324         .pingback .edit-link a:hover,
    325         .pingback .edit-link a:focus,
    326         .comment-list .reply a:hover,
    327         .comment-list .reply a:focus,
    328         .site-info a:hover,
    329         .site-info a:focus {
    330             color: %4$s;
    331         }
    332 
    333         /* Main Text Color */
    334         .entry-content a,
    335         .entry-summary a,
    336         .page-content a,
    337         .comment-content a,
    338         .pingback .comment-body > a,
    339         .author-description a,
    340         .taxonomy-description a,
    341         .textwidget a,
    342         .entry-footer a:hover,
    343         .comment-metadata a:hover,
    344         .pingback .edit-link a:hover,
    345         .comment-list .reply a:hover,
    346         .site-info a:hover {
    347             border-color: %4$s;
    348         }
    349 
    350         /* Secondary Text Color */
    351         button:hover,
    352         button:focus,
    353         input[type="button"]:hover,
    354         input[type="button"]:focus,
    355         input[type="reset"]:hover,
    356         input[type="reset"]:focus,
    357         input[type="submit"]:hover,
    358         input[type="submit"]:focus,
    359         .pagination .prev:hover,
    360         .pagination .prev:focus,
    361         .pagination .next:hover,
    362         .pagination .next:focus,
     570        .widget blockquote cite,
     571        .widget blockquote small {
     572            color: {{ data.sidebar_textcolor }};
     573        }
     574
     575        .widget button,
     576        .widget input[type="button"],
     577        .widget input[type="reset"],
     578        .widget input[type="submit"],
     579        .widget_calendar tbody a {
     580            background-color: {{ data.sidebar_textcolor }};
     581        }
     582
     583        .textwidget a {
     584            border-color: {{ data.sidebar_textcolor }};
     585        }
     586
     587        /* Sidebar Text Color */
     588        .secondary a:hover,
     589        .secondary a:focus,
     590        .main-navigation .menu-item-description,
     591        .widget,
     592        .widget blockquote,
     593        .widget .wp-caption-text,
     594        .widget .gallery-caption {
     595            color: {{ data.sidebar_textcolor2 }};
     596        }
     597
     598        .widget button:hover,
     599        .widget button:focus,
     600        .widget input[type="button"]:hover,
     601        .widget input[type="button"]:focus,
     602        .widget input[type="reset"]:hover,
     603        .widget input[type="reset"]:focus,
     604        .widget input[type="submit"]:hover,
     605        .widget input[type="submit"]:focus,
    363606        .widget_calendar tbody a:hover,
    364         .widget_calendar tbody a:focus,
    365         .page-links a:hover,
    366         .page-links a:focus {
    367             background-color: %4$s; /* Fallback for IE7 and IE8 */
    368             background-color: %5$s;
    369         }
    370 
    371         /* Secondary Text Color */
    372         blockquote,
    373         a:hover,
    374         a:focus,
    375         .main-navigation .menu-item-description,
    376         .post-navigation .meta-nav,
    377         .post-navigation a:hover .post-title,
    378         .post-navigation a:focus .post-title,
    379         .image-navigation,
    380         .image-navigation a,
    381         .comment-navigation,
    382         .comment-navigation a,
    383         .widget,
    384         .author-heading,
    385         .entry-footer,
    386         .entry-footer a,
    387         .taxonomy-description,
    388         .page-links > .page-links-title,
    389         .entry-caption,
    390         .comment-author,
    391         .comment-metadata,
    392         .comment-metadata a,
    393         .pingback .edit-link,
    394         .pingback .edit-link a,
    395         .post-password-form label,
    396         .comment-form label,
    397         .comment-notes,
    398         .comment-awaiting-moderation,
    399         .logged-in-as,
    400         .form-allowed-tags,
    401         .no-comments,
    402         .site-info,
    403         .site-info a,
    404         .wp-caption-text,
    405         .gallery-caption,
    406         .comment-list .reply a {
    407             color: %4$s; /* Fallback for IE7 and IE8 */
    408             color: %5$s;
    409         }
    410 
    411         /* Secondary Text Color */
    412         blockquote,
    413         .logged-in-as a:hover,
    414         .comment-author a:hover {
    415             border-color: %4$s; /* Fallback for IE7 and IE8 */
    416             border-color: %5$s;
    417         }
    418 
    419         /* Border Color */
    420         hr,
    421         .dropdown-toggle:hover,
    422         .dropdown-toggle:focus {
    423             background-color: %4$s; /* Fallback for IE7 and IE8 */
    424             background-color: %6$s;
    425         }
    426 
    427         /* Border Color */
    428         pre,
    429         abbr[title],
    430         table,
    431         th,
    432         td,
    433         input,
    434         textarea,
     607        .widget_calendar tbody a:focus {
     608            background-color: {{ data.sidebar_textcolor2 }};
     609        }
     610
     611        .widget blockquote {
     612            border-color: {{ data.sidebar_textcolor2 }};
     613        }
     614
     615        /* Sidebar Border Color */
    435616        .main-navigation ul,
    436617        .main-navigation li,
    437         .post-navigation,
    438         .pagination,
    439         .comment-navigation,
     618        .widget input,
     619        .widget textarea,
     620        .widget table,
     621        .widget th,
     622        .widget td,
     623        .widget pre,
    440624        .widget li,
    441625        .widget_categories .children,
    442626        .widget_nav_menu .sub-menu,
    443627        .widget_pages .children,
    444         .site-header,
    445         .site-footer,
    446         .hentry + .hentry,
    447         .author-info,
    448         .entry-content .page-links a,
    449         .page-links > span,
    450         .page-header,
    451         .comments-area,
    452         .comment-list + .comment-respond,
    453         .comment-list article,
    454         .comment-list .pingback,
    455         .comment-list .trackback,
    456         .comment-list .reply a,
    457         .no-comments {
    458             border-color: %4$s; /* Fallback for IE7 and IE8 */
    459             border-color: %6$s;
    460         }
    461 
    462         .post-navigation .nav-previous:not(.has-post-thumbnail) + .nav-next:not(.has-post-thumbnail) {
    463             border-color: %6$s;
    464         }
    465 
    466         /* Border Focus Color */
    467         a:focus,
    468         button:focus,
    469         input:focus {
    470             outline-color: %4$s; /* Fallback for IE7 and IE8 */
    471             outline-color: %7$s;
    472         }
    473 
    474         input:focus,
    475         textarea:focus {
    476             border-color: %4$s; /* Fallback for IE7 and IE8 */
    477             border-color: %7$s;
    478         }
    479 
    480         /* Sidebar Link Color */
    481         .secondary-toggle:before {
    482             color: %8$s;
    483         }
    484 
    485         .site-title a,
    486         .site-description {
    487             color: %8$s;
    488         }
    489 
    490         /* Sidebar Text Color */
    491         .site-title a:hover,
    492         .site-title a:focus {
    493             color: %9$s;
    494         }
    495 
    496         /* Sidebar Border Color */
    497         .secondary-toggle {
    498             border-color: %8$s; /* Fallback for IE7 and IE8 */
    499             border-color: %10$s;
    500         }
    501 
    502         /* Sidebar Border Focus Color */
    503         .secondary-toggle:hover,
    504         .secondary-toggle:focus {
    505             border-color: %8$s; /* Fallback for IE7 and IE8 */
    506             border-color: %11$s;
    507         }
    508 
    509         .site-title a {
    510             outline-color: %8$s; /* Fallback for IE7 and IE8 */
    511             outline-color: %11$s;
    512         }
    513 
    514         /* Meta Background Color */
    515         .entry-footer {
    516             background-color: %12$s;
    517         }
    518 
    519         @media screen and (min-width: 38.75em) {
    520             /* Main Text Color */
    521             .page-header {
    522                 border-color: %4$s;
    523             }
    524         }
    525 
    526         @media screen and (min-width: 59.6875em) {
    527             /* Make sure its transparent on desktop */
    528             .site-header,
    529             .secondary {
    530                 background-color: transparent;
    531             }
    532 
    533             /* Sidebar Background Color */
    534             .widget button,
    535             .widget input[type="button"],
    536             .widget input[type="reset"],
    537             .widget input[type="submit"],
    538             .widget_calendar tbody a,
    539             .widget_calendar tbody a:hover,
    540             .widget_calendar tbody a:focus {
    541                 color: %2$s;
    542             }
    543 
    544             /* Sidebar Link Color */
    545             .secondary a,
    546             .dropdown-toggle:after,
    547             .widget-title,
    548             .widget blockquote cite,
    549             .widget blockquote small {
    550                 color: %8$s;
    551             }
    552 
    553             .widget button,
    554             .widget input[type="button"],
    555             .widget input[type="reset"],
    556             .widget input[type="submit"],
    557             .widget_calendar tbody a {
    558                 background-color: %8$s;
    559             }
    560 
    561             .textwidget a {
    562                 border-color: %8$s;
    563             }
    564 
    565             /* Sidebar Text Color */
    566             .secondary a:hover,
    567             .secondary a:focus,
    568             .main-navigation .menu-item-description,
    569             .widget,
    570             .widget blockquote,
    571             .widget .wp-caption-text,
    572             .widget .gallery-caption {
    573                 color: %9$s;
    574             }
    575 
    576             .widget button:hover,
    577             .widget button:focus,
    578             .widget input[type="button"]:hover,
    579             .widget input[type="button"]:focus,
    580             .widget input[type="reset"]:hover,
    581             .widget input[type="reset"]:focus,
    582             .widget input[type="submit"]:hover,
    583             .widget input[type="submit"]:focus,
    584             .widget_calendar tbody a:hover,
    585             .widget_calendar tbody a:focus {
    586                 background-color: %9$s;
    587             }
    588 
    589             .widget blockquote {
    590                 border-color: %9$s;
    591             }
    592 
    593             /* Sidebar Border Color */
    594             .main-navigation ul,
    595             .main-navigation li,
    596             .widget input,
    597             .widget textarea,
    598             .widget table,
    599             .widget th,
    600             .widget td,
    601             .widget pre,
    602             .widget li,
    603             .widget_categories .children,
    604             .widget_nav_menu .sub-menu,
    605             .widget_pages .children,
    606             .widget abbr[title] {
    607                 border-color: %10$s;
    608             }
    609 
    610             .dropdown-toggle:hover,
    611             .dropdown-toggle:focus,
    612             .widget hr {
    613                 background-color: %10$s;
    614             }
    615 
    616             .widget input:focus,
    617             .widget textarea:focus {
    618                 border-color: %11$s;
    619             }
    620 
    621             .sidebar a:focus,
    622             .dropdown-toggle:focus {
    623                 outline-color: %11$s;
    624             }
    625         }
    626     ';
    627 
    628     wp_add_inline_style( 'twentyfifteen-style', sprintf( $css,
    629         $color_background,
    630         $color_sidebar_background,
    631         $color_box_background,
    632         $color_main_text,
    633         $color_secondary_text,
    634         $color_border,
    635         $color_border_focus,
    636         $color_sidebar_link,
    637         $color_sidebar_text,
    638         $color_sidebar_border,
    639         $color_sidebar_border_focus,
    640         $color_meta_box
    641     ) );
    642 }
    643 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    644 
    645 /**
    646  * Binds JS listener to make Customizer color_scheme control.
    647  * Passes color scheme data as colorScheme global.
    648  *
    649  * @since Twenty Fifteen 1.0
    650  */
    651 function twentyfifteen_customize_control_js() {
    652     wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '', true  );
    653     wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
    654 }
    655 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
    656 
    657 /**
    658  * Binds JS handlers to make Customizer preview reload changes asynchronously.
    659  *
    660  * @since Twenty Fifteen 1.0
    661  */
    662 function twentyfifteen_customize_preview_js() {
    663     wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
    664 }
    665 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
     628        .widget abbr[title] {
     629            border-color: {{ data.sidebar_border_color }};
     630        }
     631
     632        .dropdown-toggle:hover,
     633        .dropdown-toggle:focus,
     634        .widget hr {
     635            background-color: {{ data.sidebar_border_color }};
     636        }
     637
     638        .widget input:focus,
     639        .widget textarea:focus {
     640            border-color: {{ data.sidebar_border_focus_color }};
     641        }
     642
     643        .sidebar a:focus,
     644        .dropdown-toggle:focus {
     645            outline-color: {{ data.sidebar_border_focus_color }};
     646        }
     647    }
     648    </script>
     649    <?php
     650}
     651add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
  • trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

    r30271 r30274  
    55
    66( function( api ) {
     7    var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
     8        colorSchemeKeys = [
     9            'background_color',
     10            'header_background_color',
     11            'box_background_color',
     12            'textcolor',
     13            'sidebar_textcolor',
     14            'meta_box_background_color'
     15        ],
     16        colorSettings = [
     17            'background_color',
     18            'header_background_color',
     19            'sidebar_textcolor'
     20        ];
     21
    722    api.controlConstructor.select = api.Control.extend( {
    823        ready: function() {
     
    3045        }
    3146    } );
     47
     48    function getCSS() {
     49        var scheme = api( 'color_scheme' )(),
     50            colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
     51
     52        // Merge in color scheme overrides.
     53        _.each( colorSettings, function( setting ) {
     54            colors[ setting ] = api( setting )();
     55        });
     56
     57        // Add additional colors.
     58        colors['secondary_textcolor'] = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
     59        colors['border_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
     60        colors['border_focus_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
     61        colors['sidebar_textcolor2'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
     62        colors['sidebar_border_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
     63        colors['sidebar_border_focus_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
     64
     65        return cssTemplate( colors );
     66    }
     67
     68    // Update the CSS whenever a color setting is changed.
     69    _.each( colorSettings, function( setting ) {
     70        api( setting, function( setting ) {
     71            setting.bind( _.throttle( function( value ) {
     72                api( 'color_scheme_css' ).set( getCSS() );
     73            }, 250 ) );
     74        } );
     75    } );
    3276} )( wp.customize );
Note: See TracChangeset for help on using the changeset viewer.