Changeset 30893
- Timestamp:
- 12/16/2014 12:26:49 PM (10 years ago)
- Location:
- trunk/src/wp-content/themes/twentyfifteen
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-content/themes/twentyfifteen/inc/customizer.php
r30802 r30893 26 26 'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme', 27 27 'transport' => 'postMessage', 28 ) );29 30 $wp_customize->add_setting( 'color_scheme_css', array(31 'default' => '',32 'transport' => 'postMessage',33 28 ) ); 34 29 … … 232 227 function twentyfifteen_color_scheme_css() { 233 228 $color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); 234 $color_scheme_css = get_theme_mod( 'color_scheme_css', '' );235 229 236 230 // 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 ) { 238 232 return; 239 233 } 240 234 235 $color_scheme = twentyfifteen_get_color_scheme(); 236 237 // Convert main and sidebar text hex color to rgba. 238 $color_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[3] ); 239 $color_sidebar_textcolor_rgb = twentyfifteen_hex2rgb( $color_scheme[4] ); 240 $colors = array( 241 'background_color' => $color_scheme[0], 242 'header_background_color' => $color_scheme[1], 243 'box_background_color' => $color_scheme[2], 244 'textcolor' => $color_scheme[3], 245 'secondary_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_textcolor_rgb ), 246 'border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_textcolor_rgb ), 247 'border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_textcolor_rgb ), 248 'sidebar_textcolor' => $color_scheme[4], 249 'sidebar_border_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_textcolor_rgb ), 250 'sidebar_border_focus_color' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_textcolor_rgb ), 251 'secondary_sidebar_textcolor' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_textcolor_rgb ), 252 'meta_box_background_color' => $color_scheme[5], 253 ); 254 255 $color_scheme_css = twentyfifteen_get_color_scheme_css( $colors ); 256 241 257 wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css ); 242 258 } … … 251 267 */ 252 268 function 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);269 wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '20141216', true ); 254 270 wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() ); 255 271 } … … 262 278 */ 263 279 function twentyfifteen_customize_preview_js() { 264 wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141 029', true );280 wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141216', true ); 265 281 } 266 282 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' ); 267 283 268 284 /** 269 * Output an Underscore template for generating CSS for the color scheme. 270 * 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. 273 * 274 * @since Twenty Fifteen 1.0 275 */ 276 function twentyfifteen_color_scheme_css_template() { 277 ?> 278 <script type="text/html" id="tmpl-twentyfifteen-color-scheme"> 285 * Returns CSS for the color schemes. 286 * 287 * @since Twenty Fifteen 1.0 288 * 289 * @param array $colors Color scheme colors. 290 * @return string Color scheme CSS. 291 */ 292 function twentyfifteen_get_color_scheme_css( $colors ) { 293 $colors = wp_parse_args( $colors, array( 294 'background_color' => '', 295 'header_background_color' => '', 296 'box_background_color' => '', 297 'textcolor' => '', 298 'secondary_textcolor' => '', 299 'border_color' => '', 300 'border_focus_color' => '', 301 'sidebar_textcolor' => '', 302 'sidebar_border_color' => '', 303 'sidebar_border_focus_color' => '', 304 'secondary_sidebar_textcolor' => '', 305 'meta_box_background_color' => '', 306 ) ); 307 308 $css = <<<CSS 279 309 /* Color Scheme */ 280 310 281 311 /* Background Color */ 282 312 body { 283 background-color: { { data.background_color }};313 background-color: {$colors['background_color']}; 284 314 } 285 315 … … 287 317 body:before, 288 318 .site-header { 289 background-color: { { data.header_background_color }};319 background-color: {$colors['header_background_color']}; 290 320 } 291 321 … … 299 329 .page-content, 300 330 .comments-area { 301 background-color: { { data.box_background_color }};331 background-color: {$colors['box_background_color']}; 302 332 } 303 333 … … 316 346 .page-links a:focus, 317 347 .sticky-post { 318 color: { { data.box_background_color }};348 color: {$colors['box_background_color']}; 319 349 } 320 350 … … 329 359 .page-links a, 330 360 .sticky-post { 331 background-color: { { data.textcolor }};361 background-color: {$colors['textcolor']}; 332 362 } 333 363 … … 353 383 .site-info a:hover, 354 384 .site-info a:focus { 355 color: { { data.textcolor }};385 color: {$colors['textcolor']}; 356 386 } 357 387 … … 370 400 .comment-list .reply a:hover, 371 401 .site-info a:hover { 372 border-color: { { data.textcolor }};402 border-color: {$colors['textcolor']}; 373 403 } 374 404 … … 390 420 .page-links a:hover, 391 421 .page-links a:focus { 392 background-color: { { data.textcolor }}; /* Fallback for IE7 and IE8 */393 background-color: { { data.secondary_textcolor }};422 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ 423 background-color: {$colors['secondary_textcolor']}; 394 424 } 395 425 … … 430 460 .gallery-caption, 431 461 .comment-list .reply a { 432 color: { { data.textcolor }}; /* Fallback for IE7 and IE8 */433 color: { { data.secondary_textcolor }};462 color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ 463 color: {$colors['secondary_textcolor']}; 434 464 } 435 465 … … 438 468 .logged-in-as a:hover, 439 469 .comment-author a:hover { 440 border-color: { { data.textcolor }}; /* Fallback for IE7 and IE8 */441 border-color: { { data.secondary_textcolor }};470 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ 471 border-color: {$colors['secondary_textcolor']}; 442 472 } 443 473 … … 446 476 .dropdown-toggle:hover, 447 477 .dropdown-toggle:focus { 448 background-color: { { data.textcolor }}; /* Fallback for IE7 and IE8 */449 background-color: { { data.border_color }};478 background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ 479 background-color: {$colors['border_color']}; 450 480 } 451 481 … … 482 512 .comment-list .reply a, 483 513 .no-comments { 484 border-color: { { data.textcolor }}; /* Fallback for IE7 and IE8 */485 border-color: { { data.border_color }};514 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ 515 border-color: {$colors['border_color']}; 486 516 } 487 517 … … 490 520 button:focus, 491 521 input:focus { 492 outline-color: { { data.textcolor }}; /* Fallback for IE7 and IE8 */493 outline-color: { { data.border_focus_color }};522 outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ 523 outline-color: {$colors['border_focus_color']}; 494 524 } 495 525 496 526 input:focus, 497 527 textarea:focus { 498 border-color: { { data.textcolor }}; /* Fallback for IE7 and IE8 */499 border-color: { { data.border_focus_color }};528 border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */ 529 border-color: {$colors['border_focus_color']}; 500 530 } 501 531 502 532 /* Sidebar Link Color */ 503 533 .secondary-toggle:before { 504 color: { { data.sidebar_textcolor }};534 color: {$colors['sidebar_textcolor']}; 505 535 } 506 536 507 537 .site-title a, 508 538 .site-description { 509 color: { { data.sidebar_textcolor }};539 color: {$colors['sidebar_textcolor']}; 510 540 } 511 541 … … 513 543 .site-title a:hover, 514 544 .site-title a:focus { 515 color: { { data.secondary_sidebar_textcolor }};545 color: {$colors['secondary_sidebar_textcolor']}; 516 546 } 517 547 518 548 /* Sidebar Border Color */ 519 549 .secondary-toggle { 520 border-color: { { data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */521 border-color: { { data.sidebar_border_color }};550 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */ 551 border-color: {$colors['sidebar_border_color']}; 522 552 } 523 553 … … 525 555 .secondary-toggle:hover, 526 556 .secondary-toggle:focus { 527 border-color: { { data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */528 border-color: { { data.sidebar_border_focus_color }};557 border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */ 558 border-color: {$colors['sidebar_border_focus_color']}; 529 559 } 530 560 531 561 .site-title a { 532 outline-color: { { data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */533 outline-color: { { data.sidebar_border_focus_color }};562 outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */ 563 outline-color: {$colors['sidebar_border_focus_color']}; 534 564 } 535 565 536 566 /* Meta Background Color */ 537 567 .entry-footer { 538 background-color: { { data.meta_box_background_color }};568 background-color: {$colors['meta_box_background_color']}; 539 569 } 540 570 … … 542 572 /* Main Text Color */ 543 573 .page-header { 544 border-color: { { data.textcolor }};574 border-color: {$colors['textcolor']}; 545 575 } 546 576 } … … 561 591 .widget_calendar tbody a:hover, 562 592 .widget_calendar tbody a:focus { 563 color: { { data.header_background_color }};593 color: {$colors['header_background_color']}; 564 594 } 565 595 … … 570 600 .widget blockquote cite, 571 601 .widget blockquote small { 572 color: { { data.sidebar_textcolor }};602 color: {$colors['sidebar_textcolor']}; 573 603 } 574 604 … … 578 608 .widget input[type="submit"], 579 609 .widget_calendar tbody a { 580 background-color: { { data.sidebar_textcolor }};610 background-color: {$colors['sidebar_textcolor']}; 581 611 } 582 612 583 613 .textwidget a { 584 border-color: { { data.sidebar_textcolor }};614 border-color: {$colors['sidebar_textcolor']}; 585 615 } 586 616 … … 593 623 .widget .wp-caption-text, 594 624 .widget .gallery-caption { 595 color: { { data.secondary_sidebar_textcolor }};625 color: {$colors['secondary_sidebar_textcolor']}; 596 626 } 597 627 … … 606 636 .widget_calendar tbody a:hover, 607 637 .widget_calendar tbody a:focus { 608 background-color: { { data.secondary_sidebar_textcolor }};638 background-color: {$colors['secondary_sidebar_textcolor']}; 609 639 } 610 640 611 641 .widget blockquote { 612 border-color: { { data.secondary_sidebar_textcolor }};642 border-color: {$colors['secondary_sidebar_textcolor']}; 613 643 } 614 644 … … 627 657 .widget_pages .children, 628 658 .widget abbr[title] { 629 border-color: { { data.sidebar_border_color }};659 border-color: {$colors['sidebar_border_color']}; 630 660 } 631 661 … … 633 663 .dropdown-toggle:focus, 634 664 .widget hr { 635 background-color: { { data.sidebar_border_color }};665 background-color: {$colors['sidebar_border_color']}; 636 666 } 637 667 638 668 .widget input:focus, 639 669 .widget textarea:focus { 640 border-color: { { data.sidebar_border_focus_color }};670 border-color: {$colors['sidebar_border_focus_color']}; 641 671 } 642 672 643 673 .sidebar a:focus, 644 674 .dropdown-toggle:focus { 645 outline-color: {{ data.sidebar_border_focus_color }}; 646 } 647 } 675 outline-color: {$colors['sidebar_border_focus_color']}; 676 } 677 } 678 CSS; 679 680 return $css; 681 } 682 683 /** 684 * Output an Underscore template for generating CSS for the color scheme. 685 * 686 * The template generates the css dynamically for instant display in the Customizer 687 * preview. 688 * 689 * @since Twenty Fifteen 1.0 690 */ 691 function twentyfifteen_color_scheme_css_template() { 692 $colors = array( 693 'background_color' => '{{ data.background_color }}', 694 'header_background_color' => '{{ data.header_background_color }}', 695 'box_background_color' => '{{ data.box_background_color }}', 696 'textcolor' => '{{ data.textcolor }}', 697 'secondary_textcolor' => '{{ data.secondary_textcolor }}', 698 'border_color' => '{{ data.border_color }}', 699 'border_focus_color' => '{{ data.border_focus_color }}', 700 'sidebar_textcolor' => '{{ data.sidebar_textcolor }}', 701 'sidebar_border_color' => '{{ data.sidebar_border_color }}', 702 'sidebar_border_focus_color' => '{{ data.sidebar_border_focus_color }}', 703 'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}', 704 'meta_box_background_color' => '{{ data.meta_box_background_color }}', 705 ); 706 ?> 707 <script type="text/html" id="tmpl-twentyfifteen-color-scheme"> 708 <?php echo twentyfifteen_get_color_scheme_css( $colors ); ?> 648 709 </script> 649 710 <?php -
trunk/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js
r30325 r30893 48 48 49 49 // Generate the CSS for the current Color Scheme. 50 function getCSS() {51 var scheme = api( 'color_scheme' )(), 50 function updateCSS() { 51 var scheme = api( 'color_scheme' )(), css, 52 52 colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors ); 53 53 … … 65 65 colors.sidebar_border_focus_color = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 ); 66 66 67 return cssTemplate( colors ); 67 css = cssTemplate( colors ); 68 69 api.previewer.send( 'update-color-scheme-css', css ); 68 70 } 69 71 … … 71 73 _.each( colorSettings, function( setting ) { 72 74 api( setting, function( setting ) { 73 setting.bind( _.throttle( function() { 74 api( 'color_scheme_css' ).set( getCSS() ); 75 }, 250 ) ); 75 setting.bind( updateCSS ); 76 76 } ); 77 77 } ); -
trunk/src/wp-content/themes/twentyfifteen/js/customize-preview.js
r30806 r30893 4 4 5 5 ( function( $ ) { 6 var $style = $( '#twentyfifteen-color-scheme-css' ); 6 var $style = $( '#twentyfifteen-color-scheme-css' ), 7 api = wp.customize; 7 8 8 9 if ( ! $style.length ) { … … 12 13 13 14 // Site title. 14 wp.customize( 'blogname', function( value ) {15 api( 'blogname', function( value ) { 15 16 value.bind( function( to ) { 16 17 $( '.site-title a' ).text( to ); … … 19 20 20 21 // Site tagline. 21 wp.customize( 'blogdescription', function( value ) {22 api( 'blogdescription', function( value ) { 22 23 value.bind( function( to ) { 23 24 $( '.site-description' ).text( to ); … … 26 27 27 28 // Color Scheme CSS. 28 wp.customize( 'color_scheme_css', function( value) {29 value.bind( function( to) {30 $style.html( to);29 api.bind( 'preview-ready', function() { 30 api.preview.bind( 'update-color-scheme-css', function( css ) { 31 $style.html( css ); 31 32 } ); 32 33 } );
Note: See TracChangeset
for help on using the changeset viewer.